Do you want to create fancy headings using pure CSS and no Photoshop? Then here is a cool method to create Gradient Headings.
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.
The HTML markups
{code type=css}
CSS Gradient Text
{/code}
The CSS
The key point here is:p {position: relative} and p span {position: absolute}
{code type=css}
p {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
p span {
background: url(texteffect.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
{/code}
To start with, Use text color in p tag. And then use the background effect in p span tag.When these two combine it gives the Gradient Text Effect.
LIMITATIONS
- 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.
TO 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 It is IE7
{code type=css}
{/code}
Here are some examples for Gradient Text Effect.
GRADIENT SHINE
GRADIENT DARK SHINE
GRADIENT STRIPE
GRADIENT DARK STRIPE
For more information, you can refer:webdesignerwall.com
This entry was posted on Tuesday, May 4th, 2010 at 12:36 am and is filed under CSS Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
December 3rd, 2010 at 2:06 am
…Good web site, thank you a good deal for that amazing posts!…
December 16th, 2010 at 9:37 pm
…Thanks! it’s useful to me!…
January 3rd, 2011 at 4:12 am
Great information! I found this inceedingly helpful and an interesting read. Photography, Graphics & Technology is in no way boring.
January 4th, 2011 at 10:50 pm
Superb words! I found this blog inceedingly helpful and an interesting read. Photography is in no way uninteresting. :]April 19th, 2011 at 10:05 am
It was certainly interesting for me to read the article. Thank you for it. I like such themes and anything connected to them. I definitely want to read more soon.May 16th, 2011 at 7:29 pm
It is extremely interesting for me to read that article. Thanx for it. I like such themes and anything connected to this matter. I would like to read more soon.August 28th, 2011 at 10:42 pm
Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed browsing your blog posts.,August 29th, 2011 at 11:47 am
Well writtenAugust 31st, 2011 at 7:01 am
Fantastic web site. A lot of useful information here. I am sending it to several pals ans additionally sharing in delicious. And obviously, thanks to your sweat!September 1st, 2011 at 10:36 pm
I’ve learned a lot from your blog here,Keep on going,I will keep an eye on itDecember 14th, 2011 at 3:19 pm
ping site…[...]CSS Gradient Text Effect | Cogzidel Templates Blog[...]…
February 12th, 2013 at 10:08 am
Women in waders Calendar 2013…CSS Gradient Text Effect | Cogzidel Templates Blog…