Jan 17
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.
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>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?
Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).
Pattern / Texture
You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!
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.
Free TxEff Component Giveaways Vintage Web Design
Comments
Pages: 36 35 34 33 32 31 30 29 28 27 26 … 1 » Show All
There are 357 comments (+Add)
Pages: 36 35 34 33 32 31 30 29 28 27 26 … 1 » Show All
Loading ...
357 hamid http://www.prizebondlucky.com
August 27th, 2010 at 9:35 am
http://www.prizebondlucky.com see my site nd enjoy
356 Dorian Muthig http://www.dorianmuthig.com
August 25th, 2010 at 12:51 am
That sure looks nice, but the text will no longer be selectable, because a floating object is covering it. Also, the behavior for the already closed tag is wrong, as it should not extend accross the parent object. As such, it is a bad idea to do that. Using the proprietary filters filter: progid:DXImageTransform.Microsoft.gradient (IE) or attributes -moz-linear-gradient and -webkit-gradient (Gecko/WebKit) is a far better solution as it may also save on HTTP requests.
355 Rusdimori http://rusdimori.webs.com
August 18th, 2010 at 3:31 am
Woow.. You are cool…
..
Beautiful text.!
Thx for posting..
..
354 Mo7mD.ZaYOnA http://www.tiraq.com/vb
August 15th, 2010 at 12:20 am
not work with me
353 imran http://fdfdfdf
August 6th, 2010 at 5:20 am
This is very beautiful idea!!!!
352 aiva http://melyanao06.student.ipb.ac.id
July 23rd, 2010 at 9:15 am
thanks for posting such an interesting study..
351 TV apps http://www.yamgo.com/
July 11th, 2010 at 10:15 am
Thanks for a very useful tips!!
350 Progs4u http://www.progs4u.net
July 6th, 2010 at 11:05 pm
Thank you so much ..
You are very cool
349 حسافه http://www.hsafh.net/
June 16th, 2010 at 1:34 pm
Nice ..!!
thanks Man ..
^^
348 Phil Doughty
June 12th, 2010 at 3:53 pm
Nice effect -
If the screen was stretched/enlarged
and the text stretched also with it would the
image do the same?
or would there be BIG TEXT with a small image?