どうも、僕です。
今回は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-だけらしいのでベンダープレフィックスは一つだけ書けばよさそうです。
img{
-webkit-filter:sepia(100%); // for Google Chrome and Safari
filter:sepia(100%);
}
CSS Filter 使用方法
では、実際の使用例を紹介していきます。
グレースケール（grayscale）
img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
セピア（sepia）
img{
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
彩度（saturate）
img{
-webkit-filter: saturate(200%);
filter: saturate(200%);
}
色相変換（hue-rotate）
img{
filter: hue-rotate(90deg);
-webkit-filter: hue-rotate(90deg);
}
ぼかし（blur）
img {
-webkit-filter: blur(3px);
filter: blur(3px);
}
階調の反転（invert）
img{
-webkit-filter: invert(100%);
filter: invert(100%);
}
明度（brightness）
img{
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
}
コントラスト（contrast）
img{
-webkit-filter: contrast(150%);
filter: contrast(150%);
}
透明度（opacity）
img{
-webkit-filter: opacity(0.5);
filter: opacity(0.5);
}
ドロップシャドウ（drop-shadow）
img{
-webkit-filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.5));
filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.5));
}
まとめ
まだ、IEには対応していないCSS Filterですが他のブラウザでは使用できるので試しに使ってみてはいかがでしょうか？
画像の色味などの変更があった際に、Photoshopなどでわざわざ編集し直して、書き出して、圧縮してという手間がコードを少し変更するだけで省けるので使用してみる価値は十分あり便利だと思います。IEのご心配をされる方は、記事途中で紹介したライブラリを使用するか、Google Analyticsでページ訪問者のブラウザを調べてIEが少ないようであれば無視してもいいんではないでしょうか。
長くなりましたが、CSS Filterの説明を終わります。
今度時間があるときに、CSS Filterを実際使用しているWebサイトをまとめた記事でも書きます。
