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.

Benefits

* This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
* It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
* You can use on any web fonts and the font size remains scalable.

How does this work?

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

The HTML markups

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

CSS Gradient Text

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;
}

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 tag):

<!--[if lt IE 7]>

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

<strong>jQuery prepend version (for semantic lovers)</strong>

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:

[code lang="html"]<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>

< ![endif]-->[/code]

Demo: http://www.webdesignerwall.com/demo/css-gradient-text/
Download: http://www.webdesignerwall.com/file/css-gradient-demo.zip
Source: http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

Related Listings:

1. CSS Text Gradients – Quick Stylish Headings Text Gradient is a simple css trick that allows you...
2. Gradient : jQuery Plugin It allows you to define a gradient fill and have...
3. Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery This is a simple jQuery tutorial, but can be extremely...
4. jQuery Gradient Plugin Adds a dynamically created configurable gradient to the background of...
5. Simple Double Quotes Script This CSS tutorial will show you how to display two...

Do you like this post?

Email: