CSS Gradient Text Effect

Tagged:  

Over at Web Designer Wall they have posted a good tutorial on creating a gradient header using CSS. The technique is based on an empty span tag a PNG and the position:absolute CSS property (the technique is 100% CSS, no JavaScript or Flash). Compatible tested browsers include Firefox, Opera, Safari and Internet Explorer.

Below is an excerpt from the tutorial:

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

screenshot

The HTML markups

<h1><span></span>CSS Gradient Text</h1>

The CSS

The key point here is: h1 { position: relative } and h1 span { position: absolute }

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag):

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty <span> tag in the heading, you can use Javascript to prepend the <span> tag. Here is a sample using jQuery prepend method:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");

});
</script>

You can view the demo here or download it here. To read the full tutorial click here.

If you make any cool headers using this technique I would love to hear about them. You can either leave them in the comments or blog about them at this blog once you create a free account.

wow, its really great. Thanks for sharing with us.

I'm going to give this one a try, Thanks!

Search Engine Optimization

It is really excellent, I'm already using this css text gradients in my site.

it's good but i will try it to work in firefox or not

if you have an other link the link of downloaded files not work

thank you,
--------------------------------

?????
????? ?????
??????

ok it's work now thank you
---------------------------------
?????
????? ?????
??????

it's not working in firefox
apper error

-------------------------------------
?????
????? ?????
??????

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.