JavaScript

指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Pluginを使ってみました。似たようなプラグインでpShadowというのを使ったことがあるんですが、そちらよりも影の種類が多いかと思います。ボックス自体も角丸やらシャドウやらで見栄えを整えてくれるので特に拘りがなければそのまんま使ってもよさそうですね。以下使い方です。

[ads_center]

使い方

いつも通りjQuery本体とプラグインファイルを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.shadow/jquery.shadow.js"></script>
<link rel="stylesheet" href="jquery.shadow/jquery.shadow.css" />

で、影をつけたいボックス要素を指定してあげます。

<script type="text/javascript">
$(document).ready(function() {
    $('.sample').shadow();
});
</script>

HTMLです。

<div class="box sample">
    <p>sample text sample text</p>
</div>

クラス名のboxにはbackgroundに色を指定しておいた方がいいかもです。オプションによってはボックスの中まで影が透けちゃう時がありました。

.box {
    background: #fff;
}

オプションはこんな感じで影のタイプを指定できたりrotateでボックス傾けたりすることができます。

<script type="text/javascript">
$(document).ready(function() {
	$('.sample1').shadow();
	$('.sample2').shadow('lifted');
	$('.sample3').shadow('perspective');
	$('.sample4').shadow('raised');
	$('.sample5').shadow({type:'sides',sides:'vt-2'});
	$('.sample6').shadow({type:'sides',sides:'hz-2'});
	$('.sample7').shadow({type:'rotated',rotate:'-5deg'});
});
</script>

HTML

<!-- sample1 -->
<div class="box sample1">
    <p>sample text sample text</p>
</div>

<!-- sample2 -->
<div class="box sample2">
    <p>sample text sample text</p>
</div>

<!-- sample3 -->
<div class="box sample3">
    <p>sample text sample text</p>
</div>

<!-- sample4 -->
<div class="box sample4">
    <p>sample text sample text</p>
</div>

<!-- sample5 -->
<div class="box sample5">
    <p>sample text sample text</p>
</div>

<!-- sample6 -->
<div class="box sample6">
    <p>sample text sample text</p>
</div>

<!-- sample7 -->
<div class="box sample7">
    <p>sample text sample text</p>
</div>

IEは9以上で確認できました。

jQuery Shadow Plugin IE確認

使い方もシンプルで使いやすいですね。以下からダウンロードできます。

関連記事

  1. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  2. VenoBox

    JavaScript

    画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「…

    VenoBoxは色んなコンテンツを埋め込めるLightbox風jQue…

  3. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  4. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  5. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

  6. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP