Even though the CSS3 spec is not 100% complete, all the major browsers are now supporting it making it ready to use today! Due to the spec not being finish thought you generally have to use the browser prefix so it can get a little long winded… None the less, you can achieve so much more than with javascript alone.

With CSS3 there is a lot to learn, and instead of me trying to cover it all in one article I will be posting some tutorials and demo’s over the coming months on how to do various things. But I do want to cover a few basics before we go into those tutorials.

First things first, if you’re still using images for round edges, stop! All modern browsers support round edges via CSS3 and the code is really easy… (Older versions of browsers including IE will roll back to square edges, but those users deserve to miss out for not upgrading their browser haha).

border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
-ms-border-radius: 15px;

Okay… It seems like a fair bit of code… But once the full spec is complete you’ll only need the first line. For now this will cover the leading browsers (Safari, Chrome, Firefox, Opera and IE9+).

Secondly, fonts. Too many times I see site using cufon, sifr or other attempts at using non-standard fonts. ALL the major browsers support the font-face tag as standard and there are many website that will generate the fonts and code for you. My preference is http://www.font2web.com/ but http://www.fontsquirrel.com/fontface/generator is also good… They will provide the CSS code which you put in your stylesheet, then you can select call the font-family in just like you would a standard font. It’s really easy to do.

Lastly, gradients… Relatively easy to do as well is CSS 3 gradients. These can be a bit trickier but there are some good tools to help you generate background gradients so you can stop using images. Try http://www.createcss3.com/ for basic linear gradients or http://www.colorzilla.com/gradient-editor/ for more advanced gradients with colour stops etc.

In future demos I’ll cover more but these are the 3 key ones you should be using today. In future tutorials I’ll cover transforms, transitions, animations, shadows and much much more! Stay Tuned.