画像に影をつけたい

画像に影を付ける

お絵かきソフトを使わず、タグで画像に影を付けることができます。影をつけることによって写真などは見間違えるほどグレードアップしますね。

<div> タグを使います。

	←サンプル１サンプル１のソース <div style="width:100%;padding-bottom:10px;filter:Shadow(color=#666666,direction=150);"><img src="画像のアドレス" border="1"></div>
	←サンプル２サンプル２のソース <div style="width:100%;filter:Shadow(color=#d5723d,direction=150);"><img src="画像のアドレス" style="border:solid 1px #d5723d"><BR> <BR> </div>

div タグを使って影を付ける時は、下の影の部分を表示させるために余白が必要となります。どちらかを入れないと画像の下部分の影は表示されません。
サンプル１ではpadding-bottom:10px;と余白を設定し、
サンプル２では余白分に<br>改行タグを入れ、さらに枠線の色を変えています。

下記のサンプルはShadowフィルタと違い、影は平面でぼかしはありません

	←サンプル３サンプル３のソース <div style="width:100%;padding-bottom:10px;filter:DropShadow(color=#999999,offX=10,offY=10);"> <img src="画像のアドレス" border="1"></div>
	←サンプル４サンプル４のソース <div style="width:100%;filter:DropShadow(color=#d5723d,offX=10,offY=10,POSITIVE=1)"> <img src="画像のアドレス" border="1"><BR> <BR> </div>

div タグを使って影を付ける時は、下の影の部分を表示させるために余白が必要となります。どちらかを入れないと画像の下部分の影は表示されません。
サンプル３ではpadding-bottom:10px;と余白を設定し、
サンプル４では余白分に<br>改行タグを入れました。

filter:DropShadow	平面の影を付ける
offx	影の色
offx	横方向の影の長さを数値（ピクセル）で指定する
offy	縦方向の影の長さを数値（ピクセル）で指定する
positive	影の透過の有無を指定します。設定値1(true)で影を隠す、設定値0(false)で影を隠さず上から描画となります。デフォルト値は1(true)となります

●当サイトのソースは、IE6.0＋のみ動作確認をしております。それ以外のブラウザ、特にネットスケープでは正しく作動しない場合がございます。ご了承下さい。

★skip ページtop