Designers have been using basic CSS3 techniques to enhance their designs for several years now, but cross-browser incompatibilities and lack of practical examples have slowed its progression in the mainstream design world. In this tutorial, I explore and demonstrate some of the more practical aspects of CSS3 and provide realistic examples, resources, advise and a compatibility guide.
The demo page showcases a number of CSS3 techniques including:
- Gradients (Radial and Linear)
- “Rounded” Border Images
- Border Radius
- Drop Shadows (Box and Text)
- Keyframe Animations
- Image Masking
- :target Pseudo Selector
- Multiple Backgrounds
- CSS Columns
Examples in the demo include:
- Image gallery with randomized CSS transitions (supplemented with jQuery)
- Image-less 3D Bar Chart
- Pure HTML / CSS Accordion links
- Navigation with CSS animated hover effects
- “View Mode” with CSS3 visual enhancements
After exploring the demo use the “CSS View Mode” feature to see example code, my comments and suggested resources / examples for each example.
Note: This demo was originally written in early 2010 but has been updated in October 2012 to reflect current browser compatibility.
Although the upcoming FireFox 3.7/ 4.0 is said to include support for CSS transitions, you will need to use a Webkit browser for now to see some of the advanced examples. I recommend updating to the latest version for full support. I designed this demo for Webkit, Firefox 3.6+ and Opera 10.5.3 and have intentionally used browser vendor prefixes accordingly, if you need IE8 support, you should probably either quit, fire your client or use CSS3 PIE.