こんにちは、ティウェブ佐藤です。

みなさん、CSSセレクタのfilterプロパティはご存知でしょうか？

画像に対して使用することが多いプロパティですが、今回はどのような使い方ができるかご紹介します。

サンプルも付けておりますので、ぜひ参考にしてみてください。

filterプロパティとは

filterプロパティを使うと、画像の彩度、明度、コントラスなどを変更したり、ぼかしを加えたりすることができます。

例：カラーの画像をグレースケール化　img { filter: grayscale(100%); }

• 

• 

filterプロパティの関数は10種類！

10種類の関数がそれぞれどのような変化をするかご紹介させていただきます。
filterプロパティを反映させた画像の変化をアニメーションにしておりますので、元の画像との違いをご確認ください。

①ぼかす　img { filter: blur(5px); }

要素をぼかすことができます。
pxでぼかしの強さを指定できます。

②明るさを調整　img { filter: brightness(200%); }

要素の明るさを調整することができます。
100%が元の明るさになっているためそれを基準に調整してください。

③コントラストを調整　img { filter: contrast(200%); }

要素のコントラストを調整することができます。
100%が元のコントラストになっているためそれを基準に調整してください。

④グレースケール化　img { filter: grayscale(100%); }

要素をグレースケール化することができます。
0%が元の状態、100%で完全にモノクロの状態になります。

⑤色相を変更　img { filter: hue-rotate(360deg); }

要素の色相を変更できます。
元の画像の色相を基準にdegで指定できます。

⑥階調を変更　img { filter: invert(100%); }

要素の階調を変更できます。
0%が元の状態、100%で完全に階調を反転した状態になります。

⑦透明度を変更　img { filter: opacity(0%); }

要素の透明度を変更します。
100%が元の状態、0%で完全に透明化した状態になります。

⑧セピア調に変更　img { filter: sepia(100%); }

要素をセピア調に変更します。
0%が元の状態、100%で完全にセピアの状態になります。

⑨影を追加　img { filter: drop-shadow(5px 5px 10px #777); }

要素に影を追加します。（画像の外枠部分）
CSSのbox-shadowプロパティと同じようにfilter: drop-shadow(x方向 y方向 ぼかし半径 色);で指定できます。

⑩彩度を変更　img { filter: saturate(1000%); }

要素の彩度を変更します。
100%が元の彩度になっているためそれを基準に調整してください。

まとめ

filterプロパティについていかがだったでしょうか？

簡単なものであればPhotoshopなどで加工する手間は省けそうですよね。
個人的には画像にホバー効果を付けたい時に使用することが多いです。

今回1種類ずつのご紹介でしたが、複数のフィルターを組み合わせることもできるため、ぜひ色々と試してみてください。
※複数の関数を組み合わせた場合、宣言の順でフィルターが適用されます。