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. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  2. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  3. no-image

    JavaScript

    さまざまなデバイスに対応したパララックスを実装できる「PARALLAX」

    PARALLAXは、さまざまなデバイスに対応したシンプルなパララックス…

  4. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  5. jR3DCarousel

    JavaScript

    レスポンシブな3Dカルーセルを実装できる「jR3DCarousel」

    jR3DCarouselはレスポンシブな3Dカルーセルを実装できるjQ…

  6. no-image

コメント

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

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

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP