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
- jQuery powered “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.
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. There are, of course, other browsers which offer (limited) support of CSS3 properties but this demo is geared towards mainstream browsers (that is my way of saying don’t use IE on this demo).