Wow finally something about css3. Thinking if I should use it on my new sites.

Hey guys – if you’d prefer to download this video, search for “nettuts” on iTunes, and subscribe. The quality is better there too.

Hey Jeffrey, what about CodeIgniter From Scratch this week?

I am about to start watching it right now.
Need to relax some, and Jeff, yours screencasts always relax me

And I have lot of them offline on my hard drive…

Imho, CSS3 tuts are quite useless now. Sure it’s fun poking around with it as long as you have a capable browser, but let’s face it, FireFox 3.5 isn’t taking CSS3, IE(any) is having major problems trying to properly implement CSS(2)…

God I love this site. When do you think CSS3 will be supported by FF and IE7+?

You forget that you can use this stuff Today — if you create an app using something called Titanium. It uses the latest Webkit — even the 3D css transforms…

http://www.appcelerator.com/

Thanks, sweet screencast! I just voted for you in both categories, hope you win you guys rule!

I actually can’t wait when all the main browsers (IE and Firefox) but I’m also wondering why both Google Chrome did not successfully do 1, 2 , 7 and 8 examples. Strangely some of them did work like the sliding door but not as slick on Google Chrome.
Again a great video tutorial Jeff!

Great tut, Thanks !!! Can’t wait for CSS3 and HTML5 to become official, I really have not had the time to experiment with it, but every now and then I go and check it out to see what’s new.

BTW, ALready voted in both categories.

how did you get chrome on a mac!!!???

Interesting stuff. I remember a similar tutorial a while back… about CSS3 I think. I remember lots of people saying it was pointless. I don’t agree, at all.

Progressive enhancement. Use stuff like this, where appropriate, but don’t rely on it for every visitor. Keep this guideline in mind when using it, and you’ll be just fine

Awesome post, great stuff in CSS3. -Thanks!

When will be able to start using CSS3 without worrying about it not being supported on all browsers?

That stuff looks awesome. Can’t wait until I can actually use it on my sites. Might use some of it on an iPhone web app I’m building.

iPhone/iPod touch apps, and to some extent other browsers is all nice and dandy, but as far as i remember CSS3 isn’t even standardized yet. Until that time, most browsers won’t touch it with a 10ft pole.

As i said it’s fun to poke around new tech but it if you intend to use it on a site that should be usable for the bigger browsers (IE6+7, FF and Safari) it’s probably better to have a redundant set of stylesheets.

*Sigh, I’m gonna miss the days of written tutorials. I guess it’s just one of those things regarding how different people learn differently- I just much prefer reading to watching, and it also is easier to go back and quickly reference a written tutorial, print it, etc.

Nevertheless though, great tips Jeff!

P.S. (Oh, and the one other downside to video tutorials- for the small percentage of poor souls like myself, it sucks having to wait 20 minutes just to buffer even low-res videos. Argh, DSL! ).

@Bill Labus, I agree with you. I think providing a text version of a tutorial is a much better way to do things (why not do it in addition to the screen cast?). I get a really small download cap from my ISP (2GB per month), and I find it hard enough to make it fit a whole month of my normal web usage. If I see a video on a website, most of the times I don’t even hit the play button.

The screen cast caught my attention, and it was great to watch it. I’m in the process of redesigning my website, and I am planning to make use of CSS3 features through progressive enhancement. In my opinion, it’s the best way to make use of the latest technologies without having to wait for other browsers (if I had to wait for IE6 to be gone to use new technologies, I’d be in serious trouble).

Thanks for the great tutorial! These effects work pretty well in Midori, too, for anyone using Linux.

Can’t wait for the next part of the Codeigniter series!

Just like separation of content and presentation, one day we will be able to remove all the javascript used for design and animation and import this kind of interactivity in our stylesheets.

Thanks so much Jeffery! I have been looking into replicating the hover effect from Elliot Jay Stock’s featured works image borders and I just realized this is how he did it! A quick check of his style sheets confirms it.

I will be using a similar effect on my new portfolio site for border highlighting fades in webkit browsers. Very awesome

As for the debate on using these effects, again I recommend checking out Elliot’s site, he uses CSS3 right now but in a separate style sheet called “enrichment.css” that does just that…enhances browsers capable of utilizing the effects, it degrades gracefully though for those that do not. For people wanting cross browser solutions for these types of effects today jquery is still the way to go.

