Index

24 CSS3 Tutorials for Advanced User Interface Effects Web developers are becoming crafty as web browsers are updating to more popular standards. This can only lead to better support along with an easier frontend development time. One of the best methods for studying new techniques is by practicing with online tutorials. I want to present a series of 24 well-explained tutorials for more advanced interfaces. These mostly focus around CSS3 effects and more obscure properties within the CSS library. Interactive SVG Infographic Animated 3-D Bar Chart CSS3 Clip Property Annotation Overlay Effect Animated Content Tabs Enhance Required Form Fields using CSS3 Animated Tooltips CSS3 Responsive Timeline Filter Functionality with CSS3 CSS3 Bounce Effect Multiple Column Layouts Understanding the CSS3 calc() Function Custom Checkboxes and Radio Buttons Cool Image Caption Techniques CSS3 :First-Of-Type Selector Breadcrumb Navigation Responsive Form with HTML5/CSS3 CSS3 Linear Gradients CSS3 Repeating Gradients Paragraph Dropcaps Scalable Vector Graphics with CSS3

6 Cool Image Captions with CSS3 CSS3 is really powerful. It used to be that we need images or a bunch of JavaScript codelines to make a simple transition effect. Nowadays we can do the same with only CSS3. In this tutorial, we will show you how to create image captions with various transitions simply using CSS3. Browser Support This caption will be much dependent on transform and transition properties which are relatively new features, so, it would be wise to take note of the browser support needed to run the caption smoothly. The following are browsers that already support transform and transition: Internet Explorer 10+ (not released yet)Firefox 6+Chrome 13+Safari 3.2+Opera 11+ Now, let’s start the tutorial. HTML Structure We have 6 images; each image with a different caption style. Basic CSS Before styling any element, it is always a good start to reset all the properties using this CSS reset and give them their default style values, so all browsers will render the same result (except maybe, IE6). Image Box Style Caption 1

Animista