JavaScript

画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です。pShadowというプラグインなのですが、これを使うと自分の好きな画像や要素に超簡単にドロップシャドウをつけることができます。オプションの値の数値を変更すればいくつかのパターンのドロップシャドウをサクっとつけることができるのでかなり便利です。

[ads_center]

使い方

まずはいつもの通り以下のURLからファイルをダウンロードします。

ここをクリックすればダウンロードできます。

pShadowのダウンロード

ダウンロードしたフォルダの中に「jquery-1.6.4.min.js」と「pshadow.js」が入っているのでこれをhead内で読み込んでいきます。

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="pshadow.js"></script>

あとはドロップシャドウを適用したい要素を指定します。

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

ここでは「sample」というクラスがついている要素にドロップシャドウを適用してみます。HTMLはこんな感じです。

<div class="sample">ドロップシャドウのサンプル</div>

CSSも適当に。

.sample {
    width: 500px;
    padding: 20px;
    background: Pink;
    text-align: center;
}

実際にブラウザで確認してみるこんな感じです。

ドロップシャドウ-サンプル01

おお、ちゃんとドロップシャドウが適用されてる。当たり前ですけど。もちろん画像なんかもこの通りちゃんと適用されます。

ドロップシャドウ-サンプル03

色々あるオプションで色んなドロップシャドウができる

オプションの値を変更したりすることで自分好みのドロップシャドウにすることができます。例えばこんな感じ。

$('.sample').pShadow({
    type: 'middle',
    depth: 40,
    strength: 5
});

上記だとこのようになります。

ドロップシャドウ-サンプル02

以下、オプションの解説です。

type

基本的なシャドウの形です。cornersかmiddleを指定できます。違いは見た方が早いと思うのでざっくりですが以下のような違いになります。

cornersとmiddle

depth

影の高さですね。数値が高いと影も高くなり、低いと影も低くなります。こんな感じです。

depth-10と40

strength

こちらは影の強さです。大体1〜5くらいの間で指定します。1に近いほど影が薄くなり、5に近いほど影が濃くなります。別に5以上でも指定することはできるのですが、ちょっとやりすぎ感がでてきちゃうかと。

strength-1と5と10

すごく気に入った

個人的にめちゃくちゃ気に入りました。別に画像やCSS3なんかでもドロップシャドウを作れたりもできるんですが、手間がかかったり、IEで表示されなかったりちょっと面倒な部分(単に僕の技術がない)もあるんですが、これを使えば簡単にドロップシャドウをつけることができるのでかなりいい感じです。ちなみにIE9で確認したところ普通に適用されていました。

IEドロップシャドウ確認

このブログでも使ってもいいかもしれないっすね。ということでオススメです、pShadow。

関連記事

  1. Simple Lightbox
  2. jquery-time-slider

    JavaScript

    時間と日付を選択できる「jquery-time-slider」

    jquery-time-sliderは時間と日付を選択できるjQuer…

  3. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

  4. Simple jQuery Slider

    JavaScript

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

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

  5. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  6. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP