HOME 　>>> 　HTML整理ノート 　>>> DHTML -- 基本編　　　応用編

Shadowフィルタ （陰影）

■Shadow フィルタ（陰影)
・オブジェクトの縁にそって一様なシルエットを描画する。フィルタが適用されるには、オブジェクトのstyleでabsolute、width、heightのいずれかの設定が必要。
・DropShadowと異なる点は、Shadowの場合、影をオフセットで描画するのではないこと(影の長さを指定できない)

★style書式　･･･＜ ="filter:shadow(color=c,direction=d)">
  Script書式 ･･･コンテナのID.style.filter = "shadow(color=c,direction=d,enabled=n)";

　　　　c ･･･影の色。標準の#RRGGBB形式や色名で指定。
　　　　d ･･･シルエットの描画方向を指定。デフォルトは 0 (真上になる)
　　　　　　 時計回りで45°単位に設定(45,90,135,180,225,270,315)、90は右、180は下、270が左になる。
　　　　n ･･･1(フィルタを有効にする)／0（無効にする)

色と影の方向を指定して[Shadow]ボタンを押す。

color


影の方向を時計回りの0〜360°で指定。
0は真上、180が真下方向。
direction

　

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function ShadowGo(){
    var c = col.value;        //色を取得
    var d = dir.value;        //方向を取得
    var str = "<img id='pic' src='../../images/cut/025.gif'
                width='103' height='116'";
    str += " style='filter:shadow
            (color=" + c + ",direction=" + d + ")'>";
    pp.innerHTML = str;
}
//--></script>
</head>

<body>
<button onclick="ShadowGo();">Shadow</button>

<p style="color:magenta;font:bold 14pt">color
  <select style="color:navy;font:12pt"
        name="col" size="1">
    <option value="red" selected>赤 </option>
    <option value="blue">青 </option>
    <option value="green">緑 </option>
    <option value="magenta">紫 </option>
    <option value="pink">ﾋﾟﾝｸ </option>
    <option value="gray">灰色 </option>
    <option value="coral">ｵﾚﾝｼﾞ </option>
    <option value="black">黒 </option>
  </select></p>

<p style="color:magenta;font:bold 14pt">direction
    <input style="color:navy;font:14pt;text-align:center"
        type="text" name="dir" value="45" size="4">
</p>
<p id="pp">
    <img id="pic" src="../../images/cut/025.gif"
            WIDTH="103" HEIGHT="116">
</p>

end(最終更新:12/11/10)