#57: Using CSS3

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...

Links from Video:


  1. Aaron Bazinet
    Permalink to comment#

    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
    Permalink to comment#

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

  3. Darren
    Permalink to comment#

    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
    Permalink to comment#

    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.


  5. Dave
    Permalink to comment#

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

    • Lars
      Permalink to comment#

      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
    Permalink to comment#

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

  7. Brandon Setter
    Permalink to comment#

    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!


  8. Eric
    Permalink to comment#

    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
      Permalink to comment#

      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
    Permalink to comment#

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

    anyways great stuff :P

  10. Andrew Champ
    Permalink to comment#

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

  11. Sean
    Permalink to comment#

    Great screencast.

  12. Edis
    Permalink to comment#

    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
    Permalink to comment#

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

  14. Cyberpunkstudio
    Permalink to comment#

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

  15. Nick Kusters
    Permalink to comment#

    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 :)


  16. puslapių kūrimas
    Permalink to comment#

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

  17. Daniel K
    Permalink to comment#

    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
    Permalink to comment#

    thanks, I like this one.

  19. Christian3D
    Permalink to comment#

    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
    Permalink to comment#

    Hurry up CSS3. Loved the screencast.

  21. Jon
    Permalink to comment#

    Great tutorial Chris!

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

    Keep up the good work!

  22. Web Design Creatives
    Permalink to comment#

    Thanks, for this cool stuff

  23. FireDart
    Permalink to comment#

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


  24. Irene Sande
    Permalink to comment#

    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…


  25. Elody
    Permalink to comment#

    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 ;)

  26. Hossein
    Permalink to comment#

    you’ve thought me a lot, you inspired me a lot, I’ve seen many video tutorials but your special funny style in teaching is something I’ve always looked for, thanks Chris.

    P.S this is the right order we write text-shadows

    text-shadow: h-shadow v-shadow blur color;

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.