How to create drop shadow boxes with minimal markup
- 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
IMGelement (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
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
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:
- How Internet Explorer 5.5 and 6 do it
- How better browsers do it
- Throwing an
IMGelement into the picture
CSS rules to apply
CSS rules are listed in each demo page, within the CSS box (note that boxes are draggable).
- Using a wrapper around the container
- Adding an IMG element allows us to create boxes with different backgrounds
- Bottom right drop shadow only
The underscore and star property hacks are used to feed IE with different CSS declarations:
_propertyis seen by IE less than version 7
*propertyis 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.