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

2016/08/03

Gajendar Singh

0

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

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

この記事で紹介する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で回転が一周し、それより大きい値の効果は一周目と重なります。つまり、90deg450degでは、効果は同じです。

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

Copyright © 2016, Gajendar Singh All Rights Reserved.

Gajendar Singh

Gajendar Singh

Web開発で新しいことを吸収するのに熱心なWeb開発者です。5年にわたりWebサイトの開発を手がけていて、ときおり、おススメのトピックについての記事も執筆しています。

Loading...