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

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

  3. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Permalink to comment#

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

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

    • User Avatar
      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. User Avatar
    Permalink to comment#

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

    anyways great stuff :P

  10. User Avatar
    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. User Avatar
    Permalink to comment#

    Great screencast.

  12. User Avatar
    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. User Avatar
    Permalink to comment#

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

  14. User Avatar
    Permalink to comment#

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

  15. User Avatar
    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. User Avatar
    puslapių kūrimas
    Permalink to comment#

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

  17. User Avatar
    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. User Avatar
    Permalink to comment#

    thanks, I like this one.

  19. User Avatar
    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. User Avatar
    Permalink to comment#

    Hurry up CSS3. Loved the screencast.

  21. User Avatar
    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. User Avatar
    Web Design Creatives
    Permalink to comment#

    Thanks, for this cool stuff

  23. User Avatar
    Permalink to comment#

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


  24. User Avatar
    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. User Avatar
    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. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.