Inverted Sliding Doors Tabs
A few days ago 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 netrelations.se (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:
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.
Subscribe / follow
- Director, Technical Solutions at Cramer (Norwood, MA, Ma, US)
- Web Developer at Blue Chip Marketing Worldwide (Northbrook, IL, Il, US)
- (re)define our guts: FarmersWeb seeking Lead Web Engineer at FarmersWeb, LLC (New York, NY, Ne, US)
- Dev Ops Engineer @ General Things at The Sourcery (San Francisco, CA, Ca, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost