Drop-shadows with CSS and Javascript

You have probably seen websites that have images with drop-shadows. It gives the image a three-dimensional floating effect. Usually the images are given drop-shadows with an image editing software like Photoshop. In IE, a drop-shadow is easy to achieve using the DropShadow filter. Unfortunately, this method is not standards compliant and only works on Internet Explorer 5.5 or later. For all the gripes I have against Internet Explorer, I actually like the filters on Internet Explorer and I wish that the W3C would figure out a standards-compliant way to implement filters in their CSS design.

Currently, the only way to implement drop-shadows without resorting to IE's DropShadow filter is to have an image that was previously edited through an image-editing software, dynamically generate the drop-shadow for the image through a dynamic graphics generation tool like GD or ImageMagick, or (complicated} CSS. I have run across a number of CSS-based drop-shadow solutions on the web. I either found them to be too complicated or unsatisfactory. My major problem was that I couldn't easily accommodate them into my site design. One major problem I had was that many of the solutions employ floated images. This was an issue for me, because I like to center my images and this is impossible to do with floated elements. In addition, I have a major case of Re-inventing The Wheel So I Can Say It's Mine! syndrome. Anyway, I decide to muck around and come up with my own solution. I have come up with one that doesn't look that complicated and should work... in theory. But I ran into some issues when I tried to apply it. As a result the final solution is... well, clunky. But it works for me!

My solution involves the use of two divs. The first (parent) div contains the shadow image (which I shamelessly stole from here). The child div contains the actual image for which we want to create a drop-shadow. Essentially, the layout looks like this:

Pretty simple. In HTML, the structure looks like this:

<div style = "position:relative;">

 <img id = "sh_image" src = "https://vivin.net/images/shadow.png" />

 <div style = "position:absolute; top:-Xpx; left:-Ypx;">
  <img id = "img_image" src = "http://path.to.image/image.png" />
 </div>

</div>

You might be wondering what the Xpx and Ypx things are. Well, this is where some of the clunky parts come in. One problem I faced was that I couldn't simply offset it by a constant amount, like 5px, for example. For some reason, the amount needs to be changed based on the dimensions of the image. I am not sure why this happens. Theoretically, the dimensions shouldn't matter. Well, that's one of the clunky issues. The other one has to do with Javascript. If you implement what I have so far, you'll notice that the parent div would extend to accommodate the entire shadow image. This is obviously not what we want. My solution for this problem was to use Javascript to scale the shadow image to the size of the child image:

function dropShadow(img_name, shadowWidthExtend, shadowHeightExtend)
{
         var shadow = document.getElementById("sh_" + img_name);
         var img = document.getElementById("img_" + img_name);

         shadow.width = img.width + shadowWidthExtend;
         shadow.height = img.height + shadowHeightExtend;
}

What's shadowWidthExtend and shadowHeightExtend you ask? Well, that's another clunky part. So even after I set my offsets (through trial and error) as per the image dimensions, I still found that my drop-shadows didn't look perfect. In order to make them look good, I had to "extend" the shadow image's height and width. Yeah, not that ideal. But like I said, it works. I am not sure why these issues exist. I think it might have to do with the scaling of the shadowy parts of the shadow image (where it actually fades).

Now we can put it all together:

In your HTML file:

<div class = "shadow">

 <img id = "sh_image" src = "https://vivin.net/images/shadow.png" />

 <div class = "image">
  <img id = "img_image" src = "http://path.to.image/image.png" />
 </div>

</div>

<script language = "Javascript">

 dropShadow("image", A, B);

</script>

In your CSS file:

div.shadow
{
    position:relative;
}


div.image
{
    position:absolute;
    top:-Xpx;   /* determined based on image dimensions */
    left:-Ypx;  /* determined based on image dimensions */
}

In your Javascript file:

function dropShadow(img_name, shadowWidthExtend, shadowHeightExtend)
{
         var shadow = document.getElementById("sh_" + img_name);
         var img = document.getElementById("img_" + img_name);

         shadow.width = img.width + shadowWidthExtend;
         shadow.height = img.height + shadowHeightExtend;
}

As you can see, far from ideal. If I was only able to figure out how to make the offsets constant then this would be a pretty decent solution. If anybody knows why this is happening, please let me know. I am decently proficient in CSS and I am not a guru by any means. But I love to learn!

Oh, and as far as centering the drop-shadowed image, that's easy to do by wrapping the whole thing in a center-aligned table with only one row and one cell.