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確認

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

ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた前のページ

Google検索結果で1年以内のものに限定してくれるChrome拡張機能「ato-ichinen」次のページ

関連記事

  1. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

  2. BIDEO.JS

    JavaScript

    背景動画をフルスクリーンで表示させるJSライブラリ「BIDEO.JS」

    BIDEO.JSは、webページの背景にフルスクリーンで動画を表示させ…

  3. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  4. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

  5. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  6. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

コメント

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

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

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP