古いブラウザのサポートが終了したことで今まで導入をためらっていたスタイルも使えるようになってきました。前から使ってみたかったCSSの画像フィルタについて調べてみました。 CSS画像フィルタの使い方やできること、簡単にコードを出力できるジェネレータ、フィルタ効果をパッケージ化したライブラリをご紹介します。 CSSの画像フィルタとは 写真をモノクロにしたり明るく補正するにはPhotoshopなどの画像編集ソフトが必要でしたが、画像ファイルを編集することなく、CSSだけで調整することができるスタイルです。ブラウザごとにサポートが違うので使う場合は確認が必要です。 使うメリット 画像ごとの編集が不要になるため時間の短縮できる 後から見た目を一括で変更できる マウスオーバーなどで変化する画像を複数準備しなくても良い クライアント納品後もサイトの統一感が(ある程度)維持できる 基本的な使い方 使い方は
![【保存版】CSS画像フィルタの使い方とジェネレータまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/ab98b57e333f193e24c99fcb30a4ad04808b7331/height=288;version=1;width=512/http%3A%2F%2Fcozaru.net%2Fwp%2Fwp-content%2Fuploads%2F2016%2F04%2Feyecatch-5.jpg)