【超簡単】CSSのfilterプロパティで色を変更する方法

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

画像編集をせずにサイト上で画像の色を変更できたらと思ったことはありませんか？

コーディングをしているときに、あとから「画像の色を少し変更したい」と後付けで要求があるときもあり、そんな時に画像編集をするよりもCSSで変更できた方が早いと思ったので探してみました。

そしたらありました！

それはfilterプロパティです。

今回はfilterプロパティでできることをまとめてみたいと思いますので、ぜひ参考にしていただけたら嬉しいです。

filterプロパティとは？

filterプロパティは、要素のコンテンツにフィルター効果を適用できるCSSの機能です。

比較的簡単に使えて、視覚的効果が大きいため、重宝されるプロパティです。

ただ、IE11、IE10では対応していないため、注意が必要です！

filterプロパティ使い方

img{
  filter:フィルターの種類(変化量);
}

filterでぼかし効果をつける

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

filterで明るさを変更する

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

filterで彩度を変更する

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

filterでモノクロに変更する

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

filterでセピアに変更する

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

filterで色相環を回転する

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

filterで画像の色を反転する

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

filterでコントラストを変更する

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

filterで透明度を変更する

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

filterでドロップシャドウをつける

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

まとめ

いかがでしたでしょうか？

filterプロパティについて苦手意識をなくすことができたら嬉しいです。

今回紹介した内容の応用としてホバーした際にもfilterを使うことで、色の変更やぼかしなどをつけることができるので、覚えておいて損はないプロパティになります。

参考になりましたら幸いです。

分からないことなどありましたら、お問い合わせフォームよりお気軽にご相談ください！