CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる
CSS3 のfilter で加工ソフトなしで画像に効果を加えてみる
CSS3 のfilter を試してみました。
サンプル
画像を選択して、input "range"で、filter の効果を付与できます。filter の効果を重ねることもできます。
対応ブラウザ
CanIuseで確認すると、現時点（2015年07月03日）では、Firefox 以外はベンダープリフィックスが必要のようです。
Can I use... Support tables for HTML5, CSS3, etc
対応しているベンダープリフィックスは、-webkit- のみのようです。 IE は対応していません。 したがって、以下のように2つ指定してあげれば良さそうです。
XX {
-webkit-filter: YY();
filter: YY();
}
使用できる効果
使用できる効果は約10 種類あるようです。
grayscale（グレースケール）
0（初期値） - 100[%] を指定してあげることで、画像の表示をグレースケールに変換することができます。
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
sepia（セピア）
0（初期値） - 100[%] を指定してあげることで、画像の表示をセピア調に変換することができます。
-webkit-filter: sepia(100%);
filter: sepia(100%);
saturate（彩度）
0 - 100（初期値）[%] を指定してあげることで、画像の表示の彩度（色の鮮やかさ）を変更することができます。
-webkit-filter: saturate(0%);
filter: saturate(0%);
hue-rotate（色相回転）
0（初期値） - 360[deg] を指定してあげることで、画像の表示の色相を変更することができます。
360deg も指定することができるが、0deg と同じなので元の色相になります。
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
invert（階調反転）
0（初期値） - 100[%] を指定してあげることで、画像の表示の階調を反転させることができます。
-webkit-filter: invert(100%);
filter: invert(100%);
opacity（透過度）
0 - 100（初期値）[%] を指定してあげることで、画像の表示の透過度を変更することができます。
CSS3 のopacity: XX%;とほぼ同じような効果です。
-webkit-filter: opacity(0%);
filter: opacity(0%);
brightness（明るさ）
0 - 100（初期値）[%] を指定してあげることで、画像の表示の明るさを変更することができます。
元画像より暗くしたい場合に使えます。brightness(0%) で画像は真っ黒になります。
-webkit-filter: brightness(0%);
filter: brightness(0%);
contrast（コントラスト）
0 - 100（初期値）[%] を指定してあげることで、画像の表示のコントラストを変更することができます。
明るさ同様、コントラストを下げたい場合に使用できます。
-webkit-filter: contrast(0%);
filter: contrast(0%);
blur（ぼかし）
0（初期値） - 任意の値[px] を指定してあげることで、画像の表示をぼかすことができます。
-webkit-filter: blur(3px);
filter: blur(3px);
drop-shadow（影）
CSS3 のbox-shadow と同じようです。
-webkit-filter: drop-shadow(0px 0px 10px #000);
filter: drop-shadow(0px 0px 10px #000);
複数効果
filter: の後に、複数の効果（関数）を追加することで、複数の効果を付与できます。
例えば、以下のようにできます。
-webkit-filter: grayscale(50%) sepia(50%);
filter: grayscale(50%) sepia(50%);
※ただし、grayscale() と sepia()は、行列計算を行っているので、 厳密に行うならば順番を考慮する必要があると思います。
参考リンク
