This post originated from an RSS feed registered with Ruby Buzz by Christopher Williams. Original Post: Javascript Drop Shadows Feed Title: Late to the Party Feed URL: http://cwilliams.textdriven.com/xml/rss20/feed.xml Feed Description: Ruby. Rails. Stuff. Latest Ruby Buzz Posts Latest Ruby Buzz Posts by Christopher Williams Latest Posts From Late to the Party

I stumbled upon a n article entitled CSS Drop Shadows, which outlines an alternative way to create drop shadows for text in browsers not supporting the text-shadow CSS property (so everyone not on Safari). While the article is interesting, the solution proposed uses duplication. Not very good.

So here's a quick n' dirty alternative using javascript, and the Prototype library. Here we create a new effect, Effect.Shadow. This function will take an element (or the id of the element as a string) and will generate a drop shadow underneath it. It does this by pulling out the innerHTML of the select element, reinserting a copy of it before the element, nudging it a few pixels over and down, and making the shadow semi transparent.

Effect.Shadow = function (element) {
  element = $(element);
  element.setStyle("position:relative; display:block;");
  var html = element.innerHTML
  element.innerHTML = "<span style=\"position:absolute; display:block; top:0px;\">" + html + "</span>";
  new Insertion.Top(element, "<span style=\"color: #000; display:block; padding:2px;\">" + html + "</span>");
  element.firstChild.setOpacity(0.5);
}

You invoke it just like many of the other script.aculo.us effects:

new Effect.Shadow('id-of-element');

The resulting effect is much like the article I mentioned, but very slightly smoother because we set opacity (However both pale in comparison to the very nice rendering done by Safari of the text-shadow property, which makes the shadows "fuzzy"). Here's an example of usage where we cycle through all elements with the class name of "shadow" and add a shadow (thanks to Prototype's wonderful :

$$('.shadow').each(function(element, index) {new Effect.Shadow(element) });

One caveat I should mention is that the shadows didn't line up properly for me until I used a global padding/margin reset in my CSS file:

* {
  margin: 0;
  padding: 0;
}