This script lets you give images and other elements a nice drop-down shadow effect

The most shadow scripts use images for a drop-shadow. I find this not flexible enough, expecially with IE6 because IE6 doesn't support alpha transparent PNG images.

My solution uses Canvas and the Javascript Mootools 1.2 Framework. To let canvas work in IE, I've used the MooCanvas of Ibolmo

The usage is pretty simple, if you put this in your head, it should be enough:

<script src="js/mootools-1.2-core.js" type="text/javascript"></script>
<script src="js/moocanvas.js"></script>
<script src="js/mooCanvasShadow.js"></script>

<script type="text/javascript">
<!--	

window.addEvent('domready',function(){
	// 'shadow' is the ID of the element
	$('shadow').mooCanvasShadow({
		opacity: 0.2,
		size: 10,
		radius: 15,
		color: '#333333'
	});	
})

//-->
</script>

Attention If you don't have the paddings and margins of your body set to 0, the shadows will not nicely appear under your element

body {
    margin: 0;
    padding: 0;
}

Don't forget to set the background of your element to a color or an image. Otherwise you will see the shadow under your element.

If you would lie to see some examples, I've put some online here:

• Example 1
• Example 2
• Example with image