hocuspokus

CSS Gradient Text Effect

January 17, 2008

Found this in my feeds today - genius way of making very stylish headings without resorting to image replacement.

Do you want to create fancy headings without rendering each heading with Photoshop? 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). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

shiny-headings.gif

Comments