filter:progid:DXImageTransform.Microsoft.DropShadow(必要な値) …… ぼかしのない影をつける(IE5.5以上)




filter:dropshadow(必要な値) …… ぼかしのない影をつける(IE4以上)






広告
filterプロパティのDropShadow()は、ぼかしのない影をつける際に使用します。
filter:dropshadow()の書式で指定する場合には、
paddingプロパティで影部分のスペースを確保してやる必要があります。
- Color=影の色
- #rrggbbなどの書式やカラーネームで指定
- Positive=影と背景の逆転
- 1(true)または0(false)で指定(初期値は1で逆転となる)
- OffX=要素と影の横の距離
- 数値+pxで指定(初期値は5px)
- OffY=要素と影の縦の距離
- 数値+pxで指定(初期値は5px)
p.sample1 img {
filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#cccccc,Positive=1,OffX=10,OffY=10);
}
p.sample2 img {
filter:dropshadow(Color=#cccccc,Positive=1,OffX=10,OffY=10);
padding:10px;
}
<html>
<head>
<link rel="stylesheet" href="sample.css"
type="text/css">
</head>
<body>
<p>
filterプロパティを適用していない画像<br>
<img src="images/kaeru.gif">
</p>
<p class="sample1">
フィルタ効果DropShadow()<br>
<img src="images/kaeru.gif">
</p>
<p class="sample2">
フィルタ効果DropShadow()<br>
<img src="images/kaeru.gif">
</p>
</body>
</html>
↓↓↓
filterプロパティを適用していない画像
フィルタ効果DropShadow()
フィルタ効果DropShadow()
広告