【Shadow()】ぼかしのある影を付ける

filterプロパティのShadow()では、文字列や画像に残像のようなぼかしのある影を付ける事ができます。 影の色や方向は各パラメータで指定します。

書式の違いなどについてはfilterプロパティを参照して下さい。

なおfilter:shadow()の書式で指定する場合は、付ける影のスペースをpaddingなどで空けておく必要があります。

書式

  • filter:progid:DXImageTransform.Microsoft.Shadow(★) ……… ぼかしのある影を付ける(IE5.5以上)
  • filter:shadow(★) ……… ぼかしのある影を付ける(IE4以上)

★:Color=影の色、Strength=影の長さ、他下記参照

Color=影の色
影の色を指定します。色についてはカラーコード一覧を参照
Direction=影の方向
影の伸びる方向を角度(45度単位)で指定します。0~360、または下記のキーワードで指定して下さい。(初期値270)
Top(0)、Top Right(45)、Right(90)、Bottom Right(135)、Bottom(180)、 Bottom Left(225)、Left(270)、Top Left(315)、Top(360)
Strength=影の長さ
影の長さを0~255の範囲で指定します。(初期値5)
enabled
フィルタを実行するか指定します。有効にする場合「1」または「true」、無効にする場合は「0」または「false」を指定。

使用した時の例

.sample1 img{
  filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333, Direction=270, Strength=15);
}
.sample2 img{
  filter:Shadow(Color=#333333, Direction=270);
  padding:10px;
}	
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample1">sample1を適用した画像。Shadow(Color=#333333, Direction=270, Strength=15)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample2">sample2を適用した画像。Shadow(Color=#333333, Direction=270)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>

ブラウザ上の表示例

フィルタを適用していない画像

sample1を適用した画像。Shadow(Color=#333333, Direction=270, Strength=15)

sample2を適用した画像。Shadow(Color=#333333, Direction=270)

対応ブラウザなどのデータ

プロパティ 独自拡張
対応ブラウザ Internet Explorer4~

関連情報