[fancy_box]海外デザインブログDesignModoで公開された「What Can CSS Filters Do for You?」の著者 Paula Borowskaより許可をもらい日本語訳しています。Thank you, @designmodo & @paula![/fancy_box]
CSSフィルタは特に目新しいものでもなく、もともとSVG（Scalable Vector Graphics）ファイルで採用されていた、さまざまなイメージエフェクトを適用するFilter Effectを起源としています。現在CSSフィルタはSVGファイルだけでなく、イメージ画像やテキストなどあらゆるところで適用されています。
CSSフィルタって何？
フィルタ機能は理解しにくいものではありません。Webサイトにおいては、ウェブページを読みこむタイミングですべてのコンテンツとスタイリングが自然と適用されます。CSSフィルタはすべてのスタイリングが終了した後、そしてウェブページが表示される前に適用されます。
フィルタはまずはじめにコンテンツのスナップショットを撮り、オリジナル画像の上に編集されたコンテンツを重ねます。これはカメラフィルタでも同じことが言えるでしょう。
読み込み時間に影響は？
はい、確かにあります。たとえばロゴなど小さいフィルタを適用したときは、特に問題なくページ読み込みされるでしょう。しかし、Webページ全体にフィルタを適用したり、複数のCSSフィルタが同ページで使われていると、Webサイトの読み込みは遅くなるでしょう。
CSSフィルタを使ってみよう。
フィルタ用記述はシンプルです。CSSファイルにフィルタプロパティ（たとえばgrayscaleなど）を追加しましょう。一緒に表示するパラミーターは、どの割合でフィルタを適用するのか表しています。実際に記述の仕方を見てみましょう。
[crayon]img { -webkit-filter: grayscale(100%); }
img { -webkit-filter: grayscale(50%); }
img { -webkit-filter: grayscale(10%); }[/crayon]
上のサムネイルイメージは、grayscaleプロパティを適用しています。もし完全なモノクロ写真とするならパラミーターを100%に設定しましょう。適用する割合を比較してみましょう。
複数フィルタもまとめて適用。
同時に複数のフィルタを適用することもできます。下記コードを参考にすると、まず白黒フィルタが100%で適用され、次に不透明度が50%で表示されます。フィルタの記述順は、特に複数のフィルタを組み合わせる場合に注意が必要です。フィルタには「,（コンマ）」が必要ない点もポイントです。
[crayon]img { -webkit-filter: grayscale(100%); }
img { -webkit-filter: grayscale(50%); }
img { -webkit-filter: grayscale(10%); }[/crayon]
フィルタ グレイスケール（Grayscale）
どのようなフィルタがあるか見ていきましょう。まずはサンプルで利用したgrayscaleフィルタで、モノクロ写真を再現します。
[crayon]img { -webkit-filter: grayscale(100%); }[/crayon]
フィルタ セピア（Sepia）
オールドファッションな写真エフェクトを、ブラウザ上でも簡単に再現します。grayscaleプロパティ同様、パラミーターで適用度を調整しましょう。
[crayon]img { -webkit-filter: sepia(100%); }[/crayon]
フィルタ 彩度（Saturation）
彩度フィルタを適用すると、よりビビッドで鮮やかなカラーリングを表現します。パラミーターは最大1000%までとなっています。
[crayon]img { -webkit-filter: saturate(1000%); }[/crayon]
フィルタ ぼかし（Blur）
Photoshopで作業するときにも見かけるぼかしエフェクト。px数をあげると、ぼかし具合がきつくなります。
[crayon]img { -webkit-filter: blur(5px); }[/crayon]
フィルタ 色調ローテーション（Hue-Rotate）
他のフィルタと異なり、角度を調整することでエレメントの色を変更します。カラーホイール（色相環）は0度から360度まで指定できます。
[crayon]img { -webkit-filter: hue-rotate(45deg); }
img { -webkit-filter: hue-rotate(90deg); }
img { -webkit-filter: hue-rotate(180deg); }[/crayon]
フィルタ 反転（Invert）
対象となるエレメントの色を反転させるフィルタで、たとえば黒は白に、赤はみどりに、という具合で色を編集します。
[crayon]img { -webkit-filter: invert(100%); }[/crayon]
フィルタ コントラスト（Contrast）
イメージ写真のコントラストをなくすと、写真は一色（通常ダークグレイ）になってしまいます。コントラストフィルタは、100%が初期設定値となっており、最高2500%まで設定できます。
[crayon]img { -webkit-filter: contrast(25%); }
img { -webkit-filter: contrast(2500%); }[/crayon]
フィルタ 明るさ（Brightness）
100%を基本として、エレメントの明るさを調整するフィルタ。パーセンテージを下げることで暗くし、上げることで明るくします。
[crayon]img { -webkit-filter: brightness(50%); }
img { -webkit-filter: brightness(150%); }[/crayon]
フィルタ ドロップシャドウ（Drop Shadow）
ボックスシャドウやテキストシャドウプロパティでは適用できない、複雑なシェイプのPNGファイルなどで活躍するフィルタ。すべての値をコンマなしで記述し、最初がX軸方向、次がY軸方向、次がぼかし具合、最後が適用カラーとなっています。
[crayon]img { -webkit-filter: drop-shadow(5px 5px 5px red); }[/crayon]
この記事で紹介したサンプルはCSSフィルタのすべてではありませんが、どのようなことが実現できるのか理解するきっかけによいでしょう。Photoshopなど編集ソフトを使ったようなエフェクトを、ブラウザ上で実現してくれる今後積極的に活用したい機能ではないでしょうか。
