EFFECTS - CSS: Professional Techniques for Modern Layout - page 180

h is insight is key to understanding why some sites actually take all of the icons, rounded
corners, and other bits of image-based decoration and cram them all into a single large image.
h e icons are then displayed as needed by simple use of background-position .

While this sort of thing might be overkill for your site, give your design another look. You
might i nd more use for sprites than it would i rst seem.

SLIDING DOORS
A technique i rst popularized by Doug Bowman (of the all-CSS Wired redesign fame) way
back in 2003, “Sliding Doors” is a way of creating really fancy tabs out of your text navigation
links. h e general approach is adaptable to ef ects other than tabs, however.

Figure 5-30 depicts what you want to see in the end.

Figure 5-30: The fi nal result.

Yes, you could do that with straight images, but then changing the text on the tabs becomes a
real pain, especially if there are multiple tab states. It's a lot easier to have the markup look like
this:

182

< ul class="nav">
< li> < a href="index.html">Home< / a> </ li>
< li> < a href="products.html">Products< / a> </ li>
< li> < a href="buy.html">Buy!< / a> </ li>
< li> < a href="contact.html">Contact< / a> </ li>
</ ul>

h en, if “Buy!” becomes “Checkout” or “Store,” you just have to update the text in the markup.

Okay, that's nice and all, but how about the tabs? Well, i rst you need a big image of a tab.
Really. A big image. Big like Figure 5-31.

Figure 5-31: The large tab image.