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。

指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方前のページ

Photoshopで同じ文字をリピートして全体に適用するパターン定義のメモ次のページ

関連記事

  1. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  3. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  4. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  5. no-image

    JavaScript

    水平スクロールでテキストが流れていくマーキー実装「hMarquee」

    hMarqueeは、水平スクロールでテキストが滑らかに流れていくマーキ…

コメント

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

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

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP