CSS3 Box Shadow in Internet Explorer [Blur-Shadow]

For a recent project I was given the task of creating a lightbox style help dialog. The dialog was intended to highlight content of an odd or unknown size in addition to the more controlled information box. Essentially a figure in the shape of 2 adjacent rectangles of variable sizes that needed to be highlighted. The backbreaker — the 8 sided popup needed a large, opaque & diffuse drop shadow to make it stand out off the content.

This was the perfect use case for CSS box-shadow, but its also a public facing promotional site that for good reasons couldn’t just thumb its nose atMicrosoft Internet Explorer. The value proposition for any new CSS property – to make things like shadows and gradients easy to develop and manage with one rule replacing old complex solutions – is lost if you still have to code for that old complex solution juggling multiple PNG images and layering in added markup. Still, that work sounded painful to write for IE6, IE7 & IE8 as well as Firefox, Safari and Chrome so I started looking for an alternative in the proprietary MS filters which are supported in Internet Explorer 5.5 and up.

Testing Through the MS Filters

All examples have been posted in this companion document.

Drop Shadow

drop-shadow example

filter:progid:DXImageTransform.Microsoft.DropShadow(color='#000000',offX='20',offY='20');

Drop Shadow is not really what you’d hope it was. This filter draws a copy of the original block and shifts and colors it based on the designated parameters. Unfortunately while the “drop” part works as expected there isn’t much control over the “shadow” and you’re left with quite a hard copy of the original. While it may be useful in limited cases its not a wholesale replacement for box-shadow.

Shadow

shadow example

filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20');

Shadow creates a gradient that isn’t so much of a shadow against another plane as it is an extrusion or motion trail behind the target element. Possibly interesting amidst an animation, but there isn’t a standard CSS equivalent so again it has limited uses.

Blur

blur example

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');

Blur is one of those filters that makes you wonder why they exist. It does exactly what it says and directly blurs the content of the block it is applied to making the content unreadable. I imagine it was implemented with the idea that it could be a scripted part of a transition [e.g. blurring an image in a slideshow] but as a static style its something to avoid. Or maybe it could be exploited…

The Cross Browser Solution

From experimentation I saw that while Blur is applied to the target content directly and would never work as is its parameters and appearance most closely resembled the control we have with CSS box-shadow. So how do we make “blur” apply to a “shadow”? We blur a duplicate of the target layer, position it behind the target and then “drop” the position of it as desired. Pay attention to the offset of the blurred layer as IE will include the edge of the blur as the top and left of the block.

<style type="text/css">
.example5wrap {
    position: relative;
    height: 100px;
}
.example5 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    -moz-box-shadow: rgba(0,0,0,0.50) 20px 20px 50px 5px;
    -webkit-box-shadow: rgba(0,0,0,0.50) 20px 20px 50px;
    box-shadow: rgba(0,0,0,0.50) 20px 20px 50px 5px;
 }
