画像に影を付ける(1)

ホームページに写真を掲載する際に画像に影を付けると、
ページ全体のデザインが洗練された雰囲気になります。
また、写真を上手に見せるという効果もあります。

shadowフィルタは、color、direction、strengthの3つで影を設定します。
colorには影の色をRGBの16進数で指定してください。
directionは影の方向を指定する項目であり、真上を0度として時計回りに0〜360の値を指定します。
strengthは影の強さを指定する項目で、この値を大きくするほど影の長さが長くなります。
たとえば、灰色(#666666)で右斜め下方向、
10ピクセルの影を指定する場合は、以下のようにスタイルシートを記述します。
なお、shadowフィルタはInternet Explorer専用であり、
他のブラウザでは影が再現されない点にも十分注意するようにしてください。

IMGタグなどで表示する画像に影を付けるには、影のぶんだけ余白を設けておく必要があります。
これは、paddingのスタイルシートを記述すると指定できます。

<IMG src="http://www47.tok2.com/home/donbey/DSCF04021.jpg"
style="padding:15px;
filter:shadow(color=#666666,direction=135,strength=10);"
>


(画面クリックでWEB上のサイズを見てください。)