フィルタ

CSS ポッドキャスト - 023: フィルタ

たとえば、要素が少し不透明で、 画像の上にあるフロストガラス効果。 テキストは画像ではなく実際のテキストにする必要があります。 そのためには、

CSS フィルタと backdrop-filter の組み合わせ リアルタイムで必要なエフェクトを 適用したりぼかしたりできます ぼかしと不透明度は多数のフィルタの 2 つです それぞれの機能と使い方を簡単に見ていきましょう。

filter プロパティ

対応ブラウザ

  • Chrome: 53。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 9.1。 <ph type="x-smartling-placeholder">

ソース

次のフィルタを 1 つ以上適用できます。 filter。 誤ってフィルタを適用した場合は filter に定義された残りのフィルタは機能しません。

blur

これにより、ガウスぼかしが適用されます。渡すことができる引数は radius のみです。 これは 適用するぼかしの量。 長さの単位（10px など）にする必要があります。割合は使用できません。

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

brightness

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

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

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

contrast

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

コントラストを増減するには 0% ～ 100% の値を設定します。

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

grayscale

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

grayscale() の値として 1 を使用すると、完全なグレースケール効果を適用できます。 要素が完全に飽和状態になるようにするには、0 を指定します。 また、パーセント値や小数値を使用して、部分的なグレースケール効果のみを適用することもできます。 引数を渡さないと、要素は完全にグレースケールになります。 100% を超える値を渡すと、100% が上限となります。

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

invert

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

grayscale と同様に、 1 または 0 を invert() 関数に渡して、オンとオフを切り替えることができます。 オンにすると、要素の色が完全に反転します。 また、パーセント値や小数値を使用して、部分的な色反転を適用することもできます。 invert() 関数に引数を渡さない場合、 要素は完全に反転します。

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

opacity

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

opacity() フィルタは opacity プロパティと同様に機能しますが、 数値または割合を渡すことで、不透明度を調整できます。 引数を渡さないと、要素は完全に表示されます。

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

saturate

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

saturate フィルタは brightness フィルタとよく似ており、同じ引数を受け入れます。 数値またはパーセンテージで指定します。 明るさの効果を調整するのではなく、 saturate: 色の彩度を上げます。

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

sepia

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

このフィルタでセピアトーンの効果を追加できます（grayscale() など）。 セピアトーンは、黒の色調を茶色に変換して暖色にする写真印刷技術です。 sepia() の引数として数値または割合を渡すことができます 調整します。 引数を渡さないと、完全なセピア効果が追加されます（sepia(100%) と同等）。

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

hue-rotate

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

hsl の色相が、 色のレッスンです。このフィルタも同じように機能します。 度やターンなどの特定の角度を渡すと、 要素のすべての色の色相が変化します。 参照する色相環の部分を変更します。引数を渡さないと、何も行われません。

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

drop-shadow

対応ブラウザ

  • Chrome: 18。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 35。 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

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

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

さまざまなタイプのシャドウについて詳しくは、シャドウ モジュールをご覧ください。

url

対応ブラウザ

  • Chrome: 5. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

ソース

url フィルタを使用すると、リンクされた SVG 要素やファイルから SVG フィルタを適用できます。 Google Chat では SVG フィルタについて詳しくは、こちらをご覧ください

背景フィルタ

対応ブラウザ

  • Chrome: 76。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 103。 <ph type="x-smartling-placeholder">
  • Safari: 18。 <ph type="x-smartling-placeholder">

ソース

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

このレッスンの最初に紹介した例は完璧な例です。 テキストにぼかしを入れないようにし、理想的には余分な HTML 要素を追加したくないからです。 背景にのみフィルタを適用できれば、これが可能になります。

理解度をチェックする

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

CSS のフィルタ関数は次のうちどれですか。

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

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

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