WARNING!

The code on this page is experimental and currently only for research.

Minimum font size

This effect won't look too great if minimum font size is set in your browser settings.

Options

• shadowClass:
• wrapperClass:
• fps:
• lift:
  • opacity:
  • effect:
    • transition:
    • duration:
• drop:
  • opacity:
  • effect:
    • transition:
    • duration:
• radius:
• liftX:
• liftY:
• offsetX:
• offsetY:

Compatibility

Should now display properly in Firefox, Opera and Safari!

Though Opera and Safari presently still have a 1px offset on the shadow in dropped position. They won't let you set height and width of 0px...

Explorer almost displays the shadow correctly.

Explorer 6 on the larger window is spot on (it may show single pixel lines of overlap pieces of shadow), but on the smaller ones it messes up.... investigating...

Explorer 7 strangely does not render pngs and alpha(opacity) all that well; the 8bit alpha channel on pngs is downgraded to 1bit alpha... WTF!?? Bill plz fix your shite browser - or pull it!

Without alpha(opacity) though it renders perfectly.

Synopsis

This page demonstrates a technique to make dropshadows on html elements using mootools.

The main feature of this particular dropshadow effect is it's dynamic blur radius. The shadow blur radius grows and shrinks as the element lifts from the page and drops down again in a realistic fashion.

Mouseover a colored block to lift it making it drop a nice soft shadow. Click to drag. Mouseout to drop the block