memocarilog

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

配布先とデモページ

配布先→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');