紙がカールしたように見える効果を付けるjQueryプラグイン-pShadow

紙がカールしたように見える効果を付けるjQueryプラグイン-pShadow

よくみかける紙がカールしたように見える効果を、画像を使わずにjQueryで表現できます。css3を使えば画像を使わなくても表現できますが、IEでは非対応です。pShadowを使用すればIE6でも画像を使わずに表現できます。使い方も簡単です。

jQueryプラグイン-pShadow

配布先とデモページ

配布先→pShadow – a jQuery extension for gorgeous drop shadows

使用方法

ヘッダー内に下記のように記入します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pshadow.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.効果を付ける要素を指定').pShadow();
});
</script>

オプション

下記のオプションを指定できます。

•角丸

$('#element').pShadow({type: 'corners'});

•影の深さ(長さ)

$('#element').pShadow({depth: 30});

•影の強さ(暗さ)

$('#element').pShadow({strength: 2});

•下記のように配列で指定してオプションを複数指定できます。

$('#element').pShadow({
    type: 'corners',
    depth: 10,
    strength: 2
}).css('background','blue');

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能