MS Access Tips/Sample and VBA and Blog customize etc...

jQueryでドロップシャドウ

ちょっと面白そうなjQueryプラグインを見つけたので試しにタイトルに適用してみました。ページ上の指定したテキスト、画像、ボックスなどに影をつけるというスクリプトです。

DropShadowS.jpg

難易度:

設置方法

下記のデモページより JSファイルをダウンロードします。
Drop Shadow Examples
jQueryをまだ導入してない場合は、jQueryファイルもダウンロードします。

パラメータを指定することによって、影の位置、ぼかし、不透明度、色など細かく設定できます。上のページ上のデモで実際にパラメータを設定して結果をみることができるのでいろいろ試してみるといいでしょう。サンプルとして、影だけでなく、浮き出し、沈み込み、グロー、などもありますので、参考になります。

当ブログのタイトルには、浮き出しと、グローを組み合わせてみました。実際に設置したコードは下記になります。

HTMLの headブロック内

HTML bodyブロック内の影を付けたいタイトル部分

スタイルシート

設置結果
DropShadowTitle.jpg

IE と Firefox で微妙に影の付き方が違うのはご愛嬌。(上の画像では、IE8 となってますが、実際はIE7 での画像です。)


拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/143-981af80c
該当の記事は見つかりませんでした。