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:
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.
Wasn’t there supposed to be an animation one too?
css transitions, it works in Opera
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.
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
I can’t wait to start using CSS3 when its fully supported by all browsers in 2046.
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.
Great screencast! Though, the mic volume/control could be a bit more consistent.
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!
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.
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.
Rofl I love how you laugh on “CSS validation… who cares.. mohahaha”
anyways great stuff :P
I watched you ramble on to the end! lol. Great video, thank you. It was pretty funny about the safari welcome screen. ;-)
Great screencast.
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.
What program are you using to do the css and suppports the browser extension?
Coda
The closest program on Windows is e – texteditor.
Great video, what screencasting software do you use on your mac?
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
Good video. CSS3 is not for all browsers, but we must go forward ;)
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.
thanks, I like this one.
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.
Hurry up CSS3. Loved the screencast.
Great tutorial Chris!
I particularly like how you described the easing effect….”it goes, Neeeerrrr and STOP!” LOL
Keep up the good work!
Jon
Thanks, for this cool stuff
Cool, I hope “border-radius” will be supported soon.
-FireDart
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
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 ;)
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;
agreed…agreed… :D