I had a bit of time this weekend, so I geeked out and decided to try building a page using HTML5. In the process, I discovered another way of building the navigation. It’s still using the Sliding Doors technique, but with a single image instead of overlapping two images.
The PSD I used was from a great Six Revisions tutorial. Unfortunately, I didn’t read the tutorial because I wanted to build the page on my own first. I have no regrets, but had I read the tutorial instead of coding it myself, I would have learned about the single image technique without having to do any research.
In the process of putting together my sample page of techniques, I want to credit some particularly helpful sites:
- CSS Sprites: What They Are, Why They’re Cool and How to Use Them by Chris Coyier
- Sliding Doors of CSS, Part II by Douglas Bowman
- CSS Sliding Door using only 1 image by kailoon
- How to make sexy buttons with CSS by Alex Griffioen