Thursday, January 19th, 2006
Onion Skinned Drop Shadows with JavaScript
Brian Williams wrote an article back in time on onion skinned drop shadows.
Bob Aman decided that although he liked the drop shadows, he thought it was more complicated than it needs to be to implement it (lots of html and css).
So he created a simple wrapper JS that uses behaviour.js to do the dirty work:
The simple implementation
JAVASCRIPT:
Behaviour.register({
'.dropshadow' : function(element) {
var wrap1 = document.createElement("div");
wrap1.setAttribute("class", "wrap1");
var wrap2 = document.createElement("div");
wrap2.setAttribute("class", "wrap2");
var wrap3 = document.createElement("div");
wrap3.setAttribute("class", "wrap3");
'.dropshadow' : function(element) {
var wrap1 = document.createElement("div");
wrap1.setAttribute("class", "wrap1");
var wrap2 = document.createElement("div");
wrap2.setAttribute("class", "wrap2");
var wrap3 = document.createElement("div");
wrap3.setAttribute("class", "wrap3");
var outerNode = element.parentNode;
outerNode.insertBefore(wrap1, element);
wrap1.appendChild(wrap2);
wrap2.appendChild(wrap3);
outerNode.removeChild(element);
wrap3.appendChild(element);
}
});
CSS:
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap1 {
float: left;
background:url(/files/shadow.gif) right bottom no-repeat;
}
.wrap2 {
background:url(/files/corner_bl.gif) -4px 100% no-repeat;
}
.wrap3 {
padding:0 16px 16px 0;
background:url(/files/corner_tr.gif) 100% -4px no-repeat;
}
.wrap3 img {
display:block;
border:1px solid #ccc;
border-color:#efefef #ccc #ccc #efefef;
}
display:inline-table;
/* \*/display:block;/**/
}
.wrap1 {
float: left;
background:url(/files/shadow.gif) right bottom no-repeat;
}
.wrap2 {
background:url(/files/corner_bl.gif) -4px 100% no-repeat;
}
.wrap3 {
padding:0 16px 16px 0;
background:url(/files/corner_tr.gif) 100% -4px no-repeat;
}
.wrap3 img {
display:block;
border:1px solid #ccc;
border-color:#efefef #ccc #ccc #efefef;
}
Well, not so much “more complicated than it needs to be,” rather it was “semantically messy.” My technique just pulls the semantic ugliness out into the JavaScript where it won’t interfere with the pretty markup.
The code is clean (and example image.. humorous.) An 80’s child, perhaps? ;)
I wonder about performance degradation with script like this, however. (I used to come across this myself, when writing various bits of JS for allowing PNGs in IE without the proprietary markup for example, rounded corners via JS etc.)
The DOM can be rather slow in varying cases as PPK (quirksmode.org) and others have shown, and performance can degrade quite quickly when elements are being inserted on-the-fly via javascript. If a significant number of these images were in a single page, I would expect it would render quite slowly. (Before/after window.onload and timing etc. is another debate.)
Obviously, the benefit of this scripted method is avoiding having extra markup within the in-page HTML itself.
What I might try alternately is creating a static “image shadow” template, which would be one instance of the image with the required shade elements wrapped around it – generated via script on-the-fly, or within the markup itself. Then this item can be cloned and the per-instance image swapped with the template image (which has the shadow etc. around it), and finally the template can be appended, replacing the original image within the page itself.
There may be less work done by the browser this way, as it would not have to create three DIVs and assign class names etc. for each image in question.
Other things can be done for optimizing DOM operations such as creating a batch of items to be appended, and then appending one parent node which contains all of the newly-created nodes – as opposed to a loop which appends 100 items directly to document.body, for example.
Pardon the rant – I think this has given me something to write about on my own site, which is rather out-of-date. ;)
that may be the greatest image ever posted on ajaxian.
The performance concern is probably valid. I’ll have to do some real world testing, but I would point out that if you’re drop shadowing more than, say, 10 elements on a page, you’re probably looking at a lousy design that’s overly busy anyhow.
And I should probably make this thing compatible with IE now that it’s, you know, getting lots of attention. :-/
I created a test page in case anyone wants to check performance. Link is on the article page. I don’t have IE handy to test with, so I’m not sure how well it’d do on a page with 440 Papa Smurfs in drop shadowed wonderousness, but Firefox seems to have come through it just fine.
So I’m feeling optimistic.
[...] Onion Skinned Drop Shadows with JavaScript (tags: javascript Design web tutorial) [...]
[...] This article describes a way to add drop shadows to images using a simple Javascript wrapper. Includes source and demo. Filed under: CSS, Javascript, Site Design — [...]
I thought Teddy Bears and My Little Pony were mortal enemies. What gives?
Downloads seem to be broken again. Just a comment in the source code, and nothing more.
Oooops, meant that comment to be on the jQuery page. :-/
[...] Ajaxian » Onion Skinned Drop Shadows with JavaScript (tags: css) [...]
[...] Onion Skinned Drop Shadows with JavaScript: [...]
[...] Je had waarschijnlijk allang gehoord van union skins , maar nu kan dat ook met AJAX (trendy woord voor javascripts). Check: dit. [...]
[...] Ajaxian » Onion Skinned Drop Shadows with JavaScript (tags: css javascript) [...]
[...] From the jQuery site there’s a link to the Ajaxian website where another javascript library was used to create the Onion Skin Drop Shadow with javascript and I think the amount of code and the complexity of the code speaks for itself. Personally, I would prefer jQuery (but you already guessed that, didn’t you?) [...]