すぐに使える!CSS3で画像を加工する「フィルタ」まとめ

2015年12月7日

すぐに使える!CSS3で画像を加工する「フィルタ」まとめ

デスクトップでもモバイルでも、CSSフィルタが標準で使えるブラウザが増えてきており、活用の範囲が大きくひろがっています。そこで今回は、CSSフィルタの主な種類とコードについてサンプルを交えてご紹介します。

ただし、最新ブラウザ以外では完全に対応しているとは言えません。
各ブラウザ用にベンダープレフィックスを付けて記述することをおすすめします。

ベンダープレフィックス

filter: brightness(50%);
-webkit-filter: brightness(50%); // for Google Chrome and Safari 
-moz-filter: brightness(50%); // for Firefox 
-o-filter: brightness(50%); // for Oper 
-ms-filter: brightness(50%); // for Internet Explorer

以下はサンプルです。
変化の度合いを確認してみてください。

・明るさ(0〜100%)

初期値が100%です。100%以上の値を指定することもできます。
0%を指定すると、真っ黒になります。

img { filter: brightness(50%); }
img { filter: brightness(100%); }
img { filter: brightness(150%); }

・彩度(0〜100%)

初期値が100%です。100%以上の値を指定することもできます。
0%を指定すると、グレースケール画像になります。

img { filter: saturate (50%); }
img { filter: saturate (100%); }
img { filter: saturate (150%); }

・色相(0〜360(deg)

角度値での指定です。360degで0degと同じ色相に戻ります。

img { filter: hue-rotate(0deg); }
img { filter: hue-rotate(120deg); }
img { filter: hue-rotate(240deg); }

グレースケール(0〜100%)

0%が初期値です。

img { filter: grayscale(0%); }
img { filter: grayscale(50%); }
img { filter: grayscale(100%); }

セピア(0〜100%)

0%が初期値です。

img { filter: sepia(0%); }
img { filter: sepia(50%); }
img { filter: sepia(100%); }

ぼかし(pxで指定)

0pxが初期値です。最大値はなく、10px以上を指定することもできます。

img { filter: blur(0px); }
img { filter: blur(5px); }
img { filter: blur(10px); }

反転(0〜100)

初期値が0%です。50%になると、グレー一色になります。

img { filter: invert(0%); }
img { filter: invert(40%); }
img { filter: invert(100%); }

コントラスト(0%〜)

100%が初期値です。最大値はないようです。

img { filter: contrast(50%); }
img { filter: contrast(100%); }
img { filter: contrast(150%); }

ドロップシャドウ(X軸 Y軸 ぼかし カラー)

img { filter: drop-shadow(5px 5px 5px gray); }

複数のフィルタをまとめて指定

複数のフィルタをかけたい場合は、スペースで間を区切って記述します。

filter: hue-rotate(90deg) drop-shadow(8px 8px 4px #888);

Photoshopを使うことなく画像の加工ができるCSSのフィルタ機能をまとめました。画像サイズを上げることがないのでモバイル端末でも実用的。ぜひ使ってみてください。