CSS Sliding Doors
Tuesday, August 30th, 2005I 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):