Pure CSS box-shadow for IE 7/8

For my photo portfolio website I was searching for an easy way to add flexible shadows to boxes on my website. There are several techniques to achieve this via images, but most of the times these techniques not very flexible.

Luckily the upcoming CSS3 standard has a new feature called box-shadow. Which works well in the latest versions of Chrome/Safari and Firefox. But as usual – the Internet Explorer does not recognize this. But well, this time you can’t blame MS for this, the CSS3 specifications are not yet completely finished.

Nevertheless I searched for a way to get box shadows in IE 7 and 8 too. And I found it – CSS only. No Javascript or server-side code required.

On Chris Blog I read about a way to create these kind of shadows in IE using filters. Awesome!

This is a good start. But there were some drawbacks. Chris CSS code used fixed widths and actually the result does not look as great as a CSS3 box shadow.

I made some minor adjustments and tried to create a nearly pixel-perfect alternative to box-shadow. Here is my result:

This is exactly the same result in Chrome, Firefox and Internet Explorer 6 and 7. Here is how i made it:

HTML Structure

Well we need some extra elements in HTML to be able to add a shadow in IE, but well. Not much of them. So here is how the box should look like:

<div class="ShadowBox">
    <div class="IEShadow"></div>
    <div class="Inner">
        This is a shadowed box <br/>
        This is a shadowed box <br/>
        This is a shadowed box <br/>
        This is a shadowed box <br/>
        This is a shadowed box <br/>
        This is a shadowed box <br/>
    </div>
</div>

CSS Code

/* CSS 3 Browser? Use CSS3 box-shadow */
.ShadowBox {
    position: relative;

    /* CSS 3 Browser? Use CSS3 box-shadow */
    box-shadow: ${offset}px ${offset}px ${radius}px ${shadowcolor};
    -webkit-box-shadow: ${offset}px ${offset}px ${radius}px ${shadowcolor};
    -moz-box-shadow: ${offset}px ${offset}px ${radius}px ${shadowcolor};
}

.ShadowBox .Inner {
    position: relative;

    padding: 1em;
    background: #FFFFFF;
}

/* setup div for IE shadow */
.ShadowBox .IEShadow {
    // place behind the .Inner div
    position: absolute;
    z-index: -1;
    zoom: 1;

    // cover all the box area and add offset
    top: -${radius-offset}px;
    left: -${radius-offset}px;
    bottom: ${radius-offset}px;
    right: ${radius-offset}px;

    // use the shadow color as background
    background: ${shadowcolor};

    // And blur it. Yep, two times. This results in the original box-shadow look - yeah!
    filter:
        progid:DXImageTransform.Microsoft.Blur(pixelRadius=${radius/2})
        progid:DXImageTransform.Microsoft.Blur(pixelRadius=${radius/2});
}

Don’t get confused by the ${…} syntax. I left these values to show you how how to select the right values to get near-pixel-perfect look in IE and in Firefox. Webkit has a bit harder shadows than FF, but the difference is not very big.

Example

I created a little example how to get pure CSS box shadows for the IE.

CSS on Crack

BTW! Im working on an preprocessor for CSS. I wrote a makro for this shadow technique which allows me to insert the above code snippet into my CSS code with a single property.

.ShadowBox {
    // container-shadow: radius offset color;
    generic-box-shadow: 20 10 #000000;

    .Inner {
        padding: 1em;
        background: #FFFFFF;
    }
}

If this sounds interesting drop me a comment I may write some more about it an publish a test version. This above example was created with this preprocessor.