CSS Podcast - 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
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
Photoshop などのデザインツールの場合と同様に、drop-shadow を使用して、曲線を描くドロップ シャドウを適用できます。このシャドウはアルファマスクに適用されるため、カットアウト画像にシャドウを追加する場合に非常に便利です。drop-shadow フィルタは、スペース区切りの offset-x、offset-y、blur、color の値を含むシャドウ パラメータを受け取ります。これは box-shadow とほぼ同じですが、inset キーワードとスプレッド値はサポートされていません。
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
シャドウの種類について詳しくは、shadows モジュールをご覧ください。
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() フィルタ関数を使用すると、