文字に影を付ける

shadowフィルタは、文字やボタンに影を付ける場合にも活用できます。
そこで、shadowフィルタを使用し、「影付き文字」を作成してみましょう。

「影付き文字」を作成する場合は、その文字をDVDタグで挟み、
DIVタグに対してshadowフィルタを適用します。
これで「DIV」〜「/DIV」の文字に対して影を付けることができます。
このとき、影を付けるための余白(padding)を指定するのを忘れないでください。
また、widthでDIVタグの横幅を指定しておく必要もあります。
これを忘れると正しく影が表示されません。注意してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<title></title>
</HEAD>
<BODY>

<h1 align=center>スタイルシート[CSS]覚書</h1>

<DIV align="center" style="padding:15px; width:100%; filter:shadow(color=#FF6666,direction=315,strength=10);">
<FONT size="7">影のある文字</FONT>
</DIV>


</BODY>


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