I got this post from http://justtalkaboutweb.com/2008/02/04/css-web-20-glossy-text/ and I feel you may put this too to good news. I’ve tried it and it’s a sure winner.
How to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash)?
Just put an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick works on most browsers like Firefox, Safari, Opera and give some hacks to make it IE6-usable.
The Code
<h1><span></span>Just Talk About Web</h1>
Use the CSS to define styling of the H1.
h1 {/* optional styling, you can use whatever you wish */font: bold 300%/100% “Lucida Grande”;color: #000;
/* now, this is important */
position:relative;}
Now the gradient: we put a transparent PNG as a background image for the span element and set position property to absolute so it can go above the text.
h1 span, h2 span {background: url(gradient-glossy.png) repeat-x;position: absolute;display: block;
width: 100%;
height:27px;
}
Unfortunately, not all browsers support PNG transparency (IE6, for example). So for those browsers, please include this as well.
<!–[if lt IE 7]>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient-glossy.png’, sizingMethod=’scale’);
}<![endif]–>
Our finished product!
Tags: Go Glossy!
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Dejar un comentario