A Crash-Course in Advanced CSS3 Effects
videos

A Crash-Course in Advanced CSS3 Effects

on Aug 21st 2009 with 84 comments

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:

  1. Rotation and scaling
  2. Animating elements
  3. Photoshop-style masking
  4. Image reflections
  5. Simple color fading
  6. 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.


Tags: Videos
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • kiziel

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

  • http://www.jeff-way.com Jeffrey Way
    Author

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

    • http://www.ifadey.com iFadey

      I use DownloadHelper to download all your screencasts :P

  • Vitesse

    Hey Jeffrey, what about CodeIgniter From Scratch this week?

    • http://www.jeff-way.com Jeffrey Way
      Author

      Had to delay it until early next week, due to this screencast and the birthday celebrations.

      • http://voratec.com Ashit Vora

        I saw there was one CI screen cast for PLUS subscribers. I thought no more CI screen casts for others.

  • http://danijelblog.wordpress.com/ Danijel

    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…

    • http://www.jeff-way.com Jeffrey Way
      Author

      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.

  • C.44

    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)…

    • http://www.jeff-way.com Jeffrey Way
      Author

      The iPhone fully supports these effects. If you’re doing mobile dev, you can implement any of these features.

    • http://adrusi.com/ adrusi

      IE8 has relatively good support for css, and for a version of IE it has amazing compliance to js standards

    • The CSS Gods

      imho, is easier just to say your an idiot.

  • Evan Jones

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

    • http://www.jeca.be Jcallew

      Good chance that still will take a proper amount of time…

    • http://mhuntdesign.com Matthew Hunt

      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

  • http://andrewwooldridge.com Andrew Wooldridge

    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/

  • http://thatryan.com Ryan

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

  • http://www.kiran13xtreme.co.uk Kiran

    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!

    • http://elvn.be Bram

      Here it works perfect in Chrome (2.0.172.39) on Win Vista.

      By the way nice tutorial Jeff!

      • Jake

        They all work smoothly on 3.0.195.6 ;)

        Sounds like someone needs to upgrade :p

  • http://www.fatlizardmedia.com Juan C Rois

    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.

    • http://danijelblog.wordpress.com/ Danijel

      Yeah, me too. Can’t wait for them and can’t wait till IE6 usage will be 0%…
      Man, I hate that browser… :)

  • http://adrusi.com/ adrusi

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

  • http://www.freshclickmedia.com Shane

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

  • http://www.webhostdesignpost.com/webhosting/greengeeksreview.html Cody

    Awesome post, great stuff in CSS3. -Thanks!

  • http://www.devwords.com Ben

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

    • Jeff Way

      Prolly at least two years.

  • Johnathan

    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.

  • C.44

    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.

    • C.44

      Scratch the Safari part, it apparently supports CSS3 already.

  • http://www.labusdesign.com Bill Labus

    *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! :) ).

    • Jeff Way

      That’s why we only post 1 screencast per week.

  • http://www.terraduo.com Bruno De Barros

    @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).

  • http://fwebde.com/ Eric B.

    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!

  • http://www.mad-at-teilar.gr/ fuSi0N

    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.

  • http://www.endigodesign.com(indevelopment) grimdeath

    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.

  • http://adrusi.com/ adrusi

    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

  • Nick

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

  • http://www.jeffadams.ci.uk Jeff Adams

    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.

  • http://spotdex.com David Moreen

    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!

    • Nykeri

      dude css3 works in firefox and opera(not all features though) as well

      u would need jQuery if you’re using the dreaded IE

      • Nykeri

        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

  • Tylor

    Really great stuff. Keep up the good work!

  • m

    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’!!!!!!!!!!!!!!

  • Eric

    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!

  • http://www.stephen-ainsworth.co.uk Stephen Ainsworth

    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.

  • http://www.antonagestam.se/ Anton Agestam

    Great video!

  • Beo

    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.

  • http://sinthux.deviantart.com Dalton Hurd

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

    • http://www.labusdesign.com Bill Labus

      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.

  • http://www.dsaportfolio.com.br/ Diego SA

    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!

  • joseph

    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

    • http://www.jeff-way.com Jeffrey Way
      Author

      Thank you, Joseph!

  • ElGuapo

    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.

  • http://www.crearedesign.co.uk Martyn Web

    Great Video,

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

  • http://www.isearchnotes.com Cory

    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.

    • http://mhuntdesign.com Matthew Hunt

      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.

  • http://www.timokoerber.de Timo Körber

    great one… very informative… thanks

  • http://joshboulton.co.uk Josh

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

  • James McAlphoie

    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.

  • Nicola

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

  • http://www.antonagestam.se/ Anton Agestam

    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?

  • Anton

    Hi,

    One question..

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

    Any thought ?

  • Stephan

    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?

  • http://www.quickit.net.au/ Bronson Quick

    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!

  • http://www.yourmediapc.com Dave

    sucks that IE holds us back from using these

  • http://www.marviorocha.com Marvio Rocha

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

  • Nykeri

    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

  • http://www.d-lists.co.uk AtiKuSDesign

    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

  • alex

    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.

Newer Comments →