Journal

Cross-browser drop shadows using pure CSS

Look ma, no images!

There's an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. Do websites need to look exactly the same in every browser?

One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly. All of this begins to degrade page performance, when really the drop shadow is merely a secondary design flourish.

CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow. Hurrah!

Here's an example page and the result across major browsers:

Figure 1. CSS drop shadows rendered in major browsers
Figure 1. CSS drop shadows rendered in major browsers

Disadvantages

Advantages

Update (19 July 2009, 17:47)

Figure 2. A cleaner IE6 version
Figure 2. A cleaner IE6 version

As ZigPress points out in the comments the IE representation is still rather ugly.

By removing the Glow filter and using Shadow filters in its place, and reducing the weight of the shadow, we approach something more forgiving in Internet Explorer using the following CSS:

div {
    filter: 
        progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
        progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
        progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
        progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
}

Comments

Federico

▪

Good article Nick, but… In real world it is difficult to explain to client how it is supposed their site will change in different browsers.

By the way, It could be use in prototype’s site or admin panels.

Cheers, Federico

Andy Pearson

▪

Woah! Great looking example, this is certainly an interesting technique.

I am heading more and more towards progressive enhancement in my designs, providing IE6 is getting something good, I’m no longer paranoid about it being “perfect” and am instead letting my hair down in compliant browsers by taking advantage of all the new CSS3 goodness.

This is another great tool for the toolbox though, thanks!

Andrew Nesbitt

▪

I couldn’t agree more, as long as the design isn’t centered around drop shadows I’m all for graceful degredation (or progressive enhancement), it saves both development time and page weight/speed.

I’m starting to do the same with rounded corners using border-radius as well, now that firefox 3.5 is out.

ZigPress

▪

It’s too ugly in IE for me to use in real-world projects - those hard edges… but a great proof of concept nonetheless.

Nick

▪

Thanks for your comments gents. Granted, it doesn’t look as good and you’ll always have to make a call as to whether you can get away with it. On a white background perhaps the differences are too stark.

However on two recent projects every content block had a drop shadow on either a very dark or textured background. On this occasion this method could have been used since the effect is so subtle. At the time we went with PNGs.

I’m also beginning to use border-radius on content blocks and buttons, but these are far more obvious when not present in IE and so can’t always get away with it when a client has already signed-off a design.

@ZigPress — the ugliness is mostly due to the offset and the 90-degree angle bottom left. Since you can define the direction of the shadow, I could ditch the Glow completely and use four Shadows. See update above :-)

Federico

▪

You are right when you say that this effect can be used in dark background.

Very nice work and symphony implementation too.

Ryan

▪

Too bad box-shadow has been removed from the CSS3 spec for further discussion. Opera is planning to add it in presto 2.3 but may remove it now that it’s not in the spec.

Andy

▪

Ryan, do you have a link about the removal?

ZigPress

▪

Hey Nick, that’s a big improvement in IE6… well done for finding a solution.

Ryan

▪

It’s in the working draft spec http://www.w3.org/TR/css3-background/#the-box-shadow

This is the potential new specification for adding shadows to elements, much more precise http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html

Josh

▪

Very nice setup. Easy to use and looks great in moz and webkit browsers. I’m still counting down the days when every browser has webkit included!

Jeroen

▪

I tried your method but fonts become too harsh (no antialiasing) with this filter in IE8. Too bad, since it’s a nice technique. Well, back to Firefox… :)

Markus

▪

I really like the new soft version for IE, made my day - thanks a lot for sharing :)

STB

▪

Nice tip for IE6. Thank’s for tutorial… very helpful.

Sammie

▪

Here is another crossbrowser-idea. Instead shadow-filter with blur-filter for IE.

div.shadow
{
    zoom: 1; /* hasLayout-Push for IE6 */
    width: 300px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    -vendor-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=4,MakeShadow=true,ShadowOpacity=0.35);
    background: #000000;
}

div.content
{
    background: #eee;
    padding: 20px;
    position: relative;
    font-weight: bold;
}

Make two divs. First a container with class=”shadow” and inside this div another div with class=”content”.

IE-Screenshot: http://img297.imageshack.us/img297/2565/iedropshadow.jpg

Fotomontage

▪

Very impressive one. Nick, but let me tell you in our cases, the clients are looking much more into the design and effects of the web design. The pay much less attention to the cross browser presentations, as they know there they have much less control.

raph

▪

I suppose I have came up with a better solution layout-wise, check this out:

http://dndworld.com/fonteblog/tutorials/boxshadow/03.html

http://fontedecodigo.blogspot.com/2010/05/como-fazer-caixas-sombreadas-passo-3.html (portuguese tutorial)

With your help, I suppose I will make CNN.com webdevelopers embarassed, heh… They use a much more time-consuming solution:

http://edition.cnn.com/

Thanks for the great article! raph

Derek

▪

Thanks for this - very useful for drop-down menus.

A solution for Opera would be really, really great as well!

Glenn

▪

IE6 and 7 apply the shadow to captions within tables:-(

If you use drop-shadows on tables, you’ll find that IE6 & 7 also apply drop shadows to captions. You need captions for accessibility and general good practice.

Annoyingly, I can’t get the filter to stop being applied to captions. Creating an override style for captions yields nothing as IE6 messes up the font (looks as it’s added an outline!) and IE7 just will not stop adding the shadow even if a new filter’s added (which it just gets rendered in addition to the other filter).

Why oh why oh why do we endlessly have problems with Microsoft….. must..control…fist…of…death

jakewestern

▪

Is there anyway to have a drop shadow for firefox?

Share your thoughts