CSS gradient text Effect of two methods comparison _ Experience Exchange

Do you want to use Photoshop to create a text with a gradient heading? Here's a simple CSS trick to show you how to create this effect using only CSS and PNG images. This method has been tested to fit most mainstream browsers. Of course, IE6 needs a hack that supports transparent PNG (fortunately Microsoft is trying to automatically upgrade the user's IE6 to ie7^.^, extended reading: Warning:an IE7 auto-update is Coming Soon)

Advantage

This is purely CSS tricks, does not use any JA script or flash, and it works correctly on 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 save you a lot of bandwidth and time.
You can use this effect on any page font, and the font size is variable.
How did he work?

This technique is simple. We simply use a 1px wide transparent PNG overlay on the text.



Html


CSS Gradient Text

Css

Here's the key:

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 is just a picture that lets IE6 support transparent PNG-24 format.