Advertisement

A Crash-Course in Advanced CSS3 Effects

by

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.


Advertisement