【保存版】CSS画像フィルタの使い方とジェネレータまとめ

古いブラウザのサポートが終了したことで今まで導入をためらっていたスタイルも使えるようになってきました。前から使ってみたかったCSSの画像フィルタについて調べてみました。
CSS画像フィルタの使い方やできること、簡単にコードを出力できるジェネレータ、フィルタ効果をパッケージ化したライブラリをご紹介します。

CSSの画像フィルタとは

写真をモノクロにしたり明るく補正するにはPhotoshopなどの画像編集ソフトが必要でしたが、画像ファイルを編集することなく、CSSだけで調整することができるスタイルです。ブラウザごとにサポートが違うので使う場合は確認が必要です。

使うメリット

  • 画像ごとの編集が不要になるため時間の短縮できる
  • 後から見た目を一括で変更できる
  • マウスオーバーなどで変化する画像を複数準備しなくても良い
  • クライアント納品後もサイトの統一感が(ある程度)維持できる

基本的な使い方


使い方は要素に対してスタイルを記述するだけ。webkitのベンダープレフィックスは主にSafari用ですがブラウザが対応したら取ってしまって良いです。
以下のスタイルサンプルは上画像と同じファイルにフィルタを適用した表示です。

brightness(明るさ)


0〜100%(初期値)〜それ以上の数値を指定することで、画像の明るさを変更することができます。100%より小さいと元画像より暗く、100%より大きいと元画像より明るくなります。

-webkit-filter: brightness(50%);
filter: brightness(50%);

contrast(コントラスト)


0〜100%(初期値)〜それ以上の数値の数値を指定することで、画像のコントラストを変更することができます。100%より小さいとコントラストを弱く、100%より大きいとコントラストを強くします。

-webkit-filter: contrast(200%);
filter: contrast(200%);

saturate(彩度)


0〜100%(初期値)〜それ以上の数値を指定することで、画像の表示の彩度を変更することができます。100%より小さいとサイドを低く、100%より大きいと彩度を高くします。

-webkit-filter: saturate(0%);
filter: saturate(0%);

grayscale(グレースケール)


0(初期値)〜100%の数値を指定することで、画像の表示をグレースケールに変換することができます。

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

sepia(セピア)


0(初期値)〜100%の数値を指定することで、画像の表示をセピア調に変換することができます。

-webkit-filter: sepia(100%);
filter: sepia(100%);

hue-rotate(色相回転)


0(初期値)〜360degを指定することで、画像の色相を変更することができます。360degは一週回って0degと同じ色相になります。

-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);

invert(階調反転)


0(初期値)〜100%の数値を指定することで、画像の階調を反転させることができます。

-webkit-filter: invert(100%);
filter: invert(100%);

opacity(透過度)


0〜100%(初期値)の数値を指定することで、画像の透過度を変更することができます。

-webkit-filter: opacity(50%);
filter: opacity(50%);

blur(ぼかし)


0(初期値)〜任意の値pxを指定することで、画像をぼかすことができます。

-webkit-filter: blur(3px);
filter: blur(3px);

drop-shadow(影)


box-shadowと指定の仕方でドロップシャドウが付きます。

-webkit-filter: drop-shadow(0px 0px 10px #000);
filter: drop-shadow(0px 0px 10px #000);

複数の効果を設定する方法


filter:の後に、半角スペースで区切って付け足すことで、複数の効果を設定できます。

-webkit-filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);

画像フィルタジェネレータ

複数の効果を設定する場合、コードだけで出力後のエフェクトをイメージするのは困難です。そんな時はブラウザ上でエフェクトを確認しながらCSSコードを作ることができるジェネレータ使うと簡単です。

cssFilters.co

コントラストや明るさなどを調整し、CSSコードで出力してくれます。上部にプリセットパターンがあるのが便利です。
cssFilters.co

CSSReflex

各エフェクトの下のスライダーを使用して見た目とCSSコードを表示してくれます。直感的でわかりやすい操作なのでおすすめです。
CSSReflex

CSSイメージフィルタライブラリ

フィルタを組み合わせて作りこんだCSSのライブラリです。

CSSGram

Instagramの人気の高いフィルターを再現することを目指しているライブラリだそうです。
サイトにライブラリをアップロードして、class名を指定するだけで使えます。
CSSGram

colofilter.css

カラフルな「ダブルトーン」エフェクト追加できるライブラリ。強いインパクトがあります。
現状マイクロソフトのブラウザとの互換性が無いようです。 colofilter.css

CSSCO

こちらも簡単に追加できるレンズフィルターのライブラリです。
マイクロソフトのブラウザとSafariが部分的にサポートされています。
CSSCO

jQueryを使った画像フィルタ

jQueryを使ってノード操作を加えることでCSSだけを使うよりも、さらに面白い表現や便利な使い方ができます。

tiltShift.js

ミニチュア風の表現で人気のTiltShift効果を追加できます。
tiltShift.js

Philter

HTMLのカスタムデータ属性(data-)でフィルター効果指定することがでるプラグインです。
通常はモノクロだけど、マウスオーバーするとカラーになる、ということもカスタムデータ属性だけで設定できます。
Philter

まとめ

すこし長くなりましたがいかがでしょうか。Photoshopほどの表現はできないまでも、上手く使えば効率的なサイト構築や統一感を維持した運営ができるのではないか思います。
しかし、一括で同じフィルタがかかるため、写真によっては明るすぎて白飛びしてしまう写真なども出てきそうなので、元写真に最低限の補正をした上でCSS画像フィルターを適用するのが現実的かなと思います。
コンテンツと見た目を分離するHTMLとCSSの関係のように、今後はこのフィルタを使うのが主流になるのはないでしょうか。

最後までお読み頂き、ありがとうございます。
この記事の内容が役に立ったと思ったら、ソーシャルメディアで共有してね。

Google+  B! はてブ  Pocket 

SNSでもご購読できます。