Project 7. Opening the Doors to Attractive Tabs

Welcome evermore to gods and men is the self-helping man. For him all doors are flung wide: him all tongues greet, all honors crown, all eyes follow with desire.

—RALPH WALDO EMERSON

of such links would be the ones across the top of Amazon.com or the Apple web site. In fact, such collections often are made to look like small tabs, although this isn't always the case.

For some time, translating an unordered list into a row of tabs meant that they were, well, kind of boxy. Not to mention a bit boring. This was the case because the tabs were usually created by setting borders on the list items or the links themselves. That's good for a basic design, but if you want a professional look, the result is rather lacking.

So, in late 2003, Douglas Bowman (http://www.stopdesign.com/ described this technique in the article "Sliding Doors of CSS" (http://alistapart.com/articles/slidingdoors/) and followed it up with another article that dug more deeply into the technique. In this project, we'll be exploring some variants on Doug's original idea, but the core idea is all his.