Onion Skinned Drop Shadows

All The Way Around

Make the shadow visible on all sides.

With the addition of a fourth <div> you can create a drop shadow that is exposed on all sides of the object. Bear in mind however, that if certain ALA readers see you do this, they may call for your resignation.

Back to article

How To

Step One: Create another shadow graphic

Simply rotate shadow.gif 180° and save it as shadow180.gif. But, before you do, be sure to carve out the interior and leave it transparent; otherwise, it will obscure the exposed parts of the other big shadow graphic. It should look like this.

Step Two: Modify the CSS

The new shadow component will need to sit above shadow.gif, but below the two corners in the stacking order. To achieve this I duplicated .wrap1 and named it .wrap0. I then set the new properties of .wrap1 to control the new shadow component. It's slightly different from the others, in that it does not need background-position since it should hug the top left corner of its container. Also, remember to add .wrap0 to the first rule which sets its display property along with the others.

Next, I modified the padding property of .wrap3 to create a new gap along the top and left sides of the object, through which we will see the new shadow component. Depending upon which style of shadow you're using, you may need to tweak the background-position of the corners until they match up with the pixels in shadow180.gif. This is the point at which some will throw up their hands and insist that the technique "does not work". I assure you, it does. My best advice to you is to create your own shadow graphics. In doing so, you will discover that there is a delicate balance between white space and transparency, offset and positioning. You'll then see the relationship between the dimensions of your corner graphics and the values used for background-position – and their relationship to padding.

Step Three: Add another layer to the onion skin stack

The final step involves wrapping one more div around your object–pretty basic stuff. Just put another div with class="wrap0" around the outside of the other three. That's it.

CSS:

NOTE: The following CSS differs from that used in the example above. The drop shadow you see on this page uses graphics designed for variable offsets which incoporate white space into the corner graphics, making them larger than they otherwise would be. To compensate for this, negative positioning is used on those corners to match them up with the sides of the shadow.

.wrap0, .wrap1, .wrap2, .wrap3 {
  display:inline-table;
  /* \*/display:block;/**/
  }
.wrap0 {
  float:left;
  background:url(shadow.gif) right bottom no-repeat;
  }
.wrap1 {
  background:url(shadow180.gif) no-repeat;
  }
.wrap2 {
  background:url(corner_bl.gif) 0px 100% no-repeat;
  }
.wrap3 {
  padding:4px 6px 6px 4px;
  background:url(corner_tr.gif) 100% 0px no-repeat;
  }

HTML:

<div class="wrap0">
 <div class="wrap1">
  <div class="wrap2">
   <div class="wrap3">
    <img
     src="object.gif"
     alt="The object casting a shadow"
    />
   </div>
  </div>
 </div>
</div>