filter: dropshadow(***);
- ブラウザ
- 特性
- 独自拡張プロパティ
dropshadow は、シャープな影を付けるフィルタです。（ずらしたような影になります）
影の色や位置、影の反転などを指定することができます。
.example {
filter: dropshadow(color=red, offx=10, offy=10, positive=true);
}
| 属性 | 値と説明 |
|---|---|
| color | 影の色 （色の指定については、CSSの色指定をご覧ください） |
| offx offy |
影の移動距離 （ピクセル数） offx = 右方向 （負の値は左方向） ｜offy = 下方向 （負の値は上方向） |
| positive | 影の反転 0 （または false） = 反転｜1 （または true） = 通常 |
使用例
■フィルタなしの状態
<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>
フィルタの表示テスト
- サイト内検索
