filter:progid:DXImageTransform.Microsoft.DropShadow(属性)

---

属性：

color	影の色を指定 (詳細は『色の指定方法』を御覧ください)
offx	横への影の位置を指定。マイナスも可。
offy	縦への影の位置を指定。マイナスも可。
positive	影の透過を指定。 　0，false：影を透過しない 　1，true ：影を透過する
enabled	フィルタを設定するかどうかを指定 　0，false：フィルタを設定しない 　1，true ：フィルタを設定する

filterプロパティのDripShadowフィルタを使って、画像や文字に影をつけます。
透過されていない画像の場合は、画像の外枠に影がつきますが、透過されている画像の場合は、透過部分に合わせた影がつきます。
影の表示位置によっては、それに続くテキストや画像の表示位置がずれてしまうことがあります。

必要な属性は、半角のカンマ「,」で区切って指定します。
offxやoffyで影を大きくすると、ボックスの範囲も大きくなります。
DIV要素やSPAN要素に適用させる場合は、positionプロパティに「absolute」を指定するか、widthやheightプロパティを使って表示位置を指定する必要があります。
この指定をしなければフィルタの効果は現れません。
また、このフィルタはInternetExplorer5.5以上のブラウザと、DirectXというWindowsの機能で表示できます。



↑元の画像(透過処理のない画像)


↑元の画像(透過処理のある画像)


↑影をつけた画像(透過処理のない画像)


↑影をつけた画像(透過処理のある画像)

素材:(c)Toy Box

<STYLE type="text/css">
<!--
.case3 {
filter:progid:DXImageTransform.Microsoft.DropShadow
(color=#666666,offx=5,offy=5,positive=1);
}
-->
</STYLE>

<IMG src="img/img10_04_1.gif" width="148" height="150" border="0"><BR>
↑元の画像(透過処理のない画像)<BR><BR>
<IMG src="img/img10_04_2.gif" width="109" height="84" border="0"><BR>
↑元の画像(透過処理のある画像)<BR><BR>
<IMG src="img/img10_04_1.gif" width="148" height="150" border="0" class="case3"><BR>
↑影をつけた画像(透過処理のない画像)<BR><BR>
<IMG src="img/img10_04_2.gif" width="109" height="84" border="0" class="case3"><BR>
↑影をつけた画像(透過処理のある画像)