Textured Text

This is a little complicated, but it can really add visual interest to a text element (especially a heading). The technique involves layering an empty span element (linked to a horizontally tiled background image) over your text. You will need an image of the texture that you wish to show through your text. The image needs to be: There are a couple of limitations to using this effect: This technique is most often used to create a subtle gradient effect on a heading. Here's how it works:
First set up your element in your html. You will need to include an additional empty nested span element. 
<h1>CSS Gradient Effect<span></span></h1>
Next, style the heading however you like, but make sure that you set position property to relative. 
h1 {
   font-size:300%;
   color:#0079b6; /* blue */
   font-weight:normal;
   letter-spacing:-.05em;
   margin:.6em 0;
   position:relative;
   }
Now style the span element. Put the transparent png as a background image for the element (repeating horizontally) and set position property to absolute so it can go above the text. 
h1 span{
   position:absolute;
   display:block;
   top:0;
   left:0;
   height:100%;
   width:100%;
   background:url(../images/gradient_1.png) repeat-x;
  }
Graphically, it looks like this: screenshot

And this is the result:

CSS Gradient Effect

Although most of the examples I've seen use this technique to create a gradient texture, you can use any image you think would be effective. Are you feeling patriotic…

STARS

AND

STRIPES

Previous Next