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

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  2. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  3. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  4. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  5. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  6. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP