CSS ポッドキャスト - 023: フィルタ
たとえば、画像の上に、少し不透明なすりガラス効果を持つ要素を作成する必要があるとします。テキストは画像ではなく実際のテキストにする必要があります。そのためには、
CSS フィルタと backdrop-filter を組み合わせることで、リアルタイムで効果の適用やぼかし加工ができます。ぼかしと不透明度は多数のフィルタのうちの 2 つです。それぞれの機能と使い方を簡単に見ていきましょう。
filter プロパティ
filter の値として、次のフィルタを 1 つ以上適用できます。誤ってフィルタを適用すると、filter に定義されている残りのフィルタは機能しません。
blur
これにより、ガウスぼかしが適用されます。渡すことができる引数は radius のみです。これは、ぼかしの量を指定します。長さの単位（10px など）にする必要があります。割合は使用できません。
.my-element {
filter: blur(0.2em);
}
brightness
要素の明るさを調整するには、明るさ関数を使用します。明るさの値は、変更されていない画像を 100% としてパーセンテージで表します。値を 0% にすると画像が完全に黒くなります。0% ～ 100% の値を指定すると画像の明るさが低くなります。明るさを上げるには、100% を超える値を使用します。
.my-element {
filter: brightness(80%);
}
contrast
コントラストを増減するには 0% ～ 100% の値を設定します。
.my-element {
filter: contrast(160%);
}
grayscale
grayscale() の値として 1 を使用するか、要素を完全に飽和させる 0 を使用すると、完全なグレースケール効果を適用できます。また、パーセント値や小数値を使用して、部分的なグレースケール効果のみを適用することもできます。引数を渡さないと、要素は完全にグレースケールになります。100% を超える値を渡すと、100% が上限となります。
.my-element {
filter: grayscale(80%);
}
invert
grayscale と同様に、1 または 0 を invert() 関数に渡してオンとオフを切り替えることができます。オンの場合、要素の色が完全に反転します。また、パーセント値や小数値を使用して、部分的な色反転を適用することもできます。
invert() 関数に引数を渡さないと、要素が完全に反転されます。
.my-element {
filter: invert(1);
}
opacity
opacity() フィルタは opacity プロパティと同様に機能します。不透明度を増減するには、数値または割合を渡します。引数を渡さないと、要素は完全に表示されます。
.my-element {
filter: opacity(0.3);
}
saturate
飽和フィルタは brightness フィルタとよく似ており、同じ引数（数値またはパーセンテージ）を受け入れます。saturate は、明るさ効果を調整せずに色の彩度を調整します。
.my-element {
filter: saturate(155%);
}
sepia
このフィルタでは、grayscale() のようにセピアトーン効果を追加できます。セピアトーンは、黒いトーンを茶色のトーンに変換してウォームアップする写真印刷技術です。sepia() の引数として数値または割合を渡すことができます。これにより、効果の増減を指定できます。引数を渡さないと、完全なセピア効果が追加されます（sepia(100%) と同等）。
.my-element {
filter: sepia(70%);
}
hue-rotate
hsl の色相が色相環の回転を参照する方法については、色のレッスンで学習しました。このフィルタも同様に機能します。度数やターンなどの角度を渡すと、すべての要素の色の色相が変化し、参照するカラーホイールの部分が変更されます。引数を渡さないと、何も行われません。
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
drop-shadow を使用すると、Photoshop などのデザインツールと同じように、曲線を囲むようにドロップ シャドウを適用できます。
このシャドウはアルファマスクに適用されるため、カットアウト画像にシャドウを追加する場合に非常に便利です。
drop-shadow フィルタは、スペース区切りの offset-x、offset-y、ぼかし、色の値を含むシャドウ パラメータを受け取ります。box-shadow とほぼ同じですが、inset キーワードとスプレッド値はサポートされていません。
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
さまざまなタイプのシャドウについて詳しくは、シャドウ モジュールをご覧ください。
url
url フィルタを使用すると、リンクされた SVG 要素やファイルから SVG フィルタを適用できます。
SVG フィルタについて詳しくは、こちらをご確認ください。
背景フィルタ
backdrop-filter プロパティには、filter と同じフィルタ関数の値をすべて指定できます。backdrop-filter と filter の違いは、backdrop-filter プロパティは背景にのみフィルタを適用し、filter プロパティは要素全体にフィルタを適用することです。
このレッスンの最初に紹介した例は完璧な例です。テキストにぼかしを入れることも、HTML 要素を追加する必要もないのが理想的です。背景にのみフィルタを適用できれば、これが可能になります。
理解度をチェックする
フィルタに関する知識をテストする
CSS のフィルタ関数は次のうちどれですか。
grayscale()invert()flip()multiply()blur()brightness()CSS で SVG フィルタを使用できますか？
url() フィルタ関数を使用すると、これが可能になります。