Trick To Create Dynamic Gradient Text With CSS And PNG
WebDesignerWall has come up with a trick that uses nothing but a little CSS and PNG to apply gradient effect onto plain HTML text. The trick involves overlaying a blank block element that contains a translucent PNG gradient on top of the regular text.
As can be seen in this demo page, it actually looks pretty good.
There are a few limitations to this, of course. One being that the gradient will have to use the same color as the text’s background. Second, the background will have to be a solid color.
Finally, it requires the PNG hack to work on IE6, which relies on JavaScript. So, if the viewer happens to have JavaScript turned off, be prepared to see some cross-browser uglyness:
All in all a novel idea, but I’m not so sure I want to risk the chance of loosing a visitor though an accidental flash of ugly design.
February 9th, 2008 at 3:13 am
Ingenious.
February 11th, 2008 at 12:32 am
Wont that make the text impossible to select because of the overlay? I guess that’s a small trade-off for a graphics-free glossy text rendering, if that’s something you need.
February 14th, 2008 at 10:50 am
Yes text will become un-selectable unless you select from the line before it up to the line after it. It’s a neat trick, but I wouldn’t use it unless extremely necessary.
March 7th, 2008 at 11:33 am
To avoid the PNG messiness due to JS being turned off, you could wrap a style of the same name but with background: none; in a noscript tag, which would overwrite the png overlay. That would fail over gracefully, just sans pretty design. The un-selectable text is the biggest downfall. Still, interesting…
May 18th, 2008 at 6:53 am
You could also use javascript to add the as they suggest. That way, if javascript is off, the user just sees regular text.
May 18th, 2008 at 6:53 am
Sorry, the comment above should say “add the ” !
May 18th, 2008 at 6:54 am
One more time, please feel free to delete the above.
You could also use javascript to add the ’span’ tags as they suggest. That way, if javascript is off, the user just sees regular text.
May 19th, 2008 at 4:37 pm
The IE6 hacks can be avoided by using 8-bit PNGs with alpha transparency. IE6 will just show the plain text.