Sporkmonger

Since it’s April 5th, the blog will be styled stark naked today.

Update: Hey, back to your regularly scheduled CSS. Well, that was certainly an unusual bandwagon.

So, I’m at BarCamp NYC and I finished up with the code for my presentation a bit faster than I expected, so I figured I’d fix something that’s been bothering me for awhile.

A List Apart ran a wonderful article some time ago, entitled "Onion Skinned Drop Shadows". It’s a really, really great way of putting gorgeous drop shadows on divs, images, or other block elements. Unfortunately though, the markup required involves a bunch of wrapper divs, and that kind of bothered me a little—it strikes me as somewhat less than elegant.

So, I wrote up a quick fix for the problem. In a nutshell, I used behavior.js to locate all elements with a class of “dropshadow” and add in the wrapper divs with some simple JavaScript. The rest gets handled by the CSS supplied in the ALA article.

The JavaScript:

Update: Now with IE support!

(Turns out IE needs you to call the “className” method, or it doesn’t know to update the CSS class.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Behaviour.register({
  '.dropshadow' : function(element) {
    var wrap1 = document.createElement("div");
    wrap1.className = "wrap1";
    var wrap2 = document.createElement("div");
    wrap2.className = "wrap2";
    var wrap3 = document.createElement("div");
    wrap3.className = "wrap3";
    
    var outerNode = element.parentNode;
    outerNode.insertBefore(wrap1, element);
    wrap1.appendChild(wrap2);
    wrap2.appendChild(wrap3);
    outerNode.removeChild(element);
    wrap3.appendChild(element);
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

The Demo:

ZOMGCUTE!

Anyhow, many thanks to Brian Williams for the original article.

Update: And for those wondering about performance, I wrote up a quick test page featuring merely 440 shady Papa Smurfs. I wrote a test page, then removed it so I don’t run out of bandwidth due to IE’s brokenness. Firefox handles the smurf mob just fine. If I manage to get IE working, I’ll put it back up.

Notice to IE users: Why aren’t you using Firefox?!? IE peeps, please don’t try to load the whole performance test page… IE’s going to try to download the same images over and over again, like a bazillion times because being stupid is all it’s good at. I’d really prefer not running out of bandwidth for the month, or worse, make TextDrive sad, because of IE being dumb. Update: IE should play nice now that I’m insisting on proper behavior with the Cache-Control header. Not verified though… Update: Nevermind, Internet Explorer is still trash.