これでPhotoshopいらず！？CSSで色んな効果を表現できるfilter(フィルター)プロパティが便利！

フロントエンドエンジニアの所長、改めつーじーです！
突然ですが皆さん、Photoshopはお得意ですか？

そう、あの明度や彩度・色相・コントラスト等を調整していい感じの画像にしたつもりが、元の画像と比べるとそんなに変わっていない。みたいなことになりがちな、Photoshopです。
ですので、僕は苦手です。(使いこなせていないだけです。本当に素晴らしい製品です)

デザインもコーディングも一人でこなせるなら、どれだけ素晴らしいかと思いつつも
結局は弊社の優秀なデザイナーにお任せしちゃっています＼(^Д^)／ｵﾃｱｹﾞ

そんな同じような悩みを抱えている人に朗報！
CSSだけで画像などに簡単に効果を付けられる便利なプロパティが存在します！
意外と知られていない！？かもしれないので、実際の画像を見ながら紹介していきたいと思います(´ε｀ )

filter(フィルター)プロパティって？

画像の明度や彩度、色相、コントラスト等の調整が簡単に行える機能です！
画像と言いましたがvideoやiframeタグに使えば動画にも使用できますし、プロパティなのでもちろんCSSアニメーションと組み合わせることも可能！
使い方次第では、色々な表現の幅が広がります。
filter(フィルター)は元々SVGの仕様の一部だったそうですが、使い勝手が良すぎるのでCSSでも使えるようにしようぜ！ってことで始まったようです(´ε｀ )

実際の画像で見てみる

なんとこの便利すぎるfilter(フィルター)プロパティ。10個もあります。
では早速、10個全てのfilter(フィルター)効果を見ていきたいと思います！＼(^o^)／

明度(brightness)

これは言葉の通り、明るさを調整します。
パラメーターには0以上の数値が使え、%での指定も可(1 = 100%)
1で元々の画像。0で真っ黒。超過すればどんどん明るくなっていきます。

filter: brightness(1);

filter: brightness(0);

filter: brightness(2);

コントラスト(contrast)

コントラストとは、対照・対比という意味で、明暗の差を調整します。
パラメーターには0以上の数値が使え、%での指定も可(1 = 100%)
1で元々の画像。0で完全なグレー。超過すればどんどんくっきり！？としていきます。

filter: contrast(1);

filter: contrast(0);

filter: contrast(2);

グレースケール(grayscale)

モノクロ。とは厳密には違いますが、モノクロみたいな調整です。
パラメーターには0~1の数値が使え、%での指定も可(1 = 100%)
0で元々の画像。数字が大きくなるほどグレーに近づき、1でグレーになります。負の値は扱えません。

filter: grayscale(0);

filter: grayscale(0.5);

filter: grayscale(1);

彩度(saturate)

色の鮮やかさを調整します。
パラメーターには0以上の数値が使え、%での指定も可(1 = 100%)
1で元々の画像。0で無彩色。超過すればどんどん鮮やかになっていきます。

filter: saturate(1);

filter: saturate(0);

filter: saturate(2);

セピア(sepia)

セピアとは黒茶色のことを言い、古い写真のような色合いを加えることができます。
パラメーターには0~1の数値が使え、%での指定も可(1 = 100%)
0で元々の画像。数字が大きくなるほどセピアに近づき、1で完全にセピアになります。負の値は扱えません。

filter: sepia(0);

filter: sepia(0.5);

filter: sepia(1);

色相回転(hue-rotate)

このような画像を一度は見たことがあると思います。

これは色相環と呼ばれる、色相を環状に配置したものです。
色相回転では、角度を指定して色相環で配置された色相の調整を行います。
パラメーターには0deg以上の数値が使え、上限はありません。
360deg以上は1周目と重なるので、360以上の数値を使う意味はないでしょう。

filter: hue-rotate(0deg);

filter: hue-rotate(90deg);

filter: hue-rotate(180deg);

filter: hue-rotate(270deg);

階調反転(invert)

階調とは、色や明るさの濃淡の段階。階調が多ければ多いほど、色や明るさの変化をなめらかなグラデーションで表現でき、自然に近い描画ができる。

色や明るさの濃淡の段階？明度や彩度、コントラストとは何が違うの？
この辺になってくるとよくわかりませんが、実際の変化を見てみましょう！(^Д^)
パラメーターには0~1の数値が使え、%での指定も可(1 = 100%)
0で元々の画像。0.5でグレーになり、1で完全に反転。負の値は扱えません。

filter: invert(0);

filter: invert(0.5);

filter: invert(1);

ぼかし(blur)

わかりやすいの(ﾟ∀ﾟ)ｷﾀｺﾚ!!
その名の通り、ぼかしをかけていきます。
パラメーターには0px以上の数値が使え、上限はありません。(色んな単位で指定できますが%は不可)
0で元々の画像。超過すればどんどんぼかしが強くなっていきます。

filter: blur(0px);

filter: blur(5px);

filter: blur(10px);

透明度(opacity)

続けてわかりやすいの(ﾟ∀ﾟ)ｷﾀｺﾚ!!
こちらもその名の通り、透明度を調整します。
ただのopacityプロパティと何が違うの？って感じですが、何やら難しいことがゴニョゴニョして
filterでのopacityの方がより良いパフォーマンスが期待できるそうです！
パラメーターには0以上の数値が使え、%での指定も可(1 = 100%)
1で元々の画像。数字が小さくなるほど透明になり、0で完全に透明になります。

filter: opacity(1);

filter: opacity(0.5);

filter: opacity(0);

ドロップシャドウ(drop-shadow)

影のオフセット(基準点からの距離)やぼかし半径、色を指定してシャドウ効果をかけます。
もちろん0だと何も出てきません。

filter: drop-shadow(0 0 0 #000);

filter: drop-shadow(10px 10px 5px #000);

box-shadowプロパティと何が違うの？って感じですが、ここには明確な違いがあります。

オリジナル画像

box-shadow

filter: drop-shadow();

filter: drop-shadow();はpngの透過部分を無視して、純粋に見えている画像にのみ影をつけてくれるんです。
なにこれすごい。かっこいい。

何か使いたくなるfilter(フィルター)プロパティ

いかかでしたでしょうか？
僕自身、filter(フィルター)プロパティのことは前から知ってはいましたが特に使う機会もなく
今回、デザイン的な言葉の意味も踏まえて改めて調べてみました(´ε｀ )
確かに、いつ使うんだ？とか(使える人からすれば)Photoshopでよくね？って人もいるでしょう。
でも、CSSでできるからこそ夢とWEB上での表現の可能性が広がると思います＼(^o^)／
こういった技術先行でデザインやUI/UXを考えていくのも楽しいのかなと思ったりします。(デザイナーが)

以上、フロントエンドエンジニアのつーじーでした♪