Tuesday, October 5, 2010

Using Text-indent

With text-indent image replacement, a negative text-indent is used on the text inside the
heading element to make it move off the left edge of the screen, effectively placing it out of
view.
CSS is then used to put a background image inside the h1, which means that your heading
can adopt any design you like.
Why is a negative text-indent necessary? We could just declare the properties that display
the background image:
h1 {
height: 43px;
background-image: url(images/title_snow.gif);
background-repeat: no-repeat;
}
But the HTML text of the heading would still be visible,

There is, however, one disadvantage of text-indent image replacement. If the image doesn’t
display, there’ll be a meaningless gap in the page, as shown in Figure 1.8. This means that
users who may have CSS turned on but images turned off—or even users who are just
waiting for the image to download—won’t see any alternative text, so they’ll have no idea
what the heading is.

No comments:

Post a Comment