フィルタ

The CSS Podcast - 023: Filters

画像の上に、わずかに不透明なすりガラスのエフェクトを適用した要素を作成するとします。テキストは画像ではなく、ライブテキストである必要があります。そのためには、

CSS フィルタと backdrop-filter を組み合わせることで、必要なエフェクトをリアルタイムで適用してぼかしを入れることができます。ぼかしと不透明度は、利用可能なフィルタの 2 つです。ここでは、フィルタの機能と使用方法について簡単に説明します。

filter プロパティ

Browser Support

  • Chrome: 53.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 9.1.

Source

次のフィルタの 1 つ以上を filter の値として適用できます。フィルタを誤って適用すると、filter に定義されている他のフィルタは機能しません。

blur

これはガウシアン ブラー適用で、渡せる引数は radius のみです。これは、適用するぼかしの量です。これは、10px などの長さの単位にする必要があります。割合は使用できません。

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

要素の明るさを増減するには、明るさ関数を使用します。明るさの値はパーセンテージで表され、変更されていない画像は 100% の値で表されます。値が 0% の場合、画像は完全に黒くなります。0% ～ 100% の値を指定すると、画像の明るさが低下します。明るさを上げるには、100% を超える値を使用します。

.my-element {
    filter: brightness(80%);
}

contrast

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

0 ～ 100% の値を設定すると、コントラストをそれぞれ下げるか上げるかできます。

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

完全にグレースケールの効果を適用するには、grayscale() の値として 1 を使用します。0 を使用すると、要素が完全に飽和します。パーセンテージ値または小数値を使用して、部分的なグレースケール効果のみを適用することもできます。引数を渡さない場合、要素は完全にグレースケールになります。100% を超える値を渡した場合、その値は 100% に制限されます。

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

grayscale と同様に、invert() 関数に 1 または 0 を渡して、オンまたはオフにできます。オンにすると、要素の色が完全に反転します。パーセンテージ値または小数値を使用して、色の一部だけを反転することもできます。invert() 関数に引数を渡さない場合、要素は完全に反転します。

.my-element {
    filter: invert(1);
}

opacity

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

opacity() フィルタは opacity プロパティと同じように機能します。数値または割合を渡して、不透明度を増減できます。引数を渡さない場合、要素は完全に表示されます。

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

彩度フィルタは brightness フィルタによく似ており、同じ引数（数値またはパーセンテージ）を受け入れます。saturate は明るさ効果を増減するのではなく、色の彩度を増減します。

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

このフィルタを使用すると、grayscale() のようにセピア色の効果を追加できます。セピア調は、黒色を茶色に変換して暖かみを持たせる写真印刷手法です。sepia() の引数として数値または割合を渡して、効果を増減できます。引数を渡さないと、全体にセピア効果が追加されます（sepia(100%) と同じ）。

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

色のレッスンでは、hsl の色相が色相環の回転を参照する方法について学びました。このフィルタも同様に動作します。角度（度や回転数など）を渡すと、すべての要素の色の色相がシフトし、参照するカラーホイールの部分が変更されます。引数を渡さない場合、何も実行されません。

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

drop-shadow を使用して、Photoshop などのデザインツールと同様に、カーブに沿ったドロップシャドウを適用できます。このシャドウはアルファマスクに適用されるため、切り抜き画像にシャドウを追加する場合に非常に便利です。drop-shadow フィルタは、オフセット x、オフセット y、ぼかし、色の値をスペース区切りで指定する shadow パラメータを使用します。box-shadow とほぼ同じですが、inset キーワードとスプレッド値はサポートされていません。

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

さまざまな種類のシャドウの詳細については、shadows モジュールをご覧ください。

url

Browser Support

  • Chrome: 5.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 6.

Source

url フィルタを使用すると、リンクされた SVG 要素またはファイルから SVG フィルタを適用できます。SVG フィルタの詳細

背景フィルタ

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

backdrop-filter プロパティは、filter と同じフィルタ関数値をすべて受け入れます。backdrop-filter と filter の違いは、backdrop-filter プロパティはフィルタを背景にのみ適用するのに対し、filter プロパティは要素全体に適用する点です。

このレッスンの冒頭にある例は、テキストをぼかしたくない場合や、HTML 要素を追加したくない場合に最適な例です。フィルタを背景にのみ適用できるため、このことが可能になります。

理解度を確認する

フィルタに関する知識をテストする

次のどれが CSS フィルタ関数ですか。

grayscale()
🎉
invert()
🎉
flip()
もう一度考えてみましょう。
multiply()
もう一度考えてみましょう。
blur()
🎉
brightness()
🎉

CSS で SVG フィルタを使用できますか？

はい
url() フィルタ関数を使用すると、この処理が可能になります。
いいえ
もう一度考えてみましょう。