Adding A Dynamic Gradient To Your Titles

Today, we will be following the experimental vain of think for this weeks tutorial. Last week I showed you how to create a rollover animation without creating an animated flash. Now, I will be showing you how to create a gradient overlay on your header and title text.

To begin, we need to set up our image. Start by making an image 2 pixels wide and 31 pixels tall with a transparent background. Fill the image with black and set the fill to 0% in photoshop, then add a white to transparent gradient. Set the starting opacity to 70% and the ending to 20%. Name the file what you like. I chose GTitle.png as an example. When you save this file, make sure to save it as a PNG with a 24 bit depth for the best look.

Now that we have the image set up, we need to create the CSS so the HTML understands what to do with the image. So here is how we would set the CSS coding up.

*This is these are basic settings for your font.

h1 {
font: bold "Lucida Grande";
font-size:52px;
position: relative;
color: #464646;
}

* This is the section that will overlay your text. Notice the background is set to repeat to the x corrodinate or left to right. This will insure that as long as the text is on a single line, your text will have the style overlay. Finally we have the width set up so it will always be the length of your h1 tag.

h1 span {
background: url(GTitle.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Now that we have our CSS coded and ready to go, let’s set up the HTML. The site CSS gives the HTML coding all the information it needs to properly display the design as intended.

*The empty span tag serves as a placeholder for the image to be displayed.

<h1><span></span>Hello World.</h1>

With the CSS and HTML coded properly let’s see the final outcome.

h1 {font: bold “Lucida Grande”;font-size:52px;position: relative;color: #464646;}
h1 span {background: url(http://images.ientrymail.com/nowcss/GTitle.png) repeat-x;position: absolute;display: block;width: 100%;height: 31px;}

Hello World.

Pretty nice. The idea behind this CSS is to give your site a more dynamic look without having to create an image for every new title. There are some keys issues you should be aware of PNG are not friendly with IE6 and there is CSS coding to force PNGs to display properly in that browser. This is why most designers dislike IE6. Lastly, your gradient needs to be created with the site background in mind. In other words, the color of your gradient needs to match your background.

Leave a comment