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
← Older Comments
  • drullo

    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

  • http://www.softlares.com Wojtek

    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?

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

      You can download the developer beta version. :)

  • http://kennedysgarage.com Kennedy

    @JW

    Photoshop hint: Instead of cropping the heart (@29:28) to remove extra space, you can simply trim it. All you have to do is go to Image > Trim and this will remove any extra white space around your image.

    Thanks for the quick run down of some great CSS3.

  • http://www.baagdi.com/ baagdi web developer in chandigarh

    wow! its great

  • Kawsar Ahmad

    nice tutorial :)
    can anyone give a link to download it please!!!

  • n8

    What about firefox 4 and ie9?

  • http://www.stuff4you.biz Dan

    one of the web developer tutorials I’ve ever watched.

    • Ultroman

      Great review XD

  • http://www.brettwidmann.com Brett Widmann

    Very nice tutorail. Everything worked great.

  • http://www.pratibhadesign.com chetan

    good tetorial….thanks..

  • http://www.virtuallabz.com/ Web Development Chandigarh

    Awesome! Cool stuff. But i doubt, how many people actually use the latest browsers with CSS3 ability.

← Older Comments