#57: Using CSS3

Posted on: 3/18/2009   By: Chris Coyier 34 Comments

The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image…

Running time: 51:36

Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)

Links from Video:

Get the Flash Player to see this player.

Responses

  1. Aaron Bazinet says:
    03/18/2009 at 3:17 pm

    That’s a nice summary, thanks for that. Man I’m looking forward to this stuff. At least we can use some of these as progressive enhancements now, which depending on your audience can possibly be a decent number that can actually see it.

    It’s funny how you always mention how you’re rambling on, but don’t worry about it. It’s cool that it’s unscripted and “real” or whatever, so no worries.

  2. Nile says:
    03/18/2009 at 7:43 pm

    Wasn’t there supposed to be an animation one too?

  3. Darren says:
    03/19/2009 at 7:59 am

    Great screencast, Chris. Too bad the welcome movie didn’t work for you, just downloaded Safari 4 and it does look awesome.

    I can’t wait for multiple backgrounds to be supported by all browsers, it will be such a dream to use.

    Also, I agree with Aaron, rambling is nothing to worry about, makes it more personal imo.

  4. Dennis says:
    03/19/2009 at 8:01 am

    Thanks for the awesome screencast, Chris! It was very informative.

    I can’t wait to start using CSS3 when it is fully supported and to see what everyone else does with it.

    Cheers,
    Dennis

  5. Dave says:
    03/19/2009 at 8:31 am

    I can’t wait to start using CSS3 when its fully supported by all browsers in 2046.

    • Lars says:
      03/19/2009 at 8:52 am

      Word. But at least it degrades nicely so those that are on the cutting edge will get a much more enjoyable experience. I am hopeful that the future users of the internet will soon be making more transitions to better browsers and hopefully circumvent the need (at least some of it) to support old browsers in the first place.

  6. Evan says:
    03/19/2009 at 10:56 am

    Great screencast! Though, the mic volume/control could be a bit more consistent.

  7. Brandon Setter says:
    03/19/2009 at 12:02 pm

    I’m really excited about this stuff! Thanks for the screencast to get up up to speed on some things we can already start implementing! Any idea on when the official release for CSS3 is?

    I enjoy following you on twitter as well!

    Cheers!

  8. Eric says:
    03/19/2009 at 7:48 pm

    Great screencast. I’ve been following CSS 3 for awhile. I would like to point out that the leaves page doesn’t work if you shut of JavaScript. I was kind of disappointing when I tried it with js off.

    • Donnie says:
      03/25/2009 at 4:51 am

      Yea, the page uses JavaScript to create each individual leaf. But if you just wanted something to move around and be created ‘by hand’, Then it would work.

  9. Daniel says:
    03/20/2009 at 1:19 am

    Rofl I love how you laugh on “CSS validation… who cares.. mohahaha”

    anyways great stuff :P

  10. Andrew Champ says:
    03/20/2009 at 1:35 am

    I watched you ramble on to the end! lol. Great video, thank you. It was pretty funny about the safari welcome screen. ;-)

  11. Sean says:
    03/20/2009 at 3:00 am

    Great screencast.

  12. Edis says:
    03/20/2009 at 6:52 am

    Great screencast Chris,very informative.
    Finaly,i will be able to code everything i can imagine and design in photoshop.
    Now you can concentrate more on the design part and worry less about the code part.
    Seems to me,css3 is taking over the javascript turf. I guess we`ll see.

    Maybe in the future you could make a screencast where you design a page that is using all these new features,maybe even a new redesign of css tricks?I know i would like to see that.

    Thanks again for the great screencast.

  13. Bill says:
    03/20/2009 at 8:23 am

    What program are you using to do the css and suppports the browser extension?

  14. Cyberpunkstudio says:
    03/21/2009 at 12:02 pm

    Great video, what screencasting software do you use on your mac?

  15. Nick Kusters says:
    03/21/2009 at 4:25 pm

    Funny, I’ve had text-based Text-Shadows on my site (nkcss.com, hasn’t been updated in ages) for a few years now, but I’m sure the CSS3 way is a lot nicer then how I made it :)

    http://www.nkcss.com/index.php?viewarticleid=0000000022

  16. puslapių kūrimas says:
    03/22/2009 at 3:15 am

    Good video. CSS3 is not for all browsers, but we must go forward ;)

  17. Daniel K says:
    03/22/2009 at 9:45 am

    L. David Baron remarked at SxSW that @font-face, border image, etc will be implemented in Firefox 3.5. The slides for his presentation (along with Opera’s and Microsoft’s) are up on molly.com.

  18. redouane says:
    03/22/2009 at 4:22 pm

    thanks, I like this one.

  19. Christian3D says:
    03/23/2009 at 10:36 pm

    You rock,,,, thanks for the great information,,,,

    PS – I am glad that I am not the only one who has the occasional difficulty pronunciation stuff like font names.

  20. Naomi says:
    03/24/2009 at 8:58 am

    Hurry up CSS3. Loved the screencast.

  21. Jon says:
    03/24/2009 at 10:55 am

    Great tutorial Chris!

    I particularly like how you described the easing effect….”it goes, Neeeerrrr and STOP!” LOL

    Keep up the good work!
    Jon

  22. Web Design Creatives says:
    03/26/2009 at 3:02 am

    Thanks, for this cool stuff

  23. FireDart says:
    03/30/2009 at 7:29 pm

    Cool, I hope “border-radius” will be supported soon.

    -FireDart

  24. Irene Sande says:
    04/15/2009 at 2:56 am

    Thanks for a great screencast Chris!

    This is my first time on your site, but definately not the last.
    These things, as in online tutorials and screencasts, tend to make me sleepy, and rarely make me smile, but yours did :-)
    I actually really enjoyed that…

    Irene

  25. Elody says:
    04/30/2009 at 6:11 am

    Thx so much for this long video tutorial Chris, very interesting I can’t wait to get Firefox 3.1 now in french !
    Plus, I love your voice ;)

This comment thread is closed. If you have important information to share, you can always contact me.