Indenting H2 Elements as a CSS Image Replacement Technique
(Page 1 of 4 )
In this second part of a six-part series on image replacement techniques, I demonstrate how to use the technique you learned in the previous part on all of the H2 headers contained in a sample web document. This technique is fairly straightforward, so you shouldn’t have any major problems using it within your own web pages.
Image replacement (IR) is a set of straightforward methodologies that allows you to hide from view the text wrapped by a web page element, while revealing its background image. Based mostly on the functionality brought by CSS (even when Flash and JavaScript are used in some cases with the same purpose), IR lets web designers build eye-catching text-based elements, such as HTML headers, lists and links, without messing significantly with the structural markup with tags that have no real semantic meaning within the context of a web document.
Since most IR techniques rely heavily on the power of CSS to perform the corresponding replacement process, it's easy to use them with relative confidence, as they’re entirely independent of whether or not scripting is enabled in the client. There is a decent variety of IR approaches that can be implemented easily nowadays; each of them has its own pros and cons, especially when it comes to potential accessibility issues.
Many of these concepts should already be familiar to you if you read the first part of this series. In that tutorial, I explained in detail how to build more attractive H1 HTML elements by using the IR technique developed originally by Mike Rundle. This technique bases its functionality on simply assigning a huge negative value to the “text-indent” CSS property of the element being styled, in this way hiding its text from display, while its background image remains visible.
Quite possibly, the most significant pitfall of this technique is that if the pertinent background image isn’t downloaded by the browser, the selected web page element will become inaccessible. On the other hand, the positive side of Mike Rundle’s approach is that it requires no additional markup and it’s very easy to implement with multiple web page elements.
Based on the versatility offered by this technique, in this second article of the series I’ll be demonstrating how to use it to give a more pleasant appearance to all of the H2 headers contained on a web page.
Ready to learn how this will be done? Then start reading the next section!
Next: Review: image replacement with an H1 header >>
More Style Sheets Articles
More By Alejandro Gervasio
