BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。

cssのfilterプロパティをご存知でしょうか?
filterプロパティとは、要素のコンテンツにフィルター効果を適用できるCSSの機能です。
色を変えたり、明度・コントラストを変えたりなど今まではIllustratorやPhotoshopで画像の修正をしていましたが、CSSだけで変更できるという便利な機能です。

今回は「filterで画像をぼかす・色を変える・白黒・セピアの設定方法」についてご紹介いたします。

filterプロパティでできること

blur(ぼかし量px) 要素をぼかす filter:blur(5px);
brightness(変化率%) 明度を変化させる filter:brightness(0.5);
contrast(変化率%) コントラストを変化させる filter:contrast(200%);
grayscale(変化率%) グレースケールにする filter:grayscale(50%);
hue-rotate(角度deg) 色相を変化させる filter:hue-rotate(90deg);
invert(変化率%) 色を反転させる filter:invert(75%);
saturate(変化率%) サイドを変化させる filter:saturate(30%);
sepia(変化率%) セピア色にする filter:sepia(60%);

See the Pen
VwpKMdo
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

複数のフィルター効果をつけることができる

filterプロパティに、半角スペースで区切って複数の値を指定すると、要素に二つ以上のフィルター効果をつけることができます。
下記サンプルは「ぼかし&セピア色」に変化させています。

See the Pen
mdWrBGe
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

画像にホバーしたときに効果をつける

filterプロパティはマウスホバーと一緒に使用する場面が多いです。

明度が上がる効果をつける

画像にマウスがホバーしたときに、明度を1.5倍にする効果を適用します。

See the Pen
XWMjeyx
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

IE10,IE11は非対応なので注意


過去のIEにはfilterプロパティに似た独自の機能が搭載されていました。
ただし、現在標準化されているfilterプロパティとは使い方も効果も違うので注意が必要です。
さらにIE10,IE11ではfilterプロパティが使用できません。
IEで表示したい場合は残念ですがfilterは諦めましょう。

まとめ

いかがでしたでしょうか?filterプロパティの使い方についてご紹介しました。

最近ではCSSの機能が増え、グラフィカルな表現が手軽にできるようになってきましたね。
IE11が未対応なのは使いづらい一面ですが、他のブラウザでは対応しているので、割り切って設定しましょう!