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

About Daz

This is the blog of Darren Oakley
This entry was posted in snippets and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">