CSS ポッドキャスト - 023: フィルタ
たとえば、要素が少し不透明で、 画像の上にあるフロストガラス効果。 テキストは画像ではなく実際のテキストにする必要があります。 そのためには、
CSS フィルタと backdrop-filter
の組み合わせ
リアルタイムで必要なエフェクトを
適用したりぼかしたりできます
ぼかしと不透明度は多数のフィルタの 2 つです
それぞれの機能と使い方を簡単に見ていきましょう。
filter
プロパティ
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
次のフィルタを 1 つ以上適用できます。
filter
。
誤ってフィルタを適用した場合は
filter
に定義された残りのフィルタは機能しません。
blur
これにより、ガウスぼかしが適用されます。渡すことができる引数は radius
のみです。
これは
適用するぼかしの量。
長さの単位(10px
など)にする必要があります。割合は使用できません。
.my-element {
filter: blur(0.2em);
}
brightness
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
要素の明るさを調整するには、 明るさの機能を使用します 明るさの値は、変更されていない画像の 100% の値に対するパーセンテージで表されます。 値を 0% にすると画像が完全に黒になり、 0 ~ 100% の値を指定すると画像の明るさが低くなります。 明るさを上げるには、100% を超える値を使用します。
.my-element {
filter: brightness(80%);
}
contrast
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
コントラストを増減するには 0% ~ 100% の値を設定します。
.my-element {
filter: contrast(160%);
}
grayscale
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
grayscale()
の値として 1
を使用すると、完全なグレースケール効果を適用できます。
要素が完全に飽和状態になるようにするには、0
を指定します。
また、パーセント値や小数値を使用して、部分的なグレースケール効果のみを適用することもできます。
引数を渡さないと、要素は完全にグレースケールになります。
100% を超える値を渡すと、100% が上限となります。
.my-element {
filter: grayscale(80%);
}
invert
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
grayscale
と同様に、
1
または 0
を invert()
関数に渡して、オンとオフを切り替えることができます。
オンにすると、要素の色が完全に反転します。
また、パーセント値や小数値を使用して、部分的な色反転を適用することもできます。
invert()
関数に引数を渡さない場合、
要素は完全に反転します。
.my-element {
filter: invert(1);
}
opacity
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
opacity()
フィルタは opacity
プロパティと同様に機能しますが、
数値または割合を渡すことで、不透明度を調整できます。
引数を渡さないと、要素は完全に表示されます。
.my-element {
filter: opacity(0.3);
}
saturate
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
saturate フィルタは brightness
フィルタとよく似ており、同じ引数を受け入れます。
数値またはパーセンテージで指定します。
明るさの効果を調整するのではなく、
saturate
: 色の彩度を上げます。
.my-element {
filter: saturate(155%);
}
sepia
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
このフィルタでセピアトーンの効果を追加できます(grayscale()
など)。
セピアトーンは、黒の色調を茶色に変換して暖色にする写真印刷技術です。
sepia()
の引数として数値または割合を渡すことができます
調整します。
引数を渡さないと、完全なセピア効果が追加されます(sepia(100%)
と同等)。
.my-element {
filter: sepia(70%);
}
hue-rotate
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
hsl
の色相が、
色のレッスンです。このフィルタも同じように機能します。
度やターンなどの特定の角度を渡すと、
要素のすべての色の色相が変化します。
参照する色相環の部分を変更します。引数を渡さないと、何も行われません。
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
url
フィルタを使用すると、リンクされた SVG 要素やファイルから SVG フィルタを適用できます。
Google Chat では
SVG フィルタについて詳しくは、こちらをご覧ください
背景フィルタ
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
背景フィルタ
プロパティは、filter
と同じフィルタ関数の値をすべて受け入れます。
backdrop-filter
と filter
の違い
backdrop-filter
プロパティでフィルタが背景のみに適用される点です。
ここで、filter
プロパティにより、値が要素全体に適用されます。
このレッスンの最初に紹介した例は完璧な例です。 テキストにぼかしを入れないようにし、理想的には余分な HTML 要素を追加したくないからです。 背景にのみフィルタを適用できれば、これが可能になります。
理解度をチェックする
フィルタに関する知識をテストする
CSS のフィルタ関数は次のうちどれですか。
grayscale()
blur()
brightness()
multiply()
invert()
flip()
CSS で SVG フィルタを使用できますか?