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
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+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
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
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?
You can download the developer beta version.
@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.