Posted By

selfmadepsyche on 02/19/09


Tagged

css html


Versions (?)

Gradient Text Effect


 / Published in: HTML
 

  1. <h1><span></span>CSS Gradient Text</h1>
  2.  
  3. h1 {
  4. font: bold 330%/100% "Lucida Grande";
  5. position: relative;
  6. color: #464646;
  7. }
  8. h1 span {
  9. background: url(gradient.png) repeat-x;
  10. position: absolute;
  11. display: block;
  12. width: 100%;
  13. height: 31px;
  14. }
  15.  
  16. <!--[if lt IE 7]>
  17. <style>
  18. h1 span {
  19. background: none;
  20. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
  21. }
  22. </style>
  23.  
  24. <![endif]-->

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jstnjns on February 19, 2009

I'm not quite sure on what to use this for, or how to set up the gradient.png file.

Could you add some information in your description?

You need to login to post a comment.