$('.standard')
.shadow();

$('.lifted')
.shadow('lifted');

$('.perspective')
.shadow('perspective');

$('.raised')
.shadow('raised');

$('.sides-vt-1')
.shadow({type:'sides', sides:'vt-1'});

$('.sides-vt-2')
.shadow({type:'sides', sides:'vt-2'});

$('.sides-hz-1')
.shadow({type:'sides', sides:'hz-1'});

$('.sides-hz-2')
.shadow({type:'sides', sides:'hz-2'});

$('.rotated')
.shadow({type:'rotated',
rotate:'-5deg'});

.rotated.lifted

.rotated.perspective

.rotated.raised

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.shadow.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.shadow.js"></script>
<script>
    $(window).load(function(){
		$('.jQuery-Shadow-box.standard').shadow();
		$('.jQuery-Shadow-box.lifted').shadow('lifted');
		$('.jQuery-Shadow-box.perspective').shadow('perspective');
		$('.jQuery-Shadow-box.raised').shadow('raised');
		$('.jQuery-Shadow-box.sides-vt-1').shadow({type:'sides',sides:'vt-1'});
		$('.jQuery-Shadow-box.sides-vt-2').shadow({type:'sides',sides:'vt-2'});
		$('.jQuery-Shadow-box.sides-hz-1').shadow({type:'sides',sides:'hz-1'});
		$('.jQuery-Shadow-box.sides-hz-2').shadow({type:'sides',sides:'hz-2'});
		$('.jQuery-Shadow-box.rotated').shadow({type:'rotated',rotate:'-5deg'});
    });
</script>
<div class="jQuery-Shadow-box standard">
	<p><code>$('.standard')<br />.shadow();</code></p>
</div>

<div class="jQuery-Shadow-box lifted">
	<p><code>$('.lifted')<br />.shadow('lifted');</code></p>
</div>

<div class="jQuery-Shadow-box perspective">
	<p><code>$('.perspective')<br />.shadow('perspective');</code></p>
</div>

<div class="jQuery-Shadow-box raised">
	<p><code>$('.raised')<br />.shadow('raised');</code></p>
</div>

<div class="jQuery-Shadow-box sides-vt-1">
	<p><code>$('.sides-vt-1')<br />.shadow({type:'sides', sides:'vt-1'});</code></p>
</div>

<div class="jQuery-Shadow-box sides-vt-2">
	<p><code>$('.sides-vt-2')<br />.shadow({type:'sides', sides:'vt-2'});</code></p>
</div>

<div class="jQuery-Shadow-box sides-hz-1">
	<p><code>$('.sides-hz-1')<br />.shadow({type:'sides', sides:'hz-1'});</code></p>
</div>

<div class="jQuery-Shadow-box sides-hz-2">
	<p><code>$('.sides-hz-2')<br />.shadow({type:'sides', sides:'hz-2'});</code></p>
</div>


<div class="jQuery-Shadow-box rotated">
	<p><code>$('.rotated')<br />.shadow({type:'rotated',<br/>rotate:'-5deg'});</code></p>
</div>

<div class="jQuery-Shadow-box rotated lifted">
	<p><code>.rotated.lifted</code></p>
</div>

<div class="jQuery-Shadow-box rotated perspective">
	<p><code>.rotated.perspective</code></p>
</div>

<div class="jQuery-Shadow-box rotated raised">
	<p><code>.rotated.raised</code></p>
</div>

jQuery-Shadowについて

jQuery-Shadowは色々なパターンのシャドウを表現できるプラグインです。
cssでは面倒なシャドウも簡単に表現できるのでなかなかおすすめです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT or GPL v2
対応ブラウザ

関連するjQueryプラグイン

  • Corner

    Corner

    css3が使えないIE6,7,8でも角丸が使える