filter: dropshadow(***);

ブラウザ
  • IE
プロパティ
  • 独自拡張プロパティ
IE10以降は未対応となりました。

dropshadow は、シャープな影を付けるフィルタです。(ずらしたような影になります)

影の色や位置、影の反転などを指定することができます。


.example {
filter: dropshadow(color=red, offx=10, offy=10, positive=true);
}

属性 値と説明
color 影の色
(色の指定については、CSSの色指定をご覧ください)
offx
offy
影の移動距離 (ピクセル数)
offx = 右方向 (負の値は左方向) |offy = 下方向 (負の値は上方向)
positive 影の反転
0 (または false) = 反転|1 (または true) = 通常
  • このプロパティは、CSS 2では定義されていません。

使用例

フィルタなしの状態
<p><img src="example1.gif" alt="[サンプル]">
<img src="example2.gif" alt="[サンプル]"></p>

[サンプル] [サンプル]

<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>
フィルタの表示テスト
影の色
<div style="width: 100%; padding-bottom: 10px; filter: dropshadow(color=red);">
<img src="example1.gif" alt="[サンプル]">
</div>
[サンプル]
<p><img src="example2.gif" alt="[サンプル]" style="filter: dropshadow(color=red);"></p>

[サンプル]

<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: dropshadow(color=red);">
フィルタの表示テスト
</div>
フィルタの表示テスト
影の移動
<div style="width: 100%; padding-bottom: 30px; filter: dropshadow(color=#c0c0c0, offx=20, offy=30);">
<img src="example1.gif" alt="[サンプル]">
</div>
[サンプル]
<div style="font: bold 170% sans-serif; width: 10em; padding: 10px 0 0 10px; filter: dropshadow(color=#c0c0c0, offx=-5, offy=-5);">
フィルタの表示テスト
</div>
フィルタの表示テスト
影の反転
<div style="font: bold 170% sans-serif; width: 12em; padding: 10px 5px; text-align: center; filter: dropshadow(color=#c0c0c0, positive=false);">
フィルタの表示テスト
</div>
フィルタの表示テスト