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. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  2. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

  3. ToProgress

    JavaScript

    画面上部に軽量なプログレスバーを実装できる「ToProgress」

    ToProgressは画面上部にシンプルで軽量なプログレスバーを実装で…

  4. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

  5. Albe Timeline

    JavaScript

    JSONデータを用いたタイムライン実装「Albe Timeline」

    Albe TimelineはJSONデータを用いたカスタマイズ性の高い…

  6. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

コメント

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

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

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP