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; }
SPAN Element Overlay

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 -

View Demo >>

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

View Demo >>

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

View Demo >>

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>

View Demo >>

Got any other effects that could be accomplished using a background-image? Share them below!