updated: December 3rd, 2006 / Ross Johnson / 10 Comments

CSS & Standards based Javascript Drop Shadows

CSS Code based on SixApart

Writen by Ross Johnson of 3.7 Designs (also an example page)

Information

I created this script after looking for an effective way to create stretchable drop shadows with out tons of extra wrapper divs.
While I found some good, semi-semantic ways to achieve the look I was going for – they all left my page with three extra divs, creating a bad case of div-itous.

So I decided to try and brush up my DOM skills by creating a script that added in the drop shadows via javascript – separating presentation and content one step further.

The result looks pretty good in my book, the code stays neat and clean and the drop shadows look good. It renders fine on IE5.5 – 6 (through a grid-like gif), and uses a nice semi transparent PNG for modern browsers. The CSS is loaded through the javascript, so those running with JS turned off won’t have to download any extra code/files.

At this point there are some limitations however. The transparent PNG only stretches 1000×1000 , so any div larger will outrun the drop shadow. It also creates a jumping effect since it is activated with an onload, this might be too much for more nit-picky coders, but I can’t seem to find a solution. I tried Dean Edwards method but it still caused it for what ever reason.

Further on IE, some elements will get rendered BEHIND the element with the drop shadow. This is fixed by giving what ever elements are not showing up a “position: relative” in their CSS.

It also at this point will only work on elements that are defined by IDs, I considered making it a reference to a rel attribute or class, but each have their drawbacks so I am going to release v 0.2 as is and make it adaptive to images, lists, etc, at a later date.

Directions

  1. Copy the js, css, and images folders into your base directory. (I wrote the script/css based on this directory structure. So if you want it to be different you will have to edit the js/css)
  2. Code for HTML files

  3. <script type=”text/javascript” src=”js/dropshadow.js”></script>
    <script type=”text/javascript”>

    //ADD DIVS IN HERE
    var AddDropShadows = new Array (“div_number_1_here”,”div_number_2_here”,”div_number_3_here”);

    window.onload = AddDropShadow;

    </script>

  4. Make sure that you put the ID’s of the elements you want to add dropshadows too instead of div_number_X_here in the example

That is it! You should be good to go!

Troubleshooting

The only area’s I have seen problems is IE rendering the drop shadow element above the HTML inside it. This is fixed by assigning the contained elements a position: relative.

If you have any other problems, feel free to e-mail me or leave a comment. If possible give me a url to the page that is not working, so I can browse through the DOM code and try and figure out the problem.

Adding to the script

I am by no means a DOM/Javascript guru, if you can think of a better way to improve on the script please do so! If possible, just shoot me an e-mail with where you are hosting it, where you talk about it, so that I can link to it from this page and keep tabs on the improvements.

10 thoughts CSS & Standards based Javascript Drop Shadows

  1. You’d be better off selecting the divs to perform the dropshadow on by CSS classes. Your onload event could then just look through the page and select them that way. Such selection by CSS class is trivial with prototype.js, but I’m sure it could be done without it too.

    I’m surprised that the big prototype-based effects libraries, like script.aculo.us, haven’t done a dropshadow effect yet.

    Anyway, looks good! 🙂

  2. Why I never thought of it that way I don’t know, but I definitely will be making the next release based on class instead of ID’s. I will try and get it done with out prototype, just to keep the overall footprint down. Thanks for the great idea and comment.

    -Ross

    ross
  3. On your example page, I really can’t see the drop shadows – the entire page is rather dark (I’m on a PC at the moment so that might have something to do with it), and the few drop shadows that I can notice (if I really look hard). A more simple example page (that clearly shows the effect) might show this off better.

    I’ll take a look at it at home on my Mac and see if that makes any difference.

    I’m using FF 2.0 WinXP Pro, FYI.

  4. Yeah, the page I originally designed the script for it was a very subtle touch rather than something that stands out. Good point though, I am going to work on a better example page for the next release.

    Thanks for the feedback!

    ross
  5. Ow. i dond like divs) I think web.1 rulez!)

  6. Hi, I like the looks of your script and would like to try it out – but the download link seems to be broken 🙁

    Mike
  7. Love the drop shadows but the link is broken.

    Kurt Potts
  8. Is it possible to get that JS file download location working again? The effect you have looks brilliant and I’d love to be able to experiment with it.

Comments are closed.