ぼかしやドロップシャドウ、コントラスト変更など、要素に様々な視覚効果を付与するスタイル。
従来なら PhotoShop 上でしか適用できないような視覚効果を動的に適用できる強力なスタイル。
場合によっては画像の編集作業そのものをなくすことができるため、積極的に使っていきたい。
デモ
ぼかし
- ぼかしの強さを設定できる。
- 非常に重い。
コントラスト
- 明暗比（輝度比）の度合いを設定できる。
ドロップシャドウ
- 縦横の移動量とぼかしの強さ、色を設定できる。
- ボックスシャドウと違い、画像の透明度を考慮する。
- 重い。
グレースケール
- 白黒化の度合いを設定できる。
色相
- 色相環の角度を設定できる。
反転
- 反転の度合いを設定できる。
不透明度
- 不透明度を設定できる。
- 不透明度はより安定した他のスタイルで変更できる。フィルターの不透明度は使うべきではない。
彩度
- 色の鮮やかさを設定できる。
セピア
- セピア調にする度合いを設定できる。
- 何のためにあるのか判然としない。
フィルターの複数設定デモ
- フィルターは複数個同時に設定できる。
- 個数が増えるほど結果は予期しづらくなる。
注意
- iOS 6.1 以上、Android 4.4 以上にのみ対応。
- 「スタイルが反映されようとされまいと UX には影響しない」ように使用すること。
-
フィルターは背景「だけ」にも適用できるが、やや手間。
バックドロップフィルターという専用の機能もあるが、現状 Safari しか対応していない。
応用例
See the Pen CSS(webkit) filters by Rıza Selçuk Saydam (@rss) on CodePen.