CSS3 Today! Introduction to CSS3.

28th June 2011

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.

Categories: CSS, CSS3, Tips

Tags:


« Back

Comments

  1. Mxicoders says:

    Thanks for helping gentleman. when you update your blog please inform me…

  2. AZU says:

    Hi, I’m new to this BLog.
    I am interested in learning the new CSS 3 techniques for sure. I look forward to your demos and tutorials. When will they come out here?

    Cheers :)

    Oh yes, thank you for providing the above links on font-face and gradients. Will come in handy in my next project.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home2/jasonsto/thewebdevelopmentblog.com/public_html/wp-includes/plugin.php on line 571