Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい

明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です！

この記事で紹介するCSSフィルター効果でできることのサンプル！

フィルターはもともとSVG仕様の一部でしたが、使い勝手がよいので、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めました。CSSフィルターはとてもパワフルで、しかも信じられないほど簡単に使えます。CSSフィルターを使えば、画像のぼかし、明るさ・彩度の調整などのほかにもいろいろなことができます。CSSフィルターは単独で使っても、組み合わせて使ってもOKです。次の構文を使ってCSSにフィルターを追加できます。

filter: <filter-function> [<filter-function>]* | none

では、CSSフィルターを簡単に説明します。

明るさ

明るさ（Brightness）フィルターは、画像の明るさを調整します。パラメータとして、0以上の値が使えます。値を0％にすると、真っ黒になります。また、100％でオリジナルの画像を表示できます。100％以上の値を指定すると、画像をさらに明るくできます。たとえば、300％では画像が3倍の明るさになります。

img {
  filter: brightness(300%);
}

明るさフィルターをCodePenで実行した結果です。

コントラスト

コントラスト（Contrast）フィルターは、画像のコントラストを調整します。明るさと同じく、0以上の値が使えます。コントラストフィルターを使って、CSSで画像の明るい部分と暗い部分の差を調整できます。値を0％にするとグレー1色になります。コントラストを100％に設定するとオリジナル画像を表示でき、それよりも値を大きくするにつれ、画像のコントラストが大きくなります。

img {
  filter: contrast(0%);
}

コントラストフィルターをCodePenで実行した結果です。

グレースケール

グレースケール（Grayscale）フィルターはその名の通り、画像を「グレースケール」にできます。このフィルターでは、画像を少しずつグレーに近づけます。値が0％だと画像は変化せず、100％にすると完全にグレーになります。負の値は使えません。

img {
  filter: grayscale(100%);
}

グレースケールフィルターをCodePenで実行した結果です。

彩度

彩度（Saturate）フィルターは、画像の色の彩度を調整します。値を0％にすると画像の色彩がまったくなくなり（無彩色）、100％を超える値では画像が思い切り鮮やかになります。100％で、ちょうどオリジナル画像の彩度を表現します。このフィルターでは負の値は使えません。

img {
  filter: saturate(0%);
}

彩度フィルターをCodePenで実行した結果です。

セピア

セピア（Sepia）フィルターは、画像に古い写真さながらのセピアがかった色合いを加えます。セピアの度合いは、値のパーセンテージで決まります。0％でオリジナル画像と同じように出力され、100％で完全にセピアになります。

img {
  filter: sepia(100%);
}

セピアフィルターをCodePenで実行した結果です。

色相回転

色相回転（Hue-rotate）フィルターは、画像のすべての色に色相の回転を適用します。色を回転させる角度は、指定するパラメータの値で決まります。0degでは、画像は変化しません。このフィルターの値に上限はありませんが、360degで回転が一周し、それより大きい値の効果は一周目と重なります。つまり、90degと450degでは、効果は同じです。

img {
  filter: hue-rotate(90deg);
}

色相回転フィルターをCodePenで実行した結果です。

階調反転

階調反転（Invert）フィルターは、画像のすべての色の階調を反転します。反転の度合いは、設定するパラメータの値によって決まります。0％ではオリジナル画像のままで、100％で完全に反転します。

img {
  filter: invert(100%);
}

階調反転フィルターをCodePenで実行した結果です。

ぼかし

ぼかし（Blur）フィルターは、画像にガウシアンぼかしをかけ、色をにじませて境界の外側に広げます。半径のパラメータをフィルターに設定して、スクリーン上でブレンドするピクセル数を決定します。値が大きくなるほど、ぼかしの度合いが強くなります。このフィルターではいろいろな長さの単位で指定できますが、「％」での指定はできません。

img {
  filter: blur(1px);
}

ぼかしフィルターをCodePenで実行した結果です。

透明度

透明度（Opacity）フィルターでは、画像を半透明にします。100％で完全に不透明、0％で完全に透明になります。おなじみのopacityプロパティとよく似ていますが、1点、パフォーマンスに違いがあります。filterプロパティでは、ブラウザーによってハードウェアアクセラレーションを使用するので、より良いパフォーマンスが期待できます。

