文字に柔らかな輪郭の影をつける

IE5.0以降のみ（Macintosh版IE5.0では表示されない場合があります）

IEの「shadow」フィルタを利用すると、文字列の背後に柔らかい輪郭の影を着けることができます。ここでは、「shadow」フィルタを利用して、文字列に色つきの影を表示させる方法を考えてみましょう。

■　表示する文字列と影の設定

　文字とフィルタの設定を行います。

<DIV STYLE="width:100%;font-size:20pt;color:#330099;font-weight:bold; text-align:center;
filter:shadow(color=#CCCCFF,direction=135)"> ひどく狭い部屋の中で <br>
一人、足を抱えうずくまり<br>
微かな風の音に耳を傾けて過ごしていた<br>
気のせいかもしれない<br>
だけど僕に翼があれば<br>
きっとあの部屋を、屋根を突き破り飛び出せたかもしれない。<br>
見渡す限り蒼い空の中を<br>
桃色の雲を追って飛んでいくだろう、、、<br>
<BR>
</DIV>

文字の表示領域の幅（width）を指定しないと、文字列に影をつけることができないので注意が必要です。
例のように影を設定する場合には、影に文字色と同じ色を指定すると文字周囲がぼけて読みにくくなってしまうことがあります。美しく影を落とすには、文字色より濃度の薄い色を設定すると良いでしょう。

<<<戻る