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).
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>
Figure 5.2. The end result. ...
Get Smashing CSS: Professional Techniques for Modern Layout now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
