PAGETOP

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

2015年12月7日

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

デスクトップでもモバイルでも、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のフィルタ機能をまとめました。画像サイズを上げることがないのでモバイル端末でも実用的。ぜひ使ってみてください。

CSSについて, WEBデザイン, 写真撮影・カメラ