A Crash-Course in Advanced CSS3 Effects
videos

A Crash-Course in Advanced CSS3 Effects

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
Add Comment

Discussion 83 Comments

Comment Page 2 of 2 1 2
  1. drullo says:

    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

  2. Wojtek says:

    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?

  3. Kennedy says:

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

  4. Kawsar Ahmad says:

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

  5. n8 says:

    What about firefox 4 and ie9?

  6. Dan says:

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

  7. Very nice tutorail. Everything worked great.

  8. chetan says:

    good tetorial….thanks..

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

Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.