Animated CSS Effects with Fallbacks

The CSS3 enables cool effects, buout browsers that don’t support themt what ab

Being the pragmatic type, Chris Mills has been exploring CSS animations mostly from more of a real-world perspective, thinking about how they can be used to create usable features on web pages. And of course, he needs to consider what happens when older browsers that don’t support these features access your pages. Sometimes you can rely on graceful degradation, but sometimes you need to deal with such browser differences in a more intelligent way.

 

To start with, let’s look at a business card that flips over with a 3D transform (with realistic dimensions sized in millimeters!). In this case, the inner wrapper is used for the sizing and positioning, and the whole design work is applied to the two front and back divs for the front and back of the card. The outer wrapper div is there to add hover and other state change effects to.
Providing alternative styles
By default, the card flip example relies on a 3D transform in order that sighted viewers are able to see both sides of the card. But this is no good for browsers that don’t support 3D transforms. To provide alternative styles to older browsers, Chris Mills will apply Modernizr to his page. Non-supporting browsers will get a class of no-csstransforms3d appended to their <head> classes, so you can provide alternative styling.

Comments

Be the first to write a comment

You must me logged in to write a comment.