Comparison of CSS gradient text effects

Do you want to create a title text with a gradient without using photoshop? Here, we will use a simple css technique to show you how to use only css and png images to make this effect. this method is suitable for most mainstream browsers. of course, IE6 needs a Hack that supports transparent PNG (Fortunately, Microsoft is trying to automatically upgrade IE6 to IE7 ^. ^, Read more: Warning: An IE7 Auto-Update Is Coming Soon)

Advantages

This is a pure css technique. It does not use any ja script or flash and can work normally in most browsers (IE6 needs to support transparent PNG hack)
This is the perfect title design, and you don't have to use photoshop, which will greatly save your bandwidth and time.
You can use this effect on any webpage font, And the font size is variable.
How does he work?

This technique is simple. We simply use a 1 px wide transparent png to overwrite the text.

Html

CSS Gradient Text

CSS

The key is here:

H1 {position: relative}
H1 span {position: absolute} h1 {
Font: bold 330%/100% "Lucida Grande ";
Position: relative;
Color: #464646;
}
H1 span {
Background: url(gradient.png) repeat-x;
Position: absolute;
Display: block;
Width: 100%;
Height: 31px;
}

In this way, you have done it. Click here to view the example.

Enable IE6

The following hack only allows IE6 to support images in transparent PNG-24 format.

<! -- [If lt IE 7]>
<Style>
H1 span {
Background: none;
Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'gradient.png ', sizingMethod = 'Scale ');
}
</Style>
<! [Endif]->

JQuery version

If you do not want to use the <span> tag in the code, you can use javascript to dynamically generate it. Here is a simple jquery production method.

<Script type = "text/javascript" src = "jquery. js" src = "jquery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
// Prepend span tag to H1
$ ("H1"). prepend ("<span> </span> ");
});
</Script>
DEMO package download