Blog

CSS & Standards based Javascript Drop Shadows

Uncategorized
Ross Johnson Ross Johnson

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>

  3. 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.