.ie-shadow {
    display: none; /* don't show in non-ie browsers */
}
</style>
<!--[if IE]>
<style type="text/css">
.ie-shadow {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 102px; /* match target width */
    height: 102px; /* match target height */
    z-index: 1;
    background: #000;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}
</style>
<![endif]-->

solution in Firefox 3.5 and Internet Explorer 8

I’m sure there’s some way to calculate the Blur parameters to match the appearance of css3 property, but in this case I just eyeballed the IE numbers. Additionally,the extra div that that the blur filter is applied to can easily be scripted to be added in IE only and added to the DOM and styled to match the target object. Doing this in jQuery would look something like the following:

if ($.browser.msie) {
    var $elm = $(".target");
    var pos = $(elm).position();
    $elm.after("<div class='ie-shadow'></div>");
    $(".ie-shadow").width($(elm).width()).height($(elm).height()).css("left", (pos.left + 5) + "px").css("top",(pos.top + 5) + "px");
}

Conclusion

I’m not the first person to come up with this method of creating a box-shadow. Some searching the internets revealed a few similar setups and even an older javascript library to automate things, but I was unhappy with the explanation of the problem or basis for the code I found. There are certainly some limitations to this method. First browsers as recent as Firefox 3.0 will not see either solution so you should. Second, as you’ve can see positioning and z-index is used to overlap content and that may limit your layout options. Ultimately its another good tool to have in your arsenal along with standard ‘flat’ background images as well as more complex PNG based solutions. In the end that’s what we do as web developers — collect these little tools and tricks and whip them out when they best fit the project.

This is one article of 52 I’ll be writing in year 2010 on web design, technology, photography and probably some other topics. Please let me know what you think of the project and the topics covered.

28 thoughts on “CSS3 Box Shadow in Internet Explorer [Blur-Shadow]

  1. I figured out a way to best estimate the box-shadow property using this method.

    PixelRadius = (-box-shadow blur radius) / 2
    .ie-shadow’s left attribute = (.target’s left offset) – PixelRadius + (-box-shadow x offset)
    .ie-shadow’s top attribute = (.target’s top offset) – PixelRadius + (-box-shadow y offset)
    ShadowOpacity = (opacity of -box-shadow)

    This gets you something that looks almost exactly the same.

  2. I found two interesting pieces of code on the web…

    The first looks like a variation of the jQuery Box Shadow plugin. It was originally part of the jQuery UI package, then it was spun off into a (now deprecated) jQuery Enchant library. A copy of the code can be viewed at http://dev.jquery.com/browser/trunk/fx/current/fx.shadow.js?rev=3827. What I found interesting was the use of IE-only CSS expressions to make sure the drop shadow was always absolutely positioned at the correct place on the page.

    The second uses VML and IE behaviors to generate the drop shadow, and also supports rounded corners (http://code.google.com/p/box-shadow/). However, the author says there are some limitations with the VML that I know already have work-arounds (see the DD_roundies library). I’m curious if this could be extended a little more.

  3. Pingback: CSS3 – What a beginner web designer must know. | Capability , .

  4. Excellent! Been looking for a way to do this in IE for a long time, thanks for working this out!

    It’s a shame IE can’t just support these CSS properties without all this extra work.

    Many thanks

  5. Pingback: How to beat Internet Explorer bugs with Chrome Frame « Cybertramp Web Design

  6. Thanks :) You saved my day! Been looking for a fix for excactly this in IE as it works fine in FF and others with box shadow in css3.

  7. The shadow will be displayed at a different location when the resolution is changed using Ctrl+. I know this not an issue, but some clients fail to understand this. Any solution possible?

  8. > Blur is one of those filters that makes you wonder why they exist.

    It’s quite obvious that the blurring was there for blurring some content that the user would only see if he logged in or something, like a nice big subscriber only photo. :-P

  9. I have a very basic question. I have an external style sheet so I’m not sure where this part goes:

    .ie-shadow {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 102px; /* match target width */
    height: 102px; /* match target height */
    z-index: 1;
    background: #000;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=’15′, MakeShadow=’true’, ShadowOpacity=’0.40′);
    }

    Aslo, do I have to create more than one div for the box that gets the shadow? Because of the blurring of box content? It would be good if I could see the html for this. I am a print designer who has recently immersed myself in css and html. God help me.
    Thanks

  10. .shadow2{
    box-shadow: 7px 7px 8px #000;
    -webkit-box-shadow: 7px 7px 8px #818181;
    -moz-box-shadow: 7px 7px 8px #818181;
    filter:progid:DXImageTransform.Microsoft.Blur(color=’#000000′,PixelRadius=’4′, MakeShadow=’false’, ShadowOpacity=’0.40′);

    }

    I am using this but the blur effect is coming on the text which i dont want so what should I do

  11. Thanks for this.
    I tried this approach and found problems with the margins shadows create and input form elements. They don’t adjust correctly when you’re surrounding forms (or divs forms are in) with a box shadow. Real bummer. Just an FYI for folks.
    Not sure why I didn’t post a long time ago after I used this

    I borrowed the idea and did a page curl effect. It’s certainly not perfect and doesn’t stretch in width very well. But I’ve made good use of it on a few sites…
    http://forrst.com/posts/Cross_Browser_CSS_Page_Curl_Shadow-DHs

    Thanks again!

  12. You can emulate shadow effect in IE copy this file http://fetchak.com/ie-css3/ie-css3.htc in the root directory and add this line in the css element which you want it has the shadow:

    behavior: url(ie-css3.htc);

    For example:

    #box{
    box-shadow: 0px 0px 30px #000;
    behavior: url(ie-css3.htc);
    }

    /*Tested in IE8, Firefox, chrome and Safari working successfully*/

  13. Pingback: Techniques for Responsive Images & Creative CSS Properties | CSS Tips

  14. ibnu: The original post above was written 3 years ago. At that time the browser landscape was quite different — IE9 had not yet been released, and now we have both IE9 and IE10. I cannot tell you the correct answer to whether you should go to these measures outlined for *your* site and audience, but I will say, that with an effect like box-shadow that often does not have an impact on usability or legibility of a site’s content *I* would probably decide not go through these extremes unless the IE8 population was abnormally high (corporate or educational clients, worldwide audience, etc).

  15. Pingback: Modern CSS Layouts, Part 2: The Essential Techniques | Smashing Coding

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>