Mastering CSS Gradients in Under an Hour

Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects? Well, it’s time to kill those 1px wide images, my friend. If you’re just curious about how to use CSS Gradients, this is the place for you. Rochester Oliveira will start with the basics of syntax to very advanced effects with lots of tips and examples. Remember, learning about CSS gradients is really important since browsers are getting better and better every day. Mobile browsers have good CSS3 support by default. So, let’s rock!

The first thing you must be aware of is browser support. For now you must keep the browser vendor prefixes AND use a custom filter for IE. So, Rochester Oliveira has at least 5 possible prefixes, each one with its own subtle variation and even multiple differences between browsers versions: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), and IE (Trident), which has 2 different ways to do it (IE… go figure!). He’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and he’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here).