Skip to content

Rough Book

random musings

Menu
  • About Me
  • Contact
  • Projects
    • bAdkOde
    • CherryBlossom
    • FXCalendar
    • Sulekha
Menu

Drop-shadows with CSS and Javascript

Posted on July 13, 2007September 9, 2009 by vivin

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:

Structure

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

[sourcecode language="html"]

[/sourcecode]

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:

[sourcecode language="javascript"]
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;
}
[/sourcecode]

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:
[sourcecode language="html"]


[/sourcecode]

In your CSS file:
[sourcecode language="css"]
div.shadow
{
position:relative;
}

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

In your Javascript file:
[sourcecode language="javascript"]
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;
}
[/sourcecode]

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.

3 thoughts on “Drop-shadows with CSS and Javascript”

  1. Tony says:
    July 13, 2007 at 8:23 pm

    Between IE 6, IE 7 and Firefox, I’ve found you have to be VERY careful with when you have div’s extending behind an image especialy for drop shadows.

    I got some div work on ragan.staging.vsocial.net and I had a bitch with the first divs under the header but I got it greased out.

    I almost wanted to go back to shudder tables lol.

    Reply
  2. vivin says:
    July 17, 2007 at 7:10 pm

    Hey Tony,

    Nice website! Yeah, it’s really hard getting stuff to work between IE6, IE7 and Mozilla. When I originally built this site, I split it between IE6 and "everything else". Now that IE7 is out, it sports some CSS standards compliance and so things look all messed up. I haven’t even bothered getting it to look good in IE7. Maybe someday I will!

    Right now I’m just trying to figure out why the shadow doesn’t work perfectly. I shouldn’t have to extend it.

    Reply
  3. dora says:
    September 30, 2008 at 6:55 pm

    Here is the easiest way to generate drop shadow http://dropshadowz.net

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • February 2023
  • April 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • June 2017
  • March 2017
  • November 2016
  • August 2016
  • July 2016
  • June 2016
  • February 2016
  • August 2015
  • July 2014
  • June 2014
  • March 2014
  • December 2013
  • November 2013
  • September 2013
  • July 2013
  • June 2013
  • March 2013
  • February 2013
  • January 2013
  • October 2012
  • July 2012
  • June 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • July 2011
  • June 2011
  • May 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • August 2008
  • March 2008
  • February 2008
  • November 2007
  • July 2007
  • June 2007
  • May 2007
  • March 2007
  • December 2006
  • October 2006
  • September 2006
  • August 2006
  • June 2006
  • April 2006
  • March 2006
  • January 2006
  • December 2005
  • November 2005
  • October 2005
  • September 2005
  • August 2005
  • July 2005
  • June 2005
  • May 2005
  • April 2005
  • February 2005
  • October 2004
  • September 2004
  • August 2004
  • July 2004
  • June 2004
  • May 2004
  • April 2004
  • March 2004
  • February 2004
  • January 2004
  • December 2003
  • November 2003
  • October 2003
  • September 2003
  • July 2003
  • June 2003
  • May 2003
  • March 2003
  • February 2003
  • January 2003
  • December 2002
  • November 2002
  • October 2002
  • September 2002
  • August 2002
  • July 2002
  • June 2002
  • May 2002
  • April 2002
  • February 2002
  • September 2001
  • August 2001
  • April 2001
  • March 2001
  • February 2001
  • January 2001
  • December 2000
  • November 2000
  • October 2000
  • August 2000
  • July 2000
  • June 2000
  • May 2000
  • March 2000
  • January 2000
  • December 1999
  • November 1999
  • October 1999
  • September 1999
©2023 Rough Book | Built using WordPress and Responsive Blogily theme by Superb
All original content on these pages is fingerprinted and certified by Digiprove