CSSでおしゃれに画像を加工!CSS Filter 使用方法と例

どうも、僕です。

今回はCSS Filterについて解説したいと思います。

目次:

  • CSS Filterとは?
  • 対応ブラウザ
  • 使用方法
  • まとめ

CSS Filterとは?

ざっくり言うと、CSSで画像にフィルターがかけれるやつです。
Photoshopとかの画像処理ソフトを使用したことがある人ならすぐにピンとくると思いますが、わからない人のために説明すると、Instagramとかで写真を撮った後に、画像の見せ方を色々と選べるやつあると思いますが、あれです。
この説明でもわからない人は僕では手に負えないのでInstagramダウンロードして使用してみてください。

CCSS Filterの対応ブラウザ

そんなおしゃれなやつなら早速使ってみたいと思う方もいると思いますが、対応ブラウザを確認の上使用してください。
ちなみに今現在(2015.12)でもIEは対応していません。
※IEでもCSS Filterを使用できるようになるライブラリ「CSS-Filter-Polyfill」なるものがあるそうです。
使い方についてはhttp://memocarilog.info/jquery/7726で説明されていますので、使用したい方はご覧ください。

下記が主な対応ブラウザになります。

Chrome 27以降
Safari 6.1
Opera 23
iOS Safari 6.1
Android Browser 4.4
Blackberry Browser 10

CSS Filter ベンダープレフィックス

対応しているベンダープレフィックスは -webkit-だけらしいのでベンダープレフィックスは一つだけ書けばよさそうです。

CSS Filter 使用方法

では、実際の使用例を紹介していきます。

グレースケール(grayscale)

lakelake

セピア(sepia)

lakelake

彩度(saturate)

lakelake

色相変換(hue-rotate)

lakelake

ぼかし(blur)

lakelake

階調の反転(invert)

lakelake

明度(brightness)

lakelake

コントラスト(contrast)

lakelake

透明度(opacity)

lakelake

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

lakelake

まとめ

まだ、IEには対応していないCSS Filterですが他のブラウザでは使用できるので試しに使ってみてはいかがでしょうか?
画像の色味などの変更があった際に、Photoshopなどでわざわざ編集し直して、書き出して、圧縮してという手間がコードを少し変更するだけで省けるので使用してみる価値は十分あり便利だと思います。IEのご心配をされる方は、記事途中で紹介したライブラリを使用するか、Google Analyticsでページ訪問者のブラウザを調べてIEが少ないようであれば無視してもいいんではないでしょうか。

長くなりましたが、CSS Filterの説明を終わります。
今度時間があるときに、CSS Filterを実際使用しているWebサイトをまとめた記事でも書きます。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。