Thursday, January 19th, 2006

Onion Skinned Drop Shadows with JavaScript

Category: JavaScript, Library, UI

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

  1. Behaviour.register({
  2.   '.dropshadow' : function(element) {
  3.     var wrap1 = document.createElement("div");
  4.     wrap1.setAttribute("class", "wrap1");
  5.     var wrap2 = document.createElement("div");
  6.     wrap2.setAttribute("class", "wrap2");
  7.     var wrap3 = document.createElement("div");
  8.     wrap3.setAttribute("class", "wrap3");
  9.  
  10.     var outerNode = element.parentNode;
  11.     outerNode.insertBefore(wrap1, element);
  12.     wrap1.appendChild(wrap2);
  13.     wrap2.appendChild(wrap3);
  14.     outerNode.removeChild(element);
  15.     wrap3.appendChild(element);    
  16.   }
  17. });
  1. .wrap1, .wrap2, .wrap3 {
  2.   display:inline-table;
  3.   /* \*/display:block;/**/
  4. }
  5. .wrap1 {
  6.   float: left;
  7.   background:url(/files/shadow.gif) right bottom no-repeat;
  8. }
  9. .wrap2 {
  10.   background:url(/files/corner_bl.gif) -4px 100% no-repeat;
  11. }
  12. .wrap3 {
  13.   padding:0 16px 16px 0;
  14.   background:url(/files/corner_tr.gif) 100% -4px no-repeat;
  15. }
  16. .wrap3 img {
  17.   display:block;
  18.   border:1px solid #ccc;
  19.   border-color:#efefef #ccc #ccc #efefef;
  20. }

Onion Shading

Posted by Dion Almaer at 9:49 am
15 Comments

++++-
4 rating from 360 votes

15 Comments »

Comments feed TrackBack URI

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.

Comment by Bob Aman — January 19, 2006

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. ;)

Comment by Scott Schiller — January 19, 2006

that may be the greatest image ever posted on ajaxian.

Comment by Rob — January 19, 2006

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. :-/

Comment by Bob Aman — January 19, 2006

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.

Comment by Bob Aman — January 19, 2006

[…] Onion Skinned Drop Shadows with JavaScript (tags: javascript Design web tutorial) […]

Pingback by Free Hogg » links for 2006-01-20 — January 19, 2006

[…] 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 — […]

Pingback by ResourceBlog » Onion Skinned Drop Shadows with JavaScript — January 20, 2006

I thought Teddy Bears and My Little Pony were mortal enemies. What gives?

Comment by Monkey Dog — January 20, 2006

Downloads seem to be broken again. Just a comment in the source code, and nothing more.

Comment by Bob Aman — January 20, 2006

Oooops, meant that comment to be on the jQuery page. :-/

Comment by Bob Aman — January 20, 2006

[…] Ajaxian » Onion Skinned Drop Shadows with JavaScript (tags: css)   […]

Pingback by Gilles Dubois Bookmarks » links for 2006-01-21 — January 20, 2006

[…] Onion Skinned Drop Shadows with JavaScript: […]

Pingback by Onion Skinned Drop Shadows with JavaScript — Sam’s random musings Archive — January 23, 2006

[…] Je had waarschijnlijk allang gehoord van union skins , maar nu kan dat ook met AJAX (trendy woord voor javascripts). Check: dit. […]

Pingback by Schot in de zaak… » Blog Archive » Schaduws maken met CSS — January 24, 2006

[…] Ajaxian » Onion Skinned Drop Shadows with JavaScript (tags: css javascript) […]

Pingback by links for 2006-02-03 at bluno.org — February 5, 2006

[…] 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?) […]

Pingback by 15 Days Of jQuery : Wrap It Up - Lazy Man’s HTML Generation With jQuery — May 29, 2006

Leave a comment

You must be logged in to post a comment.