Add grunge effect to text using simple CSS
When I first saw CSS text gradient effect I asked myself how this trick can be used to create some more effects. Actually, there are an infinite number of effects you can create - the limit is your imagination. In this short tutorial you will see how to add grunge effect to your text using just CSS and one image.
Step 1: Create a transparent PNG image
You can use Gimp or Photoshop and some of the free brushes:
Experiment with the brushes and color, but keep in mind that the color you use must match the color of your background. The image we are going to use in this example looks like this:
So, we are going to make a grunge effect on a black background.
Step 2: Create simple CSS
Now we are going to add grunge effect on H1 element. In order to make this work we need a little trick: place an empty span tag inside each H1 element. Be sure to add it after the text like in the example below.
<h1>This is one very long title with grunge effect<span></span></h1>
Now the CSS magic. We are going to use absolute positioning inside relative positioning (I mentioned this in my article How to create web application user interface that looks like Outlook several weeks ago). So, we are going to place absolutely positioned span element inside the relatively positioned H1 element. That way a grunge image that is actually a background image of span element will make an overlay on H1 element.
h1 {
position:relative;
color:#aeef33;
font-family: Georgia;
}
h1 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url('grunge.png');
}
And viola! This is the result:
Download the example See it live
Step 3: Experiment
Try to find some interesting brushes or patterns which you can use to create a different effects. For more information about CSS text effects, read the following articles:
More articles in
Blog archive or
elsewhere