Grow your CSS skills. Land your dream job.

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

Download Video File

Comments

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

    Cheers,
    Dennis

  5. Dave
    Permalink to comment#

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

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

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

    anyways great stuff :P

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

  11. 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. Great video, what screencasting software do you use on your mac?

  15. 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. 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. 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!
    Jon

  22. Thanks, for this cool stuff

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

    -FireDart

  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…

    Irene

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

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".