Image Replacement CSS Techniques
(Page 1 of 4 )
Image replacement is a useful approach for solving certain web design problems. In this first article of a series that examines this technique, we take a closer look at an image replacement approach that relies on assigning a large negative value to the “text-indent” CSS property to hide the text wrapped by a web page element, thus unmasking its background image.
This is not breaking news, but one of the most frustrating issues that web designers have had to face is the limited number of fonts they can use on a web site, which must be rendered consistently across different browsers. The problem has been the subject of heated debates, and remains surrounded by a halo of controversy.
Leaving behind the troubled waters of the topic, which by the way are out of the scope of this article, web designers have needed to find a solution that allows them to use their preferred fonts without having to rely on the always- uncontrolled terrain of browser settings. And they did it, quite successfully. As you may know, in the last few years different image replacement approaches (IR) have emerged, and today are used widely (although not always wisely) on thousands of websites and web applications.
For the normal designer, IR is nothing but a technique that uses CSS to hide text wrapped by different web page elements, such as headers, links and so forth, with an image. This is it. The beauty of using these IR techniques is that they allow you to win a battle on two fronts: on one hand, target elements will preserve their semantic meaning within the web page’s markup, while on the other, a variety of fonts can be used independently of the browser configuration, as they’re embedded into the image in question.
These benefits, though, come at a cost. The major drawback of IR is less accessibility, particularly for those who use screen readers. Despite this trade-off, which should always be evaluated consciously, IR techniques do deserve a closer look. In the lines to come I’m going to discuss the most relevant ones, so you can choose the one that best suits your needs and preferences.
Now, it’s time to get rid of the preliminaries and start exploring the real power behind using CSS-based image replacement. Let’s get going!
Next: Basic web page for image replacement >>
More Style Sheets Articles
More By Alejandro Gervasio
