Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

New Design Tools and New Styles with CSS3

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.

image0.jpg

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.

image1.jpg

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.

blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!