【DropShadow()】シャープな影を付ける

filterプロパティのDropShadow()では、ぼかしのないシャープな影を付ける事ができます。

また各パラメータで影の位置や色、影の反転などができます。 なおfilter:dropshadow()の書式で指定する場合は、影のスペースをpaddingで確保しておく必要があります。

書式の違いなどについてはfilterプロパティをご覧ください。

書式

  • filter:progid:DXImageTransform.Microsoft.DropShadow(★) ……… シャープな影を付ける(IE5.5以上)
  • filter:dropshadow(★) ……… シャープな影を付ける(IE4以上)

★:Color=影の色、Positive=影の反転、他下記参照

Color=影の色
RGB値などで影の色を指定します。色の指定についてはカラーコード一覧を参照下さい。
OffX=影の横方向の位置
数値で要素と影の横方向の(ずらす)距離を指定します。正の値で右、負の値で左に影が移動します。(初期値5px)
OffY=影の縦方向の位置
数値で要素と影の縦方向の(ずらす)距離を指定します。正の値で下方向、負の値で上方向に移動します。(初期値5px)
Positive=影の反転
影と背景を反転させます。0またはfalseで反転、1またはtrueで通常表示となります。(初期値1)

使用した時の例

.sample1 img{
  filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#333,OffX=8,OffY=8);
}

/* ie4以上の書式 */
.sample2 img{
  filter:dropshadow(Color=#333,OffX=8,OffY=8);
  padding:10px;
}
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample1">sample1を適用した画像。DropShadow(Color=#333,OffX=8,OffY=8)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample2">sample2を適用した画像。DropShadow(Color=#333,OffX=8,OffY=8)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>

ブラウザ上の表示例

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

sample1を適用した画像。DropShadow(Color=#333,OffX=8,OffY=8)

sample2を適用した画像。DropShadow(Color=#333,OffX=8,OffY=8)

※IE9以下で表示して下さい(IEの「開発者ツール」のブラウザモード選択を利用するとブラウザバージョンを切り替えて表示できます)

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

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

関連情報