Transform Your Site With CSS 3

Scott Gilbertson — Wed, 26 Jan 2011 16:20:53 +0000

CSS 3 transforms in action

Our friends at TypeKit, the custom web fonts service, have posted a nice CSS tutorial from web developer Andy Clarke. Clarke walks you through the basics of how to use CSS 3′s new two-dimensional transform properties.

CSS transforms allow you to rotate images, create a mirror effect without adding extra images or add some scaling mouse events to your pages. With rules like scale() rotate() and translate(), CSS 3 can do what was once only possible with JavaScript. The final result of Clarke’s tutorial may be a bit too close to Apple’s Coverflow visuals to just cut-and-paste, but the step-by-step walkthrough makes it simple to tweak the look to your liking.

In addition to the transform rules, the tutorial makes use of the oft-overlooked, but very powerful, nth-of-type(n) selector to avoid cluttering the markup with extraneous ids.

Best of all, thanks to widespread support in modern browsers and a little JavaScript help for older browsers, the example code in TypeKit’s walkthrough works in just about every web browser. That said, perhaps the best advice in the tutorial is this gem:

No two browsers are the same, so to make the most from emerging technologies such as HTML5 and CSS3, we need to banish the notion that websites should look and be experienced exactly the same in every browser. We should design around browser differences instead of hacking around them.

See Also:

Slick Web Design Gets Easier Thanks to CSS 3’s Transform Tools

Scott Gilbertson — Tue, 15 Dec 2009 13:38:12 +0000

Now that modern browsers are stepping up with better support for CSS 3, web designers have even more powerful transforms to play with. Page elements can be animated, rotated or otherwise transformed in ways that previously weren’t possible, or at least required complex JavaScript.

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.

The other possibility would be to include some JavaScript for less-capable browsers, but that defeats much of the purpose of CSS 3 — making complex transforms quick and simple.

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.

See Also:

Webmonkey » transform

Transform Your Site With CSS 3

Slick Web Design Gets Easier Thanks to CSS 3’s Transform Tools