Truth be told, I don’t really know if CSS3 gradients are the next big thing or not but, with increasing support in modern browsers, they are being used more and more. Like many other CSS3 properties, gradients allow us to create image-like properties with a few lines of code, thus saving on image requests, and make it easy to change backgrounds quickly and easily without using Photoshop or Fireworks.
Instead of going through some of the basic CSS declarations, I’ll list a few of the many CSS3 gradient tutorials that I have found useful. Once I have tried a few more gradients myself, I’ll post some examples.
On the subject of browser compatibility, CSS3 gradients are supported by Firefox 3.6+, Safari and Chrome but not Internet Explorer or Opera. You can still use them though; just specify a fallback background color or image for the non-supportive browsers. Remember that websites do not need to look exactly the same in all browsers. I’ve used a gradient recently on Get Emotional for the ‘featured’ item in the right column. Browsers that support CSS3 gradients see the gradient and IE users will just see a solid color which I think is perfectly acceptable.
I hope that the syntax for CSS3 gradients becomes more consistent between supporting browsers (although this won’t be a problem when the official syntax is supported/agreed). The CSS declarations used in the above examples should probably also contain the specification syntax for gradients as well as the
-webkit- prefixes/syntax. The Mozilla syntax appears to be closest to the specification.
For sure, there will be a lot more CSS3 gradient usage over the next few years and I think it makes sense to get up to speed with this method now.
Stunning CSS3: A Project-Based Guide: Use this book to work through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration.
» Buy from Amazon.com · Amazon.co.uk
Sync files between computers. Share files with your clients, friends, and family using DropBox. It's great!