Webkit is one of the few – if only – browser engines that really embraces advanced CSS3 effects. Unfortunately, this presents somewhat of a double-edged sword. We get to play with all of these amazing effects – such as CSS masks, reflections, transitions, animations, scaling, etc. – yet, we can’t truly implement them into our projects until more browsers provide support. With all of that said, it’s important to be on the cutting edge of what’s possible.
In today’s video tutorial, we’ll review a bunch of different neat effects that can be used in Safari 4, Chrome, and for all iPhone development.
What You’ll Learn:
- Rotation and scaling
- Animating elements
- Photoshop-style masking
- Image reflections
- Simple color fading
- Simple transitions
The Screencast
Remember – these effects currently only work in Safari 4, Chrome, and on the iPhone. Does that make it impractical to review such things? I don’t think so.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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. :)
I use DownloadHelper to download all your screencasts :P
Hey Jeffrey, what about CodeIgniter From Scratch this week?
Had to delay it until early next week, due to this screencast and the birthday celebrations.
I saw there was one CI screen cast for PLUS subscribers. I thought no more CI screen casts for others.
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…
Isn’t it funny how they’re relaxing? I know just what you mean. I feel the same way about the Lynda.com, CSS Tricks, and jQuery for Designers screentuts.
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)…
The iPhone fully supports these effects. If you’re doing mobile dev, you can implement any of these features.
IE8 has relatively good support for css, and for a version of IE it has amazing compliance to js standards
imho, is easier just to say your an idiot.
God I love this site. When do you think CSS3 will be supported by FF and IE7+?
Good chance that still will take a proper amount of time…
IE7 and 8 is pretty much locked-in as far as I know, don’t count on it. if we are lucky we may see rounded corners in IE9 lol. My guess is that MS wants to keep their market share, but it may not mean another browser so soon. There’s an article here, but that’s about it for now. http://www.internetnews.com/software/article.php/3819521
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!
Here it works perfect in Chrome (2.0.172.39) on Win Vista.
By the way nice tutorial Jeff!
They all work smoothly on 3.0.195.6 ;)
Sounds like someone needs to upgrade :p
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.
Yeah, me too. Can’t wait for them and can’t wait till IE6 usage will be 0%…
Man, I hate that browser… :)
how did you get chrome on a mac!!!???
http://www.google.com/chrome/intl/en/eula_dev.html?dl=mac
Hey Jeff Thx for the link
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?
Prolly at least two years.
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.
Scratch the Safari part, it apparently supports CSS3 already.
*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! :) ).
That’s why we only post 1 screencast per week.
@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!
dude css3 works in firefox and opera(not all features though) as well
u would need jQuery if you’re using the dreaded IE
my bad my bad mad that comment b4 watchin the screencast, ff doesnt do that
anyway those effects are really sweet and easier than writing up some js or 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. :(
Firefox is overrated. It only looks good because it’s most often compared to Internet Explorer (which isn’t much of a compliment), but as a browser alone, it falls far behind Safari in feature support, reliability, and speed.
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 :P
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
Thank you, Joseph!
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.
I think the post is title ‘CSS3 Effects’ partially for the SEO of this article, and to generate interest.
The truth is, -moz and -webkit- properties are NOT CSS3. However properties like box-shadow in css3 have their specific browser counterparts like -moz-box-shadow and -webkit-box-shadow.
Depending on what site you are working on, it may be beneficial to use these properties to provide a better look and feel. Then browsers like IE simply do not look as good.
It’s not BS buddy, these are properties that will one day work in a future version of IE, given that the IE team implements CSS3 properties. It’s important to keep up with these things for any front-end developer or web designer.
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));
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.