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.

New Browsers Bring New Bugs And New Tools

Creating a site for yourself has always been a refreshing outlet for web builders. Without rooms of stakeholders, you alone have the control over which technologies to use, what features to include and what browsers to support. Part of that control is deciding how you are going to deal with browser bugs and often having the freedom to take the ‘high road’ and leave defects be so that they can be used for bug reporting, test cases, and to help prod browser vendors into maybe making those bugs a higher priority.

While I have no desire to work around them for my personal site, I think its worth it to point out and work to get these bugs fixed at the source, including the following 2 CSS bugs with visible on the new Place Name Here that I decided to let be — one in Microsoft Internet Explorer 8 beta 2 and the other in Google Chrome.

White Space bug in IE8b2

In a few places on this site I have a “compact” formatted list of items such as various skills or tag listings. The last round of the site had these lists as well. To make them compact I have set the LI element to display:inline so they to follow each other horizontally. In addition, to make them easier to read and maintain some integrity of each item or phrase they also have white-space set to “nowrap”. This created the desired behavior where a line only wrapped in between list items across browsers including IE7, but not in IE8b2. There it also applies the whitespace rules to the gaps in between each LI and creates one long non-breaking line. Test Case
. Screenshot:

screenshot of whitespace bug in IE8b2

Opacity Bug in Google Chrome

Most JavaScript frameworks like jQuery which I’ve used on PNH come with transition or animation libraries built in or as plugins. Everyone seems to love their slowly expanding layers or blinking colors behind content changes, fading in and fading out transitions. I’m no exception and if you’ve found the site’s poorly hidden easter egg you’ve seen some of them used.

Chrome, while the animation and timing is smooth and comparable to other browsers, shows a problem with rendering the antialiased portions of type when the type is partially transparent such as it is in the middle of the fad in transition. This is not something I’ve seen in its close WebKit relative, Safari, so I’ll make the assumption that the issue is somewhere on the platform or application specific side of the fence. Test Case. Screenshot:

screenshot of opacity bug in Chrome

Reporting bugs in these new browsers

Both of these bugs have been reported to the browser vendors. And it was far easier then the old days of signing up for a bugzilla account and hoping you get the right category and don’t have a duplicate entry — or just passing an unstructured note somewhere into the email black hole. With the increased competition in the browser marketplace there has been some quiet advances in bug reporting tools. Both Google Chrome and Microsoft IE8 offer simple bug reporting tools that include the ability to pass along site URLs and automatically take a screenshot of the active web page to get sent when submitting the bug report report.

Google Chrome

Instructions on reporting a bug or broken website in Chrome

Browser crash... go boom

Internet Explorer 8 Beta

Download the Report a Webpage Problem Internet Explorer 8.0 Beta Add-On

On DOM Inspecting

I’ve gushed here numerous times about the Mozilla / Firefox DOM Inspector tool and how the insights it provides into the way the page is parsed and rendered by Gecko are indispensable when building a web site. What I haven’t spent nearly enough time doing is gushing about similar tools in other browsers—specifically Internet Explorer and Safari.

Safari Web Inspector

Safari, err, WebKit nightly builds have had a DOM Inspector tool of their own since January, Web Inspector, announced in this post. The tool really holds up well to its older counterpart listing node information, all individual and combined style rules, highlighting the active element in the browser window and more. It also has some interesting new features—two shown here—identifying what style properties have been ignored or overridden by another rule and a ‘metrics’ view which shows the box, padding and margin dimensions of any given element.

Screenshot of Web Inspector - Ignored rules

Screenshot of Web Inspector - Metrics

The only feature I find that I miss from the other tool is the ability to change CSS properties on the fly, but its an easy one to work around.

IE Developer Toolbar

What did I do before this thing? Seriously.

Screenshot of IE Developer Toolbar

Its kind of a mix between toolbar and inspector with common items like outlines and validation tools, but the key feature is certainly the ‘View DOM’ window. Again, the features are in line with the other available tools, you can walk the DOM tree, inspect properties, change attributes of individual nodes and see important information like ‘hasLayout’ values right along side the CSS properties. But there seems to be one big missing piece that I find getting caught up on regularly when working on complex sites—no view of individual CSS rules, only combined rules—this can make trying to trace values through different style sheets (and sometimes IE only ones) still a bit hit or miss on complex sites.

Don’t let that prevent you from installing it, even without that key-to-me feature it still is a tool that has saved me countless hours since I’ve installed it. You can grab the IE Developer Toolbar here for IE6 and IE7 and read up on it here.

Friday Link Wrapup

Because I’ve been so quiet around these parts lately here’s a big ole list of links for the web builder in you!