フィルタ操作・１

下のプログラムをコピーして、お使い下さい。

<HTML>
<HEAD><TITLE>フィルタ操作・１</TITLE>

<body>
<p><strong><font color="#373737" size="5">フィルタ：Dropshadow</strong>
</font><br>基本形：　<xmp><span style="width:100%;
filter:dropshadow(color=blue,offX=10,offY=10);">文字</span></xmp>
<hr>
<div align="center"><center>
<table border="1" cellspacing="1" bgcolor="#ffffaa">
  <tr>
     <td>[offX]影の位置(右)：
     <select id="x">
     <option value="0">0 pixel
     <option value="3">3 pixel
     <option value="6">6 pixel
     <option value="9">9 pixel
     <option value="12">12 pixel
     <option value="15">15 pixel
     <option selected value="18">18 pixel
     <option value="21">21 pixel
     <option value="24">24 pixel
     <option value="27">27 pixel
     <option value="30">30 pixel</select></td>
     <td>[offY]影の位置(下)：
     <select id="y">
     <option value="0">0 pixel
     <option value="3">3 pixel
     <option value="6">6 pixel
     <option value="9">9 pixel
     <option value="12">12 pixel
     <option value="15">15 pixel
     <option selected value="18">18 pixel
     <option value="21">21 pixel
     <option value="24">24 pixel
     <option value="27">27 pixel
     <option value="30">30 pixel</select></td>
     <td>[color]影の色：
     <select id="dscolor">
     <option value="00ffff">アクア
     <option value="ff0000">赤
     <option value="ffff00">黄
     <option selected value="0000ff">青
     <option value="800000">茶
     <option value="008000">緑
     <option value="000080">紺
     <option value="800080">紫
     <option value="808080">灰
     <option value="c0c0c0">銀
     <option value="ffd700">金</select></td>
  </tr>
  <tr>
     <td>文字の色：
     <select id="color">
     <option selected value="000000">黒
     <option value="ffa500">オレンジ</select></td>
     <td>文字の大きさ：
     <select id="size">
     <option value="10">10 pt
     <option value="20">20 pt
     <option value="30">30 pt
     <option value="40">40 pt
     <option selected value="50">50 pt
     <option value="60">60 pt
     <option value="70">70 pt</select></td>
     <td align="center"><input type="button" value="   表 示   " onclick="Test()"></td>
  </tr>
</table>
</center></div>
<div align="center"><center>
<table border="0" bgcolor="#f0f0f0" width="580" height="130">
  <tr>
     <td align="center"><span id="test" style="width:100%;height:130;font-size:50pt;text-align:center;filter:dropshadow(color=#0000ff,offx=18,offy=18);">JavaScript</span></td>
  </tr>
</table>
</center></div>

</BODY>
</HTML>

JavaScriptについて

この上の例では、widthは絶対に必要です。widthがないとfilterは表示されません。 Shadow、flipH、Maskなど、filterがつくものには必ず、widthやpositionのabsoluteをつけておかなくてはなりません。　簡単に使用できます。書き換えてご使用下さい。