CSS Gradient Text Effect

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

read more

Spread the Word
  • Twitter
  • del.icio.us
  • Digg
  • Facebook
  • Google Bookmarks
  • Reddit
  • NewsVine
  • Slashdot
  • connotea
  • HackerNews
  • Print
  • email

0 Responses to “CSS Gradient Text Effect”


  • No Comments

Leave a Reply