TJKDesign: Home Page

Find a broken link or an error? Please report it!

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

How to create drop shadow boxes with minimal markup

Two solutions

Using only a wrapper (see method 1)
Lightweight, but authors cannot style boxes using different backgrounds
<div class="overlay">
  <div class="overlay-bd ">
    ...
  </div>
</div>
Using a wrapper plus an IMG element (see method 2)
A bit more markup, but authors can style boxes with different backgrounds
<div class="overlay">
  <img src="shadow.png" alt="" />
  <div class="overlay-bd ">
    ...
  </div>
</div>

PNG tranparency and IE filter

It is possible to achieve PNG transparency in IE lt 7, but the filter that makes this possible (the AlphaImageLoader filter) comes with a nasty side-effect: links may not work.

So the first thing to do when creating our drop shadow graphic is to make sure only transparent pixels "cover" elements containing links. Something like this image for example.

How things work

How things work depends on which browser is used. And the interesting thing is that it is the IE filter that lets us build a leaner solution.
This is because AlphaImageLoader comes with the sizingMethod property.

This is what Microsoft says about this property:

[it] sets or retrieves the manner in which to display an image within the boundary of the object that the AlphaImageLoader filter is applied to.

In short, it makes sure the background image fits the container, making it as tall and as wide! How cool is that? In fact it is so cool, that it is why I am using an IMG element in one of the two methods, to mimic that exact same behavior in better browsers.

These three graphics show how things are done:

CSS rules to apply

CSS rules are listed in each demo page, within the CSS box (note that boxes are draggable).

The underscore and star property hacks are used to feed IE with different CSS declarations:

  • _property is seen by IE less than version 7
  • *property is seen by IE, including IE 7

Method number one is IE Mac compatible. Method number two (the one that uses the IMG element) would need to include a * html hack rule to hide the IMG element from that browser too.

Please use this contact form to send feedback and report errors.