Well, you don’t need to be a Photoshop pro to create glossy text that seems very trendy today (Web 2.0 styles? hmm).

css gradient effect

Here is a simple CSS trick to show you 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: Firefox, Safari, Opera, and even Internet Explorer 6 (with a small CSS hack).

The code looks like this:

<h1><span></span>Just Talk About Web</h1>

Use the CSS to define styling of the H1. Make sure that you set position property to relative;.

1
2
3
4
5
6
7
8

 
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.

1
2
3
4
5
6
7
8

 
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.

1
2
3
4
5
6
7

<!--[if lt IE 7]>
	h1 span {
	  background: none;
	  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient-glossy.png', sizingMethod='scale');
	}
 
<![endif]-->

Now, see what we have:

CSS Glossy Text

Look cool? Please note that you can use any text color you want and you can vary gradient effect as long your gradient color is the same as your background color.

View demo here and download demo files here.


Free Website Magazine: Know more than your competitors with Website Magazine

Don't forget to subscribe so you don't miss out on future posts!


Related Posts