jQueryでドロップシャドウを表現する「Drop Shadow Effect」 JavaScript Library Archive

jQueryでドロップシャドウを表現する「Drop Shadow Effect」

Check Tweet

配布元：Drop Shadow Effect
ライセンス：public domain

Drop Shadow Effectは簡単にドロップシャドウが表現できるjQueryプラグインです。

CSS3などでは以下のように指定するとテキストシャドウやボックスシャドウを実装することができます。(ボックスシャドウはwebkit系ブラウザでのみ閲覧可能)

#text{
	text-shadow:3px 3px 5px blue;
}
#box{
	-webkit-box-shadow:3px 3px 5px blue;
}

サンプル１

Drop Shadow Effectを利用するとすべてのブラウザで同じような表現が可能になります。

$(function(){
	$('#text span').dropShadow({
		left : 3 , 
		top : 3 , 
		blur : 5 , 
		color : "blue"
	});
	$('#box').dropShadow({
		left : 3 , 
		top : 3 , 
		blur : 5 , 
		color : "blue"
	});
})

インラインレベル要素に対して適応することによりテキストシャドウに、ブロックレベル要素に対して適応することでボックスシャドウを表現することができます。

サンプル

スポンサードリンク

コメント

カテゴリー：CSS3 jQuery ライブラリ 製作補助系

直前:アンチエイリアス付きの角丸が簡単に設定できる「JQuery Curvy Corners」

直後:簡単にフォームの入力チェックが行えるjquery.validate.js