XBL aTrueShadows: description

Features

• Natural look. The shadow is resizable, transparent, blurred on edges. See demo.

• Can be applied to variously layed out and styled blocks: statically and absolutely positioned, floats, with automatic or specified sizes, paddings, borders and margins.

• Plays nice with dynamically changed content, font size resizing.

• Images are very small (currently 641 bytes).

• No spurious mark-up in HTML — fully dynamically generated.

• Doesn't wait for 'onload' event (didn't I mention that XBL is a very powerful technology?)

• Very easy to use. All that needed is to link a CSS file and set class="shadow" on desired elements.

• It's free

Drawbacks

• New Gecko-browsers only. Firefox 1.0 crashes on it, so it'll work on 1.5 and newer. Though it may be rewritten in pure JavaScript to work in other browsers, by this time I know of no such works.

• The shadow is strictly rectangular. It means if you have some oddly shaped thing sticking out of the shadowed box, shadow won't follow, sorry.

  This is by the way why I call them "almost" true shadows :-).

• If you have some positioning styles applied on a generic <div> element, things will probably break. But such styling is a bad idea anyway.

• Doesn't work for <table>s. Yet, I hope... Though you may wrap table in a <div> and apply shadow to it.

• There are always some undiscovered bugs...

Usage

This is in fact simple.

1. Download and unnpack the library. You may place it wherever you like in your web directory.

2. Link to the library's CSS file from your HTML:

   <link rel="stylesheet" href="/styles/trueshadows.css">
   

3. Apply shadows:

   • Add class value "shadow" to desired elements. Remember you can just add shadows class to your already defined classes:

     <div id="info" class="center shadow">
     

   • Alternatively you can apply shadows based on your own stylesheet. For example if you want to add shadows to all elements with class "panel" add this rule to your CSS file:

     .panel {
       -moz-binding:url('/styles/trueshadows.xml#shadow');
     }
     

That's it!

Dynamically show/hide shadow

If you tried to remove shadow once cast on an element you've probably noticed that it's not enough to remove "shadow" value from element's class to make the shadow go away.

Instead you should use another value for class: "hiddenshadow". Here's a very simple (though not very practical) example how to show and hide shadow by clicking a mouse on an element:

<div onmousedown="this.className='shadow';" 
     onmouseup="this.className='hiddenshadow';">...</div>