Love the web

Love the web is a design, programming, and usability blog

Cross-browser Drop-shadow Text 6 comments

Reg Sime 05 Feb 2009

Cast your mind back to your primary school projects. Remember how you loved putting drop-shadows on all your headings? Well, these dynamic effects are no longer the sole domain of Crayola-wielding 9 year olds. With a little HTML, CSS, and a dash of JS you too can earn double Brownie points from Mrs McKee.

Here I'm coding a menu with the shadows on the list-items.

drop shadow text

Let's begin with the HTML

<ul class='menu'>
	<li>
		<a href='/' title='Homepage'>
			<span>Homepage</span>
		</a>
	</li>
	<li>
		<a href='/about-us' title='About us'>
			<span>About us</span>
		</a>
	</li>
	<li>
		<a href='/contact-us' title='Contact us'>
			<span>Contact us</span>
		</a>
	</li>
</ul>

No rocket science there. But notice the 'title' attribute matches the content itself.

Now for the CSS

We're going to use the :before pseudo-element to create the shadow text, and absolute positioning to overlay the normal text.

ul.menu { background-color: #777; } li span { position: absolute; top: 0; } li a { position: relative; display: block; color: #fff; } ul.menu li a:before { display:block; padding: 1px; content: attr(title); color: #000; }


Specify your fore- and back-ground colours here. And the padding above determines the shadow distance.

Hats off to Stuart Robertson from Guelph (hoo hoo) for this.

Then we want to hide the shadows on hover to give the appearance of being pressed down.

li:hover a:before {color: #777;} li a span:hover {color: #fff;}

Well, that's all hunky-dory for the majority of CSS2 compliant browsers. Safari, Firefox and Chrome all play nicely. Hmm… what's missing from that list?

D'oh! Internet Explorer

Fortunately  IE already has the ability to display drop-shadows via a built-in filter.

In your IE6 and 7 stylesheets* whack the following code.

ul.menu li span { position: relative; display: inline-block; filter: Shadow(Color=#000000, Direction=125, Strength=1); } /* hide shadow on hover */ ul.menu li.hover span { filter: Shadow(Color=#777777, Direction=125, Strength=0); cursor: pointer; color: #000; }

Remember to edit your colours as well as the shadow angle and distance.

Notice the '.hover' class I've attached to the <li> above. IE doesn't detect hover events on list-items, so we're going to append this class using Javascript. Following are two options for achieving the same result.

Javascript Hover

Option 1: jQuery

If you've never used jQuery before let me encourage you to give it a whirl. The markup is relatively straightforward and well documented. Simply download the latest release and link to it from your HTML document <head>, eg. <script type='text/javascript' src='jquery.js'></script>

There are no shortage of tutorials on how to achieve effects with jQuery, so forgive me for just cutting to the chase here. To add a class of 'hover' to said list-item we can now use the following JS:

$(document).ready(function(){ $("ul.menu li").hover( function() { $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); } ) });

The downside to using jQuery is the relatively large file size. The upside comes when you want to add multiple dynamic behaviours to your website without spending hours on coding.

Option 2: Whatever:hover

If you're not up to implementing jQuery for whatever reason you could instead employ Peter Nederlof's Whatever:hover
As per jQuery this is as easy as linking to the script file in the <head> of your document. Then we can state which elements we want to add the 'hover' class to in our IE stylesheet:

ul.menu li {behavior: url('csshover3.htc');}

That's it! Now go forth and drop-shadow the web for me and Mrs McKee.

* Note: your IE stylesheets can be specified in your <head> by using Microsoft's conditional statements:
<!--[if IE 7]><link rel='stylesheet' type='text/css' href='/ie7.css' media='all' /><![endif]-->
<!--[if lte IE 6]><link rel='stylesheet' type='text/css' href='/ie6.css' media='all' /></style><![endif]-->

 

Read the next post - Sliding Doors Submit Buttons

Subscribe to these comments

6 comments submit a comment

14 Jul 2009

Daniel Pickering

Hi Reg,

Remember me from good old Energy Intellect? ;) I'm working as a web dev for Momentum Studios now, an interactive design/video/3d company.

Thanks, this drop shadow stuff is great!
It works in all major browsers except IE8- I think filter: has changed.... bah

But there's an easy fix, simply put the following tag in the head. This forces IE8 into compatibility mode and the shadow works.

Cheers,
Daniel

14 Jul 2009

Daniel Pickering

Whoops, helps if I put the tag in :P

14 Jul 2009

Daniel Pickering

Arggh, your comment system stripped it out:

meta http-equiv="X-UA-Compatible" content="IE=7" /

just imagine the greater and less than signs are there ;)

28 Nov 2009

Richard Grevers

Even simpler, everyone except IE now supports the CSS2 and CSS3 9but dropped from 2.1) property text-shadow.

.menu a:link, .menu a:visited {
text-shadow: #000 1px 1px 1px;}

.menu a:active, .menu a:hover {
text-shadow: #777 0 0 }

The third distance value is blur.

Also, cufón font replacement implements text-shadow on IE - but it doesn't support blur at all.

See you at Webstock10!

08 Apr 2011

Patrick Arden McNally

I Love the Drop shadow, but how do I implement it if I don't want to do it in an a tag? Just normal text like a span or a div?

Thank you =)

11 Apr 2011

Reg Sime

@Patrick, glad you like them.

Richard Grevers’ post above should answer most of your question. CSS text shadows have been well supported by modern browsers for some time. The text-shadow property spec is here: http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows

So, span {text-shadow: 3px 4px 5px red;} will give you a red shadow offset 3px to the right, 4px down, and blurred with a 5px radius.

However, if you'll still need to leverage the shadow filter mentioned in the article for IE's 6-7.

And finally, for IE8 you simply add an "-ms-" prefix to the filter declaration, eg.
span {
-ms-filter: Shadow(Color=#000000,
Direction=125,
Strength=1);
}

Submit a comment

Do not fill in this field (bot protection)

Submit comment

Love the web posts

Code

Design

General

Usability