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