Recipe 2.24. Adding a Graphic Treatment to HTML Text


Problem

You want to apply a repeating graphic treatment on top of HTML text, such as worn edges or the stripes in Figure 2-40.

Figure 2-40. A striped image repeats over HTML text


Solution

Place a span element between after the opening tag of a heading element, but before the HTML text:

<h2><span></span>Designing Instant Gratification</h2>

Next, use a version of the Gilder/Levin image replacement technique (see Recipe 3.9) to place a GIF file with seamless pattern over the HTML text:

h2 {  font:3em/1em Times, serif;  font-weight: bold;  margin:0;  position: relative;  overflow: hidden;  float: left; } h2 span {  position: absolute;  width: 100%;  height: 5em;  background: url(striped.gif); } p {  clear: left; }

Discussion

The text within the heading element is set to float to the left. This technique is to allow the background image, placed in the span element, to be placed over the HTML text through absolute positioning.

Normally, when floating an element the heading would move to the left and have the content wrap on the right side. However, the clear property placed on the paragraph stops this from happening.

The height property is set to 5em and overflow property is set to a value of hidden to keep the background image from spilling out of the heading element and onto the other portions of the web document.

See Also

The Gilder/Levin image replacement technique page at http://www.mezzoblue.com/tests/revised-image-replacement/#gilderlevin; read more about the technique at http://www.khmerang.com/index.php?p=95.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net