こんにちは！デザイナーのasaです。

ここ最近新しいcssがどんどん出てきて、もうcssだけで何でも実装できるんでは？といった勢いですね。
そんな今回は「そこまで新しくないけどIEのサポート切れて使いやすくなったよね」といったfilterプロパティを紹介します。

filterプロパティとは

cssのfilterは、画像などの要素にぼかしや彩度、明度といったフィルターをかけることができるプロパティです。
簡単な加工ならわざわざphotoshopで編集しなくてもcssで出来ちゃいます。

filterプロパティの種類

filterプロパティは10種類の関数が用意されてます。

filterプロパティの使用例

こちらの画像を使ってそれぞれのfilterプロパティの使用例を紹介します。
なお関数の引数についてはパーセント（10%や60%など）もしくは10進数の値（0.1や0.6など）で指定可能です。

blur

blurは要素のガウスぼかしを適用します。ぼかしの大きさは「px」や「em」で指定します。

filter: blur(5px);

brightness

brightnessは明るさ、暗さを調整します。
0が最も暗く（真っ黒）、1が基準（元画像）で、1を超えると明るくなります。

filter: brightness(0.5);

filter: brightness(1.5);

contrast

要素のコントラストを調整します。
0が最もコントラストが低く（グレー）、1が基準（元画像）で、1を超えるとコントラストが高くなります。

filter: contrast(0.5);

filter: contrast(1.5);

drop-shadow

指定した要素の輪郭に沿ってドロップシャドウを適用します。
引数は4つで、順に「X方向の距離」「Y方向の距離」「ぼかしのサイズ」「シャドウの色」となります。
box-shadowとよく似ていますが、box-shadowの場合オブジェクト自体に影がつきますが、drop-shadowはオブジェクトの中身を見て影がつきます。

以下がbox-shadowとdrop-shadowの違いです。

box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3);

filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));

grayscale

grayscaleは画像をグレースケールに変換します。初期値は0で、1で完全なグレースケールとなります。

filter: grayscale(0.5);

filter: grayscale(1);

hue-rotate

hue-rotateは色相の角度を回転させます。角度の単位は「deg」で指定します。

filter: hue-rotate(45deg);

filter: hue-rotate(180deg);

invert

invertは色の階調を反転します。0が基準（元画像）で1で完全に反転されます。

filter: invert(0.3);

filter: invert(0.8);

opacity

opacityは要素の透過率を調整します。0で完全な透明、1が基準（元画像）となります。

filter: opacity(0.3);

filter: opacity(0.7);

saturate

saturateは要素の彩度を調整します。
0が最も彩度が低く、1が基準（元画像）で、1を超えると彩度が高くなります。

filter: saturate(0.5);

filter: saturate(1.5);

sepia

sepiaは画像をセピア調にします。0が基準（元画像）で1で完全にセピアになります。

filter: sepia(0.5);

filter: sepia(1);

filterプロパティ応用編

filterプロパティは複数掛け合わせることもできます。
こちらの画像をPCの方はマウスホバー、スマホの方はタップしてください。

 
使用しているfilterプロパティは「grayscale」と「drop-shadow」です。

img {
  filter: grayscale(1);
  transform: translate(20px,20px) scale(1);
  transition: 0.3s;
}
img:hover {
  filter: grayscale(0) drop-shadow(5px 5px 5px rgba(0,0,0,0.15));
  transform: translate(0,0) scale(1.1);
}

マウスホバー時（タップ時）にグレースケールからカラーにし、さらにドロップシャドウをつけてみました。もちろん使用している写真は1枚です。
こんな感じでちょっとしたアクセントをつけることもできるので、いろいろ試してみてはどうでしょうか。

まとめ

いかがだったでしょうか？cssだけでもできることがどんどん増えています。今後も新しい機能が実装されていくと思うので、また機会があれば紹介していきます。

また弊社ではWEBやDTPの制作からマーケティングまでワンストップで対応していますので、お気軽にお問い合わせください。