Archive for August, 2005

CSS Sliding Doors

Tuesday, August 30th, 2005

I love browsing “A List Apart” (http://www.alistapart.com). It’s a great site devoted to doing beautiful and practical things for websites in accessible and standards-compliant ways.

Wandering through the site tonight, I just came across this old (2003) article on creating great-looking, resizable navigation tabs using CSS and background images:

http://www.alistapart.com/articles/slidingdoors/

The examples are gorgeous. While viewing each one, try resizing the text in your browser (Ctl + and Ctl - in Firefox, “View | Text Size” in IE):

http://www.alistapart.com/d/slidingdoors/v1/v1.html

http://www.alistapart.com/d/slidingdoors/v2/v2.html

http://www.alistapart.com/d/slidingdoors/v3/v3.html

In a browser that supports stylesheet switching, you can even switch between all three styles on the same page (”View | Page Style” in Firefox):

http://www.alistapart.com/d/slidingdoors/final_tabs.html