|
| ホームページに写真を掲載する際に画像に影を付けると、 ページ全体のデザインが洗練された雰囲気になります。 また、写真を上手に見せるという効果もあります。 |
shadowフィルタは、color、direction、strengthの3つで影を設定します。
colorには影の色をRGBの16進数で指定してください。
directionは影の方向を指定する項目であり、真上を0度として時計回りに0〜360の値を指定します。
strengthは影の強さを指定する項目で、この値を大きくするほど影の長さが長くなります。
たとえば、灰色（#666666）で右斜め下方向、
10ピクセルの影を指定する場合は、以下のようにスタイルシートを記述します。
なお、shadowフィルタはInternet Explorer専用であり、
他のブラウザでは影が再現されない点にも十分注意するようにしてください。
| 影を付ける画像がいくつもある場合は、 以下のようにpaddingとshadowフィルタを指定したクラスをスタイルシートに登録しておくとよいでしょう。 これで、手軽に画像に影を付けられるようになります。 <STYLE type="text/css"> IMG.kage{ padding:15px; filter:shadow(color=#666666,direction=135,strength=10); } </STYLE> あとは、IMGタグに先ほどのクラスを指定するだけで画像に影を付けることができます。 今回の例では、「kage」という名前でクラスを登録したので、 「class="kage"」とIMGタグに記述すると、その画像に影を付けることができます。 <IMG src="photo1.jpg" class="kage"> <IMG src="photo2.jpg" class="kage"><BR clear="left"> <IMG src="photo3.jpg" class="kage"> <IMG src="photo4.jpg" class="kage"> |
