Comparison of two methods for CSS gradient text effects_Experience exchange

Want to create a gradient title text without using photoshop? Here is a simple css trick to show you how to use only css and png Pictures to create this effect. After testing, this method is suitable for most mainstream browsers. Of course, IE6 requires a Hack that supports transparent PNG (Fortunately, Microsoft is working hard to automatically upgrade users' IE6 to IE7^.^, Extended reading: Warning: An IE7 Auto-Update Is Coming Soon)

Advantages

This is a pure css technique, without using any ja script or flash, and it can be used in most browsers to work properly (IE6 requires a hack that supports transparent PNG)
This is the perfect header design, you don't have to use photoshop, which will save you a lot of bandwidth and time.
You can use this effect with any web font , and the font size is also variable.
How does it work?

This technique is very simple. We just use it simply A 1px wide transparent png is overlaid on 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;
}

That’s it, you did it ^_^ Click here to see an example.

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