Jan 17

Tagged in: , Comments:Add

CSS Gradient Text Effect

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.

View Demos

Download Demo ZIP

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.

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>

More samples

Want to make Web 2.0 glossy text?

screenshot

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

screenshot

Limitations and more…

  • This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
  • IE PNG hack is required if you want it to work on IE 6.
  • If your gradient image is taller than the heading, the text will not be selectable.

Delicious Stumbleupon Digg

Free TxEff Component Giveaways Vintage Web Design

Comments

Pages: 20 19 18 17 16 15 14 13 12 11 101 » Show All

There are 194 comments (+Add)

  • 194 Karl Hardisty http://mothership.co.nz/blog

    The power of CSS coming to the fore, at last. Some very good examples here; even more so when one takes into account that they work in Internet Explorer.

    Thank you for the collection - very educational.

  • 193 Affordable Web Design http://www.alfredfox.com

    Oh how wonderful this tutorial is, lol! Great stuff, you can bet yourself I’ll put this to good use. Is this compatible across browsers?

  • 192 Web 2 Development http://www.gigaturn.com/web-2-development.htm

    Awesome tricks on this site, this is also part of web 2, sharing your knowledge…:)

  • 191 soccer picks http://www.asian-picks.com

    Wonderful effect! I’ll defentiely put this on good use. Thanks for sharing

  • 190 örnekleri dersleri http://javascript-dersi.blogspot.com

    HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

  • 189 Web 2.0 Expertise http://gigaturn.com/web-2-development.htm

    Great Articles on site, it will help to create web 2.0 layouts.

  • 188 John http://none

    you forgot to mention the div on top of the text that sources the background image

  • 187 John http://none

    this css doesnt work in IE / Netscape browsers

  • 186 e devlet http://www.siberdevlet.blogcu.com

    css background examples , Properties , Attribute - - css-lessons.ucoz.com/background-css-examples.htm

  • 185 Ilias

    Thanks , Nice tutorial

Pages: 20 19 18 17 16 15 14 13 12 11 101 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

ad Flash CS3 Components from Flashloaded
Speed up your Flash development with easy to use Flash Components: Menus, Slideshows, FLV Player & more!
Flashmint Download Flash Templates
Next generation of Flash Templates. XML, CMS, Video.

Back to top