I think that the effects in css are good because i can almost guaranty it’s faster than javascript but i also think it’ll be overused by less experienced designers like the non-scrolling background images were in css2. i think a better update would be support for uncompiled sass (http://lab.hamptoncatlin.com/play/with/sass) and plugins (with some sort of javascript api and a html5 thing like ) and then you could use the plugins to add the animation

How can I download such screencasts to my hard drive ?
Thnx.

These screencasts are awesome. It’s funny how they are relaxing huh? I find them soothing, and I learn stuff too

Going to be using these in my own site I think.

I love webkit and CSS3. The only problem is that it is webkit, so it does not work in IE or Firefox, or any other browser that does not run with webkit. Though for the guys and girls with Safari and Chrome get a nice experience. For all other browsers you need Mr.jQuery!

Really great stuff. Keep up the good work!

Jeffs screencasts are relaxing couse you are not afraid that you’ll miss something or missunderstood something. Just sit, watch, listen and CODE. That’s it. Perfect job. Keep ‘em comin’!!!!!!!!!!!!!!

I don’t usually like screencasts but I’m watching this one in-between time I have. Some of these are really cool, like the transitions.

But then other have very spotty implementation, like the gradient feature. I see that one getting a major overhaul before it becomes official. The quality of the gradients are horrible. Not because of the video, but because the color quality sucked. I suppose it would take too long to render a gradient using the same quantity of colors I can in Photoshop, but by that account, it’s kind of a useless property, no?

I also don’t like how it’s used like a function. It has more parameters than I have fingers!

Thanks Jeffrey, they are relaxing and educational too! What a great mix!

Good for learning…but i’m not overly keen on using these CSS3 techniques just yet…however that might change if I was making something just for the iphone.

Great video!

Psss…all these new proposed css effects were available in IE since 5.5, and now it’s being lambasted. By no mean IE6 was good…oh it was horrible. It just that IE did something with css effects that is being over look. The moz/webkit-box-shadow, opacity, transitional links, etc. I remember the internet was much colorful back in the days as it is now.

I’ll start using CSS3, when FireFox fully supports it. It’s actually sad that they weren’t the first ones to support it.

Normally I’d say it’s normal javascript or AJAX, but knowing it’s made with CSS3 webkit, it makes you don’t believe. But I will only use it when every browser support it. Could be someday or never, but I’d rather give full experience to every visitor of a webpage than allow only some visitors have visibility to it, which means I’ll have to appeal to Ajax, everybody friend’s CSS uses and images for it. Yeah, unfortunately the page definitely will be heavier to load but it’ll be necessary.
But anyway, this screencast is awesome! Thanks!

Jeff your site r0x my s0cks .. i didnt think i would find myself among so many other fans who actually get relaxed just from watching tuts/videos but to my surprise i thought it was just me

great website.. i love the way you teach so clear and effective. I’ve gone from blog to blog most of the time I’m left with more questions than answers but with your blog site.. i get clear examples and usage of different features you present..

keep up the great work

With exception to rotation doesn’t seem like anything that’s not doable with jQuery. I think the webkit features are going to end up more of a curse then a gift… like the ol’ DX IE filters.

Great Video,

I always learn best when watching rather than reading. Monkey see monkey do!
Look forward to seeing many more videos. Great Work!

Specifically saying -webkit- in your css does not mean that it supports CSS3. It means it partially does but don’t rely on it. CSS3 is still just a dream that will not be coming true any time soon.

PLEASE do not put that -webkit- BS in your css for a production site.

great one… very informative… thanks

Some pretty awesome things there, been doing a little experimenting and some nice results, thanks!

I want everyone to say “Nettuts” out loud to themselves, and if you don’t want to punch yourself in the face after – there’s something wrong with you.

I was wondering how to implement a different trigger than :hover property for iPhone…any ideas?

I’d been even more amazed if this would work together with text-shadow and background-images, but I guess we’ll see that in the future?

Hi,

One question..

I was trying to get vertical gradient using CSS3 but no luck.

Any thought ?

With all of the talk about CSS3…has anyone thought of making a simple JS include file that perhaps provides CSS3 functionality out of the box to browsers that don’t support it?

Is that even possible?

Hey Jeff,

Great screen cast! I’m looking forward to the day I can use all of the CSS3 effects.

When you did the gradients.html file and said that you won’t get anything in Firefox my first thought was to make use of the cascading effect of CSS and just make it default to a solid color instead rather than not getting anything. So a quick edit to:

background-color: #d0d0d0;
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#d0d0d0), to(#ffffff));
seemed like a better option rather than nothing

Thanks again for the screencast. I love the Envato sites!

sucks that IE holds us back from using these

Very good, your fede css3 im use my web page.

how far along is css3 from being cross browser friendly?

Which browser is holding back css3 developmental support?

i would love to see the day when all browsers support css3 as things would be a hell of a lot easier but until then guess i’ll stick to js\jquery

Jeff you have created nearly all of my fav nettuts tutorials.

This is such a good one to be added to my list!

Thanks so much

I normally don’t vote in this kind of stuff, but I did now. This screencast was a lot of effort, thanks for doing this.

its really nice, but i seen just half of video and it don`t looks like relevant css3, thats just safari kit and for web developer useless. for me, things like gradient or shadow will be part of straight graphic work for long time

How come You have Chrome running on OSX? I was pretty sure it wasn’t released yet? Can You please shed some light on the matter?