JavaScript Library Archive

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

2010-02-15T19:39:37Z

配布元：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"
	});
})

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

JavaScript Library Archive

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

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

使い方

要素に複数の背景画像を設定出来る「jQuery background_layers」

使い方

グラデーション表現するjQuery Gradient

利用方法

スタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」

使い方

クロスフェードでロールオーバーを行う「rollover2.js」

使い方

IE以外でクリップボードにコピーが利用できる「ZeroClipboard」

使い方

非常に美しいLightBoxスクリプト「Sexy LightBox」

利用方法

グループ化

背景色の変更

ライトボックスの色の変更

select要素をプルダウンに拡張するjQuery.selectable.js

使い方

デザインの変更

拡張

表示形式

エフェクト

角丸を簡単に表現する「 jQuery Canvas Rounded Corners」

使い方

IE6で透過pngを表示する「DD_belatedPNG」

使い方

IE7以下でもdisabled 属性を利用できるようになる「select-option-disabled-emulation.js」

使い方

スタイルシートを切り替える「styleswitcher.js」

使い方

ページめくりを表現するJavaScriptライブラリ「The Sexy Curls jQuery Plugin」

利用方法

非常にきれいなアラートを表示する「jQuery Alert Dialogs」

使い方

CSVをTable化するjQueryプラグイン「jquery.csv2table.js」

ブロックレベル要素の高さを揃える「Equal Heights」

Equal Heightsの使い方

複数のファイルをアップロードできる「jQuery Multiple File Upload Plugin」

jQuery Multiple File Upload Pluginの使い方

フォームの入力値をチェックするJavascriptライブラリ『Validate.js』

使い方

日付選択が簡単に出来るmootoolsライブラリ「Calendar」

使い方

テーブルからグラフを描画するJavaScriptライブラリ「Bluff 」

使い方

値を直接設定

グラフの色の設定

半透明なツールチップを表示する「Nice Titles」

Nice Titlesの使い方

コンテンツをスクロールできる「jsScroller」

使い方

角丸を表現する「jQuery Corners 0.3」

jQuery Corners 0.3の使い方

jQueryベースのカラーピッカー 「Farbtastic」

Farbtasticの使い方

水平方向のアコーディオンメニュー「horizontal accordion」

horizontal accordionの使い方

セレクトボックスをカスタマイズする「Script.aculo.us Select Box」

Script.aculo.us Select Boxの使い方

IE6でhover,active,focus擬似要素を使う為の「csshover」

csshoverの使い方

テーブルに簡単にソート機能が付けられる「Table Sorter」

Table Sorterの使い方

プログラムのコードに色を付ける「google-code-prettify」

使い方

jQueryベースのカラーピッカー「Farbtastic」