Wed. July 8, 9:20:59 AM
Very interisting effect!
I see it works with Safari and Firefox MAC. What about Windows and IE? With Safari I have some strange behavior when selecting text.
How To Create CSS Text/Font Gradients With CSS
Recent Articles:
- Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
- Tracking Internal Website Campaigns With Google Analytics and PHP
- Everything You Need to Know About jQuery's .data() Method
- Google vs. China: How It Will Affect Web Workers
- Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
Subscribe To Feed
Subscribers
Subscribers
Jul 01
Something that CSS is currently lacking is the ability to add gradients to our text blocks. Currently we can add drop shadows to text or change the color of it but not add gradients. I suspect that in the coming years this will be a new property but until then here is a method to do it.
HTML Setup
The HTML Setup is pretty simple. Just place an empty SPAN element inside your heading element:
<h3><span></span>Text Here</h3>
Using JQuery to Automatically Insert SPAN Elements
I think a few people might find the above code unsightly, so here's a method to leave the empty SPAN element out of your HTML and inject it via JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h3").prepend("<span></span>")
});
</script>
CSS Setup
The most important part of this code is setting the H3 element's position to relative. I'd also recommend setting the line-height to the same height as the font-size used and also reseting the margins back to zero.
h3
{
font-size: 25px;
line-height: 25px;
margin: 0px;
position: relative;
}
Next, we position the empty SPAN element absolute and give it a height and width. Using this SPAN we can overlay various background-images over the H3 element.
h3 span
{
display: block;
height: 26px;
position: absolute;
width: 100%;
}
Gradient Effect
The first effect I'll demonstrate is a simple gradient. To do this we use a simple white to transparent gradient image and set it as the SPAN element's background-image. We can then position the background-image higher or lower depending on how strong we want the effect to be.
h3 span { background: url(gradient-white.png) repeat-x left 0px; }
In the example above, the black transparent area represents the SPAN while the black border represents the bounds of the H3 element.
Demo
When viewing the demo, take your cursor and select the gradient text. This will give you a good understanding of how the gradient works -
Gradient Effect With Hover
We can also apply a color change on hover with our gradient. Since the color change happens on the layer behind the gradient there is no additional CSS we must do other than change the H3's color when hovered.
h3 span { background: url(gradient-white.png) repeat-x left 0px; }
h3:hover { color: #990000; }
Two Tone Effect
Another effect we can do is apply a two toned text color to our text. To do this we use a white rectangle with it's opacity lowered and then position it over our H3.
h3 span { background: url(dual-white.png) repeat-x left 0px; }
Sliding Door Effect
Finally, my last effect uses JQuery to create an animation when the text is hovered. Using a little JQuery we can slide the SPAN's background-image up and down when hovered on giving it sort of a 'garage door' effect.
<script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/backgroundPosition/jquery.backgroundPosition.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h3 span").hover(
function () {
$(this).stop().animate({backgroundPosition: "(0px -27px)"}, 400);
},
function () {
$(this).stop().animate({backgroundPosition: "(0px 0px)"}, 400);
}
);
});
</script>
Got any other effects that could be accomplished using a background-image? Share them below!
Replies:
-
Thu. May 6, 3:37:48 PM
An interesting idea, but I see an issue with this idea: If the text you are adding the gradient effect to is on top of a non solid background your gradient will show up on that background. Also, the last example demo doesn't work.
Cool idea though!
-
Sat. July 31, 1:06:58 PM