O'Reilly logo

Smashing CSS: Professional Techniques for Modern Layout by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 5. EFFECTS

IT'S NICE TO be able to change colors and fonts, of course, but everyone craves more—sparkle, pizzazz, a bit of the old razzle-dazzle. It might be a bit over-broad to lump all these things together as "effects," but the scope here is so broad that it was hard to do anything else. In this chapter you see how to round corners, break out of boxes, fake distortion filters, slide images into tabs, create parallax, and much more.

COMPLEXSPIRAL

This one's an oldie but a goldie, if I do say so myself (and I do). This is what's known as the "complexspiral demo," because that's what I called it when I created it back in 2001. Even though its primary use case has been eclipsed by translucent PNGs and RGBa colors, there's still some life left in the old battle-axe.

To make this one work, you need a minimum of two background images (see Figure 5-1).

The two images to be used.

Figure 5.1. The two images to be used.

Then you're going to assign one to the body background, and one to the background of a div that contains most of the page's content (see Figure 5-2). Here's the CSS and skeleton HTML.

body {background: white url(shell.jpg) top left no-repeat fixed;}
div#main {background: white url(shell-rippled.jpg) top left no-repeat fixed;}

<body>
    <div id="main">
    (...content...)
</div>
</body>
The end result.

Figure 5.2. The end result. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required