yacdsm - yet another CSS drop shadow method
The premise:
While using Dave Cohen’s hovertip jQuery plugin I found a liking to his drop shadow implementation (which is based on theirs) and used it quite a lot on my own, it being my favourite drop shadow method (mainly cause it’s using transparent .png images).
The problem:
As i was writing my clickMenu plugin for jQuery, which I wanted to behave like your common Windows (or whatever) application menu, I wanted it having shadows, which looked alike too. And there is the problem, they didn’t. The shadows at the lower left and upper right border weren’t indeted as the shadow of an application menu.
Let’s visualize it:
On the left you can see a application menu with it’s shadows and on the right a text container with PIE styled shadows.
Zoomed in, it looks like this:
As you can see, the application shadow (on the left) is indented to the right and the PIE styled (on the right) isn’t nearly as much.
The solution:
After some trial and error, I’ve got working css-styled png-based shadows, which do exactly what I want.
It looks like this:
And zoomed in:
Now it’s as nicly indented as the application shadow.
If you want to make a shadow around the following..
<img src="church.jpg" />
..you need to change it into this:
<div class="outerbox"> <div class="shadowbox1"></div> <div class="shadowbox2"></div> <div class="shadowbox3"></div> <img src="church.jpg" /> </div>
(As most of the other css shadow methods it’s producing quite an overhead, too.)
Here’s a demo.
Files:
It’s tested sucessfully on Firefox 2, Opera 9 and IE 6, while not really working in IE (not displaying any shadows) but not breaking it either.
Note: The outerbox has to be floating or positioned absolute or set to a fixed width, or else it won’t shrink around the content!