[JavaScript] ドロップシャドー効果

Posted by
ぴろり
Posted at
2007/01/20 14:06
Trackbacks
関連記事 (0)
Post Comment
コメントできます
Category
開発メモ カテゴリ

 グロー効果に引き続き、HTML 要素に影を落としたような視覚効果であるドロップシャドー効果(drop shadow effect)を付与するための JavaScript を作ってみました。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

スクリ−ンショット

 Firefox 1.5.x, Netscape 7.1, Opera 9.1.0 で動作確認済みです。肝心の Internet Explorer では期待した通りの動作にならなかったので(誰か対応して!)スクリプト側では処理を行なう前にリターンしています。下の動作サンプルは IE 以外でお試しください。

 ドロップシャドー効果を得る方法として、CSSを用いる方法が手軽で便利です。しかし影の左端と上端が直線で切り取られたようになってしまいます。makeShadow.jsを用いた今回の手法では、これら両端のぼかしも綺麗に再現することができます。


解説

 スクリプト本体(makeShadow.js)を読み込み、シャドー効果を付与するための関数を呼び出します。

// 特定のオブジェクトに対してシャドー効果を付与する
makeShadowElement (document.getElementById ('id_name'));

// または指定されたクラス名を持つ全てのオブジェクトにシャドー効果を付与する
makeShadowClass ('class_name');

 これらの関数が呼ばれると、グラデーション画像を背景とする幾つかの span 要素を生成し、指定された HTML 要素の子として付け加えることでこれを実現しています。グラデーション画像のファイル名は固定ですが、画像ファイルへのパスと各画像のサイズは任意に変更することができます。

// グラデーション画像は /image/glow ディレクトリに配置されている
// グラデーション画像の基本サイズは 12 ピクセルとする
makeGlowClass ('class_name', '/image/glow', '12px');

 スクリプトファイルは LGPL に従って自由に配布・改造することができます。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。