Inverted Sliding Doors Tabs

A few days ago in Flexible box with custom corners and borders I promised to write about something that isn’t about different ways of styling boxes with CSS. To keep that promise (well, almost–dropshadows are used in this demo), I’ve written an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of (my colleague Tobias Nilsson did the design). By inverted tabs I mean that they are bottom-aligned, and as text size is increased, more and more of the tabs will be revealed from the top down, instead of from the bottom up as in the original Sliding Doors technique.

Here’s a screenshot of the tabs:

Inverted Sliding Doors Tabs

The tabs being inverted, or upside down, and the dropshadow cast by the header image prevented me from using the original technique without modifying it.

The changes are explained on the Inverted Sliding Doors Tabs demo page.

Posted on June 28, 2004 in CSS