Open House: Archives

For my first post, I'm going to talk about drop shadows. Drop shadows are something designers love and developers hate. A well placed drop shadow can really add some depth to a design, but they are notoriously difficult to implement. The CSS3 box-shadow property has been promising easy to use drop shadows for years, and although Firefox and Safari have had experimental support for a while and Opera 10.5 just added support, Internet Explorer doesn't have a similar implementation.

The box-shadow property was removed from the Background and Borders module late last year but recently reappeared in a new draft. If the module reaches the recommendation stage soon enough, we may actually see an implementation in Internet Explorer 9 when it is released (Mozilla and Apple might be throwing vendor prefixes around like saltwater taffy at a local parade, but Microsoft is much more hesitant to implement experimental properties before they are official recommendations).

Regardless of whether Internet Explorer 9 implements box-shadow, Internet Explorer 7 & 8 are going to stick around for a while, and we don't want them to feel naked while everyone else gets to wrap up in a nice, new, cozy drop shadow. I'm going to share an easy solution I've been using to implement drop shadows which doesn't require images, Javascript, or hair pulling and only necessitates a slight compromise of your standards.

Since it's supposedly spring, we're going to start with a colorful lilac box in the hopes someone simply forgot to inform mother nature of the season change.

<div class="my-box"></div>

Awesome. I think it's starting to look more spring-like outside already. Now let's apply a grassy drop shadow with the following line of CSS3.

.my-box {
  box-shadow:4px 4px 3px rgba(50,180,50,0.5); }

That didn't work for you either? I guess it turns out CSS3 isn't quite so idyllic yet. Let's add some vendor prefixes and see if that helps out.

.my-box {
  -webkit-box-shadow:4px 4px 3px rgba(50,180,50,0.5);
  -moz-box-shadow:4px 4px 3px rgba(50,180,50,0.5); }

Bring on the warm weather! Those three rules are all it takes to add drop shadows in Firefox 3.5+, Safari 3+, and Opera 10.5+. I know this is probably exactly the same information you found at the top twenty Google results on this topic, but at this point all those posts probably devolved into some sort of drivel about how to implement shadows in Internet Explorer with half a dozen nested images or told you to cop-out and use a jQuery plugin. Well forget all that nonsense right now, because I'm going to show you how to implement box shadows in Internet Explorer 7 and up using only CSS.

Fire up your instance of Internet Explorer to view the examples in rest of the post. What's that? You're using a mac? Well then, just fire up your virtual Windows machine. You don't have one of those either? Don't feel bad, most people don't have a virtual machine setup. But as soon as you're done reading see if you can scrounge up a copy of Windows XP. For now, go find someone who does have an installation of IE. Bribe them with M&M's if necessary.

Go ahead. I'll wait.

Are you ready? I hope so. This is going to blow your mind.

.my-box {
  -ms-box-shadow:4px 4px 3px rgba(50,180,50,0.5); }

Ok fine, it's not that easy. Hopefully that's how you'll be able to do it in IE9 by the end of the year, but to accomplish this right now we need to take a step back and alter our HTML a little.

<div class="wrapper">
  <div class="shadow"></div>
  <div class="my-box"></div>
</div>

Now we've got a few more divs to work with, but they haven't changed the layout of our box. Let's add some conditional CSS to our revamped box. In this case, I'm wrapping the post with <!--[if gte IE 7]><div class="ie7plus"><![endif]--> so I can easily target IE7 and higher with the class .ie7plus (IE6 can't render the height properly).

.ie7plus .wrapper,
.ie7plus .my-box {
  position:relative; zoom:1; }

.ie7plus .shadow {
  position:absolute; width:100%; height:100%;
  top:4px; left:4px; margin:-3px; background:rgb(50,180,50); }

Our conditional styles yield us a green box barely peeking out from behind the original box. Ignore the zoom:1; standing behind the curtain (but don't leave him out or IE7 will miss him and behave badly out of spite). Notice how the values in the last line of css correspond suspiciously well with our original shadow declaration? I knew you would. You're smart like that.

Now let's turn our shadow div into something more shadow-like by applying some Microsoft filters. Wait, don't leave! Yes, filters are proprietary CSS. Yes, some people consider proprietary CSS to be "evil." However, making a deal with the devil allows you to implement a drop shadow which expands with the height of your content and doesn't require photoshop to maintain; so get off your high horse, roll up your sleeves, and let's do what we've got to do.

We're going to be utilizing the blur filter. This filter has a "makeShadow" parameter you'll be tempted to use, but it turns the element black and eliminates our soothing green color. Therefore, we're going to combine the alpha and blur filters, which allows us to keep our spring shadow.

.ie7plus .shadow {
  filter:Alpha(opacity=50)progid:DXImageTransform.Microsoft.Blur(pixelRadius=3); }

Blam! The negative margin equal to the blur radius we set on the shadow offsets the element's increase in size due to the blur filter, and the shadow is positioned perfectly. Depending on your particular implementation, the wrapper width may need to be adjusted. Its width needs to match your element width or the shadow won't be the right size.

IE8 added support for the -ms-filter syntax in order to better comply with W3 standards. You could add this syntax directly after the IE7 version, but IE8 understands the plain filter just fine so I don't see much reason to essentially duplicate the filter just to make yourself feel better about using invalid CSS. If you have separate IE7 & IE8 style sheets, definitely use the appropriate filter syntax in the appropriate place.

/* IE7 & IE8 */
filter:Alpha(opacity=50)progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);

/* IE8 only */
-ms-filter:"Alpha(opacity=50)progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)";

Hopefully the next time you're confronted shadows, instead of snarling and throwing your novelty sized Sylvester the Cat coffee mug at the designer or client (or possibly even yourself), you'll be ready and excited to create a kick-ass, over the top, unnecessarily shadow-laden layout. Go forth and spread drop shadows as if they were saltwater taffy!

<div class="wrapper">
  <div class="shadow"></div>
  <div class="my-box">Content goes here</div>
</div>

.my-box {
  -webkit-box-shadow:4px 4px 3px rgba(50,180,50,0.5);
  -moz-box-shadow:4px 4px 3px rgba(50,180,50,0.5);
  box-shadow:4px 4px 3px rgba(50,180,50,0.5); }

/* IE Specific */
.ie7plus .wrapper,
.ie7plus .my-box {
  position:relative; zoom:1; }

.ie7plus .shadow {
  position:absolute; width:100%; height:100%;
  top:4px; left:4px; margin:-3px; background:rgb(50,180,50);
  filter:Alpha(opacity=50)progid:DXImageTransform.Microsoft.Blur(pixelRadius=3); }