CSS Code based on SixApart
Writen by Ross Johnson of 3.7 Designs (also an example page)
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.
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.
- 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)
Code for HTML files
- 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
//ADD DIVS IN HERE
var AddDropShadows = new Array (“div_number_1_here”,”div_number_2_here”,”div_number_3_here”);
window.onload = AddDropShadow;
That is it! You should be good to go!
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