Sliding Doors of CSS
A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2’s current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use.
One of those cases is tabbed navigation. It’s time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites. You’re most likely aware that CSS can be used to tame a plain unordered list. Maybe you’ve even seen lists styled as tabs, looking something like this:
![[Ordinary example of CSS-based tabs, using flat colors and squared-off corners.]](http://www.alistapart.com/d/slidingdoors/tabex1.gif){kind=small}
What if we could take the exact same markup from the tabs above, and turn them into something like this:
![[Stylized tabs using rounded corners and subtle three-dimensional shading.]](http://www.alistapart.com/d/slidingdoors/tabex2.gif){kind=small}
With simple styling, we can.
Read more...