filter: shadow(***);

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

shadow は、やわらかい影を付けるフィルタです。(伸ばしたような影になります)

影の色や方向を指定することができます。


.example {
filter: shadow(color=red, direction=135);
}

属性 値と説明
color 影の色
(色の指定については、CSSの色指定をご覧ください)
direction 影の方向 (45度単位)
0 = 上|45 = 右上|90 = 右|135 = 右下|180 = 下|225 = 左下|270 = 左|315 = 左上
  • このプロパティは、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: shadow(color=red, direction=135);">
<img src="example1.gif" alt="[サンプル]">
</div>
[サンプル]
<p><img src="example2.gif" alt="[サンプル]" style="filter: shadow(color=red, direction=135);"></p>

[サンプル]

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