最近のCSSでは新しいプロパティがどんどん登場し、それに伴ってウェブデザインの表現もとても豊かになってきています。今回はその中の一つである「filter」プロパティについてまとめていきたいと思います。   このfilterプロパティを使うと、画像やSVGデータに対して色調補正やグラフィック効果を与えることができます。イメージでいうとPhotoshopのフィルター効果に近いかもしれません。使いどころとしては、イメージ画像の見た目を調整したり、要素に対してグラフィックなデザインを加えるときに便利ですね。   filterプロパティの値にはそれぞれ以下で紹介する関数が使えます。引数に値が入るので、この値で効果の強弱を調整していく形になります。それではサンプルと合わせて掲載していますので、順に見ていきましょう。（IE11などの古いブラウザへの対応をしていないため、モダンブラウザで確認ください）  

【brightness()】明度を調整

「brightness()」では明るくしたり、暗くしたりと明度を調整できます。入力値は正の数で負の数を入れることはできません。「0」を指定すると真っ暗になり、「1」がデフォルトと同じ明度になります。暗くしたい場合には1未満で小数の値を、明るくしたい場合には1以上の値を指定します。

 

【saturate()】彩度を調整

イメージの鮮やかさを調整するときには「saturate()」を使います。入力値はパーセントで指定し、「0%」の場合にはモノクロに、「100%」でデフォルトの鮮やかさになります。くすませたい場合には100%から下げていき、より鮮やかにしたい場合には100%以上の値を指定します。

 

【hue-rotate()】色調を変更

色相環に合わせて色味を変更したいときに使うのが「hue-rotate()」です。入力値は「deg」を用いた角度の指定で、「0deg」がデフォルトの色味で、マイナスに傾けていくと紫から青みがかかった色調に、プラス方向に傾けていくと緑から青みがかかった色調になり、360degで一周した場合には初期の色調に戻ります。

 

【grayscale()】グレースケールへ変換

イメージを白黒にしたい場合にはグレースケールに変換できる「grayscale()」を使います。入力値は0%〜100%の間でパーセント指定となります。「0%」の場合は初期表示となり、数値をあげていくにつれてグレースケールに近づいていき「100%」にすると完全に白黒となります。

 

【sepia()】セピア調へ変換

「sepia()」を使うと茶色味がかかった色調に変更することができます。入力値は先ほどのグレースケールと同じで0%〜100%の間でパーセント指定となります。「0%」の場合は初期表示となり、数値をあげていくにつれてセピアの効果が強くなり「100%」にすると完全なセピア調となります。

 

【invert()】ネガポジ反転

写真のネガのように色味を反転させることができるのが「invert()」です。白色は黒色に、暗い赤は明るい青になるというような感じです。こちらも入力値は0%〜100%の間でパーセント指定となります。「0%」の場合は初期表示となり、数値をあげていくにつれて反転の色調に変化していき、「50%」ではグレーの塗りつぶしに、「100%」にすると完全に色調が反転するようになります。

 

【opacity()】透明度を変更

CSSではおなじみですが透明度を変更できる「opacity()」です。こちらはopacityプロパティと同じ効果を得ることができます。こちらも入力値は0%〜100%の間でパーセント指定となります。デフォルトは「100%」で通常通りの表示となり、下がっていくにつれて透明度が上がっていき「0%」完全に透明となり見えなくなります。

 

【blur()】ぼかし効果を与える

「blur()」では画像ピクセルをガウス状にぼかし効果を与えることができます。入力値はpxで指定し、正の値のみとなっています。この入力した値が適用時の半径となり大きくなるとよりぼかしが強くなっていきます。デフォルトでは0pxで通常表示になり、数値を上げていく事でぼかし効果が適用されていきます。

 

【drop-shadow()】ドロップシャドウ効果を与える

「drop-shadow()」を使うと画像や要素に対してのドロップシャドウを与えることができます。こちらについては過去記事「CSSのfilterプロパティにあるdrop-shadow()で画像や要素にドロップシャドウ効果をつける」 でも紹介していますが、box-shadowプロパティと異なり画像や要素の透明部分も考慮される点が大きな違いです。指定方法ですが値の最初から、X軸方向へのオフセット、Y軸方向へのオフセット、シャドウの距離、シャドウの色というように4つを半角スペースで区切って指定します。

  以上が現時点で用意されているCSSのfilterプロパティで指定できる効果となります。ちなみにですが、これらの値は複数まとめて指定することもできます。例えば下記の場合ですと、明るくして鮮やかさも上げているようなイメージになります。

img {
  filter: brightness(105%) saturate(110%);
}

  また、SVGの場合には下記のようにURL指定することで外部リソースに対してのフィルター効果を取得して適用させることができます。

.svg {
  filter: url(example.svg#filter_ID)
}

  そのほか、注意したい点として、filterプロパティはIE11などの古いブラウザでは対応していないので気をつけましょう。対応させたい場合には下記のようにポリフィルを読み込む必要があります。 【Schepp / CSS-Filters-Polyfill】 https://github.com/Schepp/CSS-Filters-Polyfill  

---

  今回はCSSのfilterプロパティを使ってイメージに対して色調補正やグラフィック効果を与えていく方法を見てきました。古いブラウザへの対応問題もありますが、IE11の利用を考慮しなくてもいい場合には積極的に使っていきたい機能ですよね。出来るだけPhotoshopなどのアプリケーション内でレタッチとして色調補正は完了させておいたほうがいいかと思いますが、CSSで扱うことでアニメーションと組み合わせたり、より豊かなデザイン表現が可能になるのではないでしょうか。