Sliding Doors of CSS, part II
A follow-up to the popular “Sliding Doors of CSS” (Part I, published at A List Apart) which fills in a few gaps of missing information, and covers additions and variations on the technique introduced in the original article. (Translated into: French I, French II, Italian, Russian)
A little over a week ago, in an article for ALA titled Sliding Doors of CSS, I introduced a new technique for layering background images with CSS. We walked through an example of how it could be used to create visually appealing tabs while keeping simple, text-based, semantic markup. We intentionally limited the scope of what the article covered so that it could remain focused on explaining and demonstrating the technique.
With an understanding of the technique firmly in grasp, now we can push it further. ALA just published Sliding Doors of CSS, Part II, which expands on what we covered the first article (Part I). Specifically, Part II addresses:
- Scenarios where no tab is highlighted
- Combination with Pixy’s single-image no-preload rollover
- A fix for IE/Win’s limited clickable region
- An alternate method for targeting the current tab
- Additional notes and uses for the technique
Part II fills in some gaps and expands on the utility and behavior of the original technique. If you haven’t yet read Part I, I highly recommend you do so before reading Part II. Again, instead of opening up comments here, I’ll direct any feedback you might have to the discussion on Part II already open at ALA.