Slick Web Design Gets Easier Thanks to CSS 3’s Transform Tools
Of course, browser support is still somewhat limited in “the real world,” so it’ll be some time before you can begin using them heavily in your daily work. But if you’d like to jumpstart your understanding of CSS 3, the 24 Ways blog has a nice tutorial on manipulating images using CSS 3′s transform properties.
The article tackles mainly WebKit-based transforms, though if you’re using nightly builds of Firefox 3.7, the
-moz-transform code will work as well.
Obviously, Internet Explorer won’t be able to render any of these CSS rules, so you’ll want to make sure the effects degrade for browsers that don’t understand CSS 3. For example, the first demo in the tutorial simply rotates an image and applies a drop shadow. Browsers that don’t understand the CSS would simply display the image without the rotation or shadow — not ideal, but workable.
Another point worth mentioning is that the
box-shadow rule has actually been dropped from the CSS 3 spec due to time constraints. Most likely it will be resurrected as
drop-shadow, or something similar, but the change is still in the discussion stage so you might want to hold off using
box-shadow for now.
Be sure to dig around the rest of the 24 Ways site, which is a bit like an advent calendar for web designers. We’ve featured 24 Ways tutorials in the past and, so far, this year’s offering look to be every bit as useful as those from years past.