影付きメニューボタン

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

TABLEタグに対してshadowフィルタを適用すると、
サンプルに示したような「切り抜きボタン」を手軽に作成できます。
この場合、影を表示するための余白は、TABLEタグのcellpadding属性でも指定できます。

<!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>

<center>
<TABLE
border="5" cellpadding="15" style="filter:shadow(color=#BBBBBB,direction=135,strength=10);">
<TR>
<TD width="80" align="center"><B>自己紹介</B></TD>
<TD width="80" align="center"><B>写真集</B></TD>
<TD width="80" align="center"><B>日記</B></TD>
<TD width="80" align="center"><B>リンク</B></TD>
</TR>
</TABLE>
</center>
</BODY>


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