Shadow
DropShadowフィルタの書式(IE5.5以降に対応)
- (HTML)
<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.DropShadpw(オプション属性)">
- (Script)
object.style.filter ="progid:DXImageTransform.Microsoft.DropShadow(オプション属性)"
- (オプション属性)･･･従来の属性と同じ
color= ･･･影の色。標準の#RRGGBB形式や色名で指定
offx=,offy= ･･･X軸/y軸方向の影のオフセットをピクセル単位で設定。負の値は左方向/上方向にオフセットされる
positive= ･･･これ解りにくい！、以下に説明↓
positive属性について
- Microsoftの説明ページでは、以下のように記述されている。
true Default. Drop shadow is created from the nontransparent pixels of the object.
false Drop shadow is created from the transparent pixels of the object.
- 上を直訳すれば、
true,1(デフォルト)の場合、オブジェクトの不透明部分の影を作る
false,0 の場合、オブジェクトの透明部分の影を作る（これが解りにくい？？）
- false,0の場合を俺なりに解釈すれば、Maskフィルタみたいなもの。オブジェクトの透明部分を影の色で塗り潰し、影の部分を透明にし背景が透けて見える。
Sample Source......................................................................>>>
<script language="JavaScript"><!--
c = "gray"; //ｵﾌﾟｼｮﾝcolorの初期値
x = 4; //ｵﾌﾟｼｮﾝoffxの初期値
y = 10; //ｵﾌﾟｼｮﾝoffyの初期値
p = 1; //ｵﾌﾟｼｮﾝpositiveの初期値
function ChangeDShadow(){
dv.style.filter = "progid:DXImageTransform.Microsoft
.DropShadow(color="+c+",offx="+x+",offy="+y+",positive="+p+")";
}
//--></script>
</head>
<body>
<div id="dv" style="position:absolute; filter:progid:DXImageTransform.Microsoft
.DropShadow(color=gray,offx=4,offy=10,positive=1)">
<img src="../../java/jadata/ja02a.jpg" width="200" height="150">
<img src="../../images/cut/025.gif" width="103" height="116">
<span style="color:green;font:60">Shadow</span>
</div>
<form name="form1">
影の色を
<select onChange="c=this.value;ChangeDShadow();">
<option value="gray" selected>グレー</option>
<option value="black">黒</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄</option>
<option value="pink">ピンク</option>
<option value="brown">ブラウン</option>
<option value="aqua">水色</option>
</select>に、
影の横方向を
<select onChange="x=this.value;ChangeDShadow();">
<option value="-20">-20</option>
<option value="-15">-15</option>
<option value="-10">-10</option>
<option value="-6">-6</option>
<option value="-4">-4</option>
<option value="-2">-2</option>
<option value="2">2</option>
<option value="4" selected>4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>ピクセル幅に、
縦方向を
<select onChange="y=this.value;ChangeDShadow();">
<option value="-20">-20</option>
<option value="-15">-15</option>
<option value="-10">-10</option>
<option value="-6">-6</option>
<option value="-4">-4</option>
<option value="-2">-2</option>
<option value="2">2</option>
<option value="4" selected>4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>ピクセル幅にする
影のでき方･･･
<input type="radio" value="1" checked name="posit" onclick="p=this.value;ChangeDShadow();">
不透明部分の影を作る
<input type="radio" name="posit" value="0" onclick="p=this.value;ChangeDShadow();">
透明部分の影を作る
DropShadowフィルタを
<input type="button" value="解除" onclick="dv.style.filter='';">する