Css implements text gradient

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.

 

The code is as follows:	Copy code
<H1> <span> </span> CSS Gradient Text CSS

The key is here:

The code is as follows:	Copy code
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.

The code is as follows:	Copy code
<! -- [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.

The code is as follows:	Copy code
<Script type = "text/javascript" src = "jquery. js" mce_src = "jquery. js"> </script> <Script type = "text/javascript"> $ (Document). ready (function (){ // Prepend span tag to H1 $ ("H1"). prepend ("<span> </span> "); }); </Script>