CSS gradient text Effects of two methods comparison _ Experience Exchange

Do you want to create a title with a gradient without Photoshop? Here's a simple CSS trick to show you how to use CSS and PNG images only to create this effect. This method is tested for most mainstream browsers. Of course, IE6 needs a hack that supports transparent PNG (thankfully, 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 a pure CSS trick that doesn't use any JA script or flash, and it works on most browsers (IE6 need 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 does he work?

The trick is simple. We simply used the 1px wide transparent PNG overlay on the text.



Html


CSS Gradient Text

Css

The key is right 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 the example.

Enabling it to support IE6

The following hack is just a picture that allows IE6 to support 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 Build Version

If you don't want to have an empty <span> tag in your 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