目次
今まではIllustratorやPhotoshopなどで調整していた明度や彩度の調整から、ぼかしやグレースケール化までCSSで実装可能です。
しかも動画にも使えるなんて便利すぎる！
CSS Filter Effectsこの記事で紹介するCSSフィルター効果でできることのサンプル！
filterはもともとSVG仕様の一部でしたが、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めたんですね。
CSSフィルターは大胆に信じられないほど簡単に使えます。サンプルも用意しているので、コピペして使ってくださいね。
明るさ：brightness()
明るさ（Brightness）フィルターは、画像の明るさを調整します。
パラメータとして、0以上の値が使えます。
100％ → 原色
0％〜調整でこの画像の明るさを調整できます。
100％以上の値を指定すれば、原色の明るさを超えて画像をさらに明るくできます。
例えば、200％で指定すれば画像が2倍の明るさになります。
{
filter: brightness(200%);
}
| 指定なし | filter: brightness(200%); |
|---|---|
 |
|
コントラスト：contrast()
コントラスト（Contrast）フィルターは、画像のコントラストを調整します。
明るさと同じく、0以上の値が使えます。
コントラストフィルターを使えば、CSSで画像の明るい部分と暗い部分の差を調整できます。
100％ → 原色
100％以上の値を指定すれば、その分の画像のコントラストが大きくなります。
{
filter: contrast(0%);
}
| 指定なし | filter: contrast(0%); |
|---|---|
|
|
グレースケール：grayscale()
グレースケール（Grayscale）フィルターは、画像を「グレースケール」にします。
このフィルターでは、画像を少しずつグレーに近づけます。
100％ → 完全なグレー
負の値は使えません。
{
filter: grayscale(100%);
}
| 指定なし | filter: grayscale(100%); |
|---|---|
|
|
彩度：saturate()
彩度（Saturate）フィルターは、画像の色の彩度を調整します。
100％ → 原色
100％以上の値を指定すると画像が思い切り鮮やかになります。
{
filter: saturate(0%);
}
| 指定なし | filter: saturate(0%); |
|---|---|
|
|
セピア：sepia()
セピア（Sepia）フィルターは、画像に古い写真のようなセピアがかった色合いを加えます。
セピアの度合いは、値のパーセンテージで決まります。
100％ → 完全なセピア
{
filter: sepia(100%);
}
| 指定なし | filter: sepia(100%); |
|---|---|
|
|
色相反転：hue-rotate()
色相回転（Hue-rotate）フィルターは、画像のすべての色に色相の回転を適用します。
色を回転させる角度は、指定するパラメータの値で決まります。
180deg → 反転色
このフィルターの値に上限はありません。ただし、360degで回転が一周するので原色に戻ります。
それより大きい値の効果は二周目となるだけです。つまり、90degと450degの効果は同じになります。
{
filter: hue-rotate(90deg);
}
| 指定なし | filter: hue-rotate(90deg); |
|---|---|
|
|
階調反転： invert()
階調反転（Invert）フィルターは、画像のすべての色の階調を反転します。
反転の度合いは、設定するパラメータの値によって決まります。
100％ → 反転色
{
filter: invert(100%);
}
| 指定なし | filter: invert(100%); |
|---|---|
|
|
ぼかし:blur()
ぼかし（Blur）フィルターは、画像にぼかしをかけ、色をにじませて境界の外側に広げます。
半径のパラメータをフィルターに設定して、スクリーン上でブレンドするピクセル数を決定します。
1px → ややぼかし
値が大きくなるほど、ぼかしの度合いが強くなります。
このフィルターではいろいろな長さの単位で指定できます。
単位が大きくなるとほぼ見えない状態にもなります。
「％」の指定はできません。
{
filter: blur(1px);
}
| 指定なし | filter: blur(1px); |
|---|---|
|
|
透明度：opacity()
透明度（Opacity）フィルターでは、画像を半透明にします。
100％ → 不透明
opacityプロパティとよく似ていますが、パフォーマンスに若干の違いがあります。
filterプロパティの場合は、ブラウザーによってハードウェアアクセラレーションを使用するので、より良いパフォーマンス効果が期待できます。
{
filter: opacity(75%);
}
| 指定なし | filter: opacity(75%); |
|---|---|
|
|
ドロップシャドウ：drop-shadow()
ドロップシャドウ（Drop Shadow）フィルターは、画像にドロップシャドウ効果をかけます。
基本的に、入力画像の特定の色のアルファマスクのぼかし、オフセットを指定するというものです。
このプロパティでは、drop-shadow（x軸オフセット y軸オフセット ぼかし半径の値 色の指定）が必要となります。
調整をすれば影をはっきりさせたりぼかしたりすることもできます。
{
filter: drop-shadow(5px 5px 10px #666);
}
| 指定なし | filter: drop-shadow(5px 5px 10px #666); |
|---|---|
|
|
フィルターの組み合わせとアニメーション
複数のフィルターを組み合わせれば、様々な効果を演出することができます。
たいていの場合、フィルターの順序が問題になることはあまりありませんが、フィルターはCSSで書かれている順に適用され、中にはほかのフィルターをオーバーライドするものもあります。
たとえば、
の順に指定すると、画像はセピアになります。
の順に指定すると、画像はグレースケールになります。
フィルターではアニメーションでも利用できます。
アニメーションを使えば、注目を惹くようなとても面白い効果を演出できます。
一例として、次のコードを参考にしてください。
{
animation: hogehoge 3s infinite;
}
@keyframes hogehoge {
0% {
filter: brightness(20%);
}
48% {
filter: brightness(20%);
}
50% {
filter: sepia(1) contrast(2) brightness(200%);
}
....
96% {
filter: brightness(400%);
}
}
| 指定なし | 複数のアニメーション |
|---|---|
|
|
CSS Filtersの動作環境 〜 IE以外は動く
最後にCSS Filtersの動作環境について紹介します。
モバイルを含む最近のモダンブラウザー（MS Edge、Chrome、Firefox、Safari）は標準対応しています。
ただし、唯一使えないのが、Internet Explorerですね。参照：「Can I use」
2015年頃のSafariやAndroid 4.4の標準ブラウザまではベンダープレフィックスが必要になるので、
-webkit-だけは付与しておいた方がいいですね（-moz-や-ms-は必要ありません）。
終わりに
いかがでしたでしょうか？
今回は「CSSで画像を白黒・セピア・ぼかし技術！filterで実現可能」について記事を書きました。最近のブラウザではCSSの機能が増え、グラフィカルな表現が手軽にできるようになってきました。
2025年までサポートが続くと言われるInternet Explorer 11がCSS Filtersに未対応のためプロジェクトによっては使いづらい一面があると思いますが、選択肢の一つとして演出の引き出しに入れてみてはいかがでしょうか。
