ボタンに影を付ける

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

影付きのボタンを作成する場合は、TABLEタグを「DIV」〜「/DIV」で挟み、
DIVタグに対してshadowフィルタを適用します。
この場合も、widthでDIVタグの横幅を指定するのを忘れないようにしてください。
TABLEタグでは、border属性、cellpadding属性、cellspacing属性でボタンの間隔や罫線を指定します。
さらに、スタイルシートのmarginで影を表示するための余白を設けておきます。
あとは、各TDタグにbgcolor属性で背景色を指定すると、サンプルのような「影付きボタン」を作成できます。

<!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="width:100%; filter:shadow(color=#BBBBBB,direction=135,strength=5)">

<TABLE border="0" cellpadding="5" cellspacing="15" style="margin:15px">
<TR>
<TD align="center" bgcolor=#000099>
<FONT color="#FFFFFF"><B>ボタンA</B></FONT>
</TD>
<TD align="center" bgcolor=#000099>
<FONT color="#FFFFFF"><B>ボタンB</B></FONT>
</TD>
</TR>
</TABLE>

</DIV>
</BODY>


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