img {
  filter: opacity(75%);
}

透明度フィルターをCodePenで実行した結果です。

ドロップシャドウ

ドロップシャドウ（Drop Shadow）フィルターは、文字通り画像にドロップシャドウ効果をかけます。基本的に、入力画像の特定の色のアルファマスクのぼかし、オフセットを指定するというものです。このプロパティでは、x軸オフセット、y軸オフセット、色の指定が必要となります。さらにぼかし半径の値を指定して、影をはっきりさせたりぼかしたりもできます。

img {
  filter: drop-shadow(5px 5px 10px #666);
}

ドロップシャドウフィルターをCodePenで実行した結果です。

Url()

ここまで説明してきたフィルターはどれも、とても役に立ちますが、どちらかというと一般的なものです。プロジェクトによっては、もっと特殊なフィルターが必要な場合もあります。ニーズに合うフィルターが見つからない場合、SVGフィルターを自作しidをurl()フィルターで参照して使用できます。

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="greenish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0."/>
      <feFuncB type="linear" slope="2" intercept="-0.25"/>
    </feComponentTransfer>
  </filter>
  <filter id="bluish">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.1"/>
      <feFuncB type="linear" slope="2" intercept="0"/>
    </feComponentTransfer>
  </filter>
</svg>

<style type="text/css">
img {
  filter: url('#greenish');
}
</style>

以下はurl()を使ったSVGのCSSフィルターをCodePenで実行した結果です。

フィルターの組み合わせとアニメーション

複数のフィルターを組み合わせて、いろいろな効果を演出できます。たいていの場合、フィルターの順序が問題になることはあまりありませんが、フィルターはCSSで書かれている順に適用され、中にはほかのフィルターをオーバーライドするものもあります。たとえば、グレースケールフィルターの後にセピアフィルターを使用すると、画像はセピアになりますが、セピアフィルターの後にグレースケールフィルターを使用すると、画像はグレースケールになります。

フィルターではアニメーションもできます。アニメーションをうまく使うと、とても面白い効果を演出できます。一例として、次のコードを参考にしてください。

img {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  ....
  96% {
    filter: brightness(400%);
  }
}

このコードでは、アニメーション中に複数のフィルターをいろいろな値で適用しています。CodePenで実行した結果です。

キーフレーム50％のときに、完全なセピアで明るさとコントラストを急に変え、ドラマチックな効果を演出しています。このコンセプトをよりよく理解する一番の方法は、フィルターでのアニメーションを実際に試してみることです！

その他

フィルターで要素のボックスモデルの外側に効果を付けられるとはいえ、要素のボックスモデルの形状に影響するわけではありません。フィルターは、background（背景）、border（枠線）、text-decoration（テキストの装飾）など、ターゲット要素のすべての部分に影響することをお忘れなく。フィルターはvideo（動画）やiframe（インラインフレーム）にも適用できます。次のデモでコンセプトを説明します。ほかにも、Bennett Feely’s websiteにもいろいろな例があります。

説明してきたフィルターはどれもすごいパフォーマンスを発揮します（ハードウェアアクセラレーションを使用しないブラウザでぼかしフィルターが遅くなる場合があることを除けば）。url()フィルターについては、適用するSVGフィルターによってパフォーマンスに違いが出ます。

主要なブラウザーはすべて、filterプロパティに対応しています。ChromeとOperaでfilterプロパティを動作させるには、プレフィックスを付けることが必要です。IEはフィルターに対応していませんが、Edgeは一部に対応しています。「一部」とは、「url()を除くすべてのフィルター」という意味です。

最後に

この記事で技術者の皆さんが、CSSフィルターでいますぐできるたくさんのことを紹介しました。CSSフィルターは、ブラウザーの対応状況が良好で、使いやすく、Canvasベースの方法に比べてパフォーマンスが優れています。とりわけ、1つ前のセクションで触れた通り、ほかの要素と同じくvideo（動画）にも適用できます。

（原文：CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!）

［翻訳：新岡祐佳子］
［編集：Livit］