New Design Tools and New Styles with CSS3

By David Karlins and Doug Sahlin from Building Websites All-in-One For Dummies, 3rd Edition

CSS3 makes graphical effects cheaper and easier to create, faster to download on web pages, and more accessible in all kinds of environments and search engines.

For example, the skewed text (and enclosing skewed text box) in the following is not a graphic; it’s text that you can copy, and it’s indexed (or put into a database) by search engines, can be read out loud if speech software is installed in a browser or operating system, and does not have to download into a page.

Judiciously employed, animation and interactivity with CSS3 can bring a page to life, adding dynamism and energy. But like any design technique, CSS3 effects and transforms can be overdone. The point is this: Just because effects and transforms are now easy to create without any software, that doesn’t mean you should load your pages with gratuitous effects.

The skewed box and circle here can grab the eye and provide formatting treatment previously available only as a graphic image or Flash.

Here are the two basic techniques for animating and making CSS3 effects interactive:

Using pseudo-classes: One technique relies on associating CSS3 effects and transforms with CSS pseudo-classes. A hovered link represents the simplest form of CSS interactivity with an effect like underlining or causing a background color to appear when a link is hovered over.
Combining CSS3 with JavaScript: A technique for managing interactivity and animation with CSS3 styles (or any other styles) is combining CSS3 with JavaScript.