グロー効果に引き続き、 HTML 要素に影を落としたような視覚効果であるドロップシャドー効果(drop shadow effect) を付与するための JavaScript を作ってみました。
Firefox 1.5.x, Netscape 7.1, Opera 9.1.0 で動作確認済みです。 肝心の Internet Explorer では期待した通りの動作にならなかったので (誰か対応して！)スクリプト側では処理を行なう前にリターンしています。 下の動作サンプルは IE 以外でお試しください。
ドロップシャドー効果を得る方法として、
CSSを用いる方法が
手軽で便利です。しかし影の左端と上端が直線で切り取られたようになってしまいます。
makeShadow.jsを用いた今回の手法では、これら両端のぼかしも綺麗に再現することができます。
スクリプト本体(makeShadow.js)を読み込み， シャドー効果を付与するための関数を呼び出します。
これらの関数が呼ばれると，
グラデーション画像を背景とする幾つかの span 要素を生成し，
指定された HTML 要素の子として付け加えることでこれを実現しています。
グラデーション画像のファイル名は固定ですが，
画像ファイルへのパスと各画像のサイズは任意に変更することができます。
スクリプトファイルは LGPL に従って自由に配布・改造することができます。
