CSSで画像に様々なフィルター効果を指定できるfilterプロパティ。
画像をぼかしたり、明度や彩度を設定したり、様々なグラフィック効果を付けることができます。
そんなCSSで画像加工ができるfilterプロパティの各フィルター効果を一覧で表示し、各値を画面上で調整しながら効果を確認することができる「CSS Filter Preview」を作ってみたので紹介してみます。
CSS Filter Preview
フィルター一覧
画面上のドラッグエリアに画像ファイルをドラッグ＆ドロップすると、画面下にfilterプロパティで設定できるフィルター効果が一覧で表示されます。
各フィルター効果はスライダーで値を変えることができ、画像に対して効果の強弱を見ながら設定を変更させることが可能です。
調整したフィルター値は、スライダー下に表示されている［filter: フィルター名（値）］をコピーしてCSSに貼り付けて使用することができます。
一覧で表示するフィルター効果は以下です。
| ぼかし | blur |
|---|---|
| 明度 | brightness |
| 彩度 | saturatel |
| コントラスト | contrast |
| グレースケール | grayscale |
| セピア | sepia |
| 色相環 | hue-rotatel |
| 諧調の反転 | invert |
| 透明度 | opacity |
filterプロパティにある「ドロップシャドウ（drop-shadow）」だけはすこし系統が違うので、この「CSS Filter Preview」からは外して、画像に対するフィルター加工のみにしています。
フィルター複合設定
フィルター一覧の下には画像に複数のフィルター効果を指定できるジェネレーターも設置しています。
一覧で表示していた、ぼかし（blur）、明度（brightness）、彩度（saturatel）、コントラスト（contrast）、グレースケール（grayscale）、セピア（sepia）、色相環（hue-rotatel）、諧調の反転（invert）、透明度（opacity）の各フィルター機能を、プレビュー画像に対して複数指定することが可能になっています、
指定した各フィルター値は、スライダー下に表示されている［filter: フィルター名（値） フィルター名（値）］をコピーしてCSSにそのまま貼り付けて使用可能です。
CSSのfilterプロパティでは様々な効果によって画像調整ができるので、filterプロパティでどのような加工ができるのか遊んでみる感覚でもご使用ください。
CSSのfilterプロパティの設定の際にぜひ。。。