どうもこんにちは。
Web/App/UIデザイナーのサトウです。
今回は、任意の要素に指定してその範囲だけ背景をボカすbackdrop-filter:blur()をご紹介します。
このプロパティを使うと、指定した要素の背景だけを磨りガラスのようにボカすことができます。
これはかなり使い勝手のいいプロパティなので是非使ってみてください。
指定した要素の後ろにある画像をボカすことができる「backdrop-filter:blur()」
backdrop-filter:blur()を適用すると、次の画像のように背景をボカすことができます。
backdrop-filter:blur()の記述方法
backdrop-filter:blur()は次のように記述します。
<style>
#background {
width: 100%;
padding: 5em;
background: url(background.jpg) no-repeat center center / cover;
}
#foreground {
width: 100%;
padding: 2em;
text-align: center;
background-color: rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
</style>
<div id="background">
<div id="foreground">
任意の要素に指定してその範囲だけ背景をボカす<br>backdrop-filter:blur()
</div>
</div>backdrop-filter:blur()
blur()でボケの強さを調節
blur()のカッコ内にpxで数値を指定することで、ボケの強さを調節することができます。
数値は正の整数で指定し、0から指定する要素のheight未満まで指定できます。
数値があまり大きくなりすぎると逆にボケの効果を感じづらくなりますので、適宜適切と思われる数値を指定してください。
「backdrop-filter」は背景をボカすだけじゃない
実はこの「backdrop-filter」プロパティ、背景をボカすためのCSSプロパティではありません。
任意の要素に対して様々なフィルター効果を付与できるプロパティなのです。
ボケを適用する「blur()」はその様々なフィルター効果のうちの1つに過ぎません。
:blur()の他には次のようなものを利用できます。
| 関数 | 効果 |
|---|---|
| brightness() | 明度 |
| contrast() | コントラスト |
| drop-shadow() | ドロップシャドウ |
| grayscale() | グレースケール |
| hue-rotate() | 色相の回転 |
| invert() | 階調の反転 |
| opacity() | 透明度 |
| sepia() | セピア |
| saturate() | 彩度 |
backdrop-filter: brightness()
明度を調節します。
0以上の数字または0%以上のパーセンテージで指定します。
1または100%が基準値、0または0%が明度0（真っ黒）です。
backdrop-filter: contrast()
コントラストを調節します。
0以上の数字または0%以上のパーセンテージで指定します。
1または100%が基準値、0または0%がコントラスト0です。
backdrop-filter: drop-shadow()
ドロップシャドウを付与します。
値には、x距離、y距離、ボケの大きさをpxで指定します。
【例】
backdrop-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.15));※僕が試した限りでは、効果が確認しづらかったりブラウザによって対応していなかったりと、ちょっと実用的ではないと思いました。
backdrop-filter: grayscale()
グレースケール（モノクロ）にします。
0〜1の数字または0%〜100%のパーセンテージで指定します。
0または0%が適用量0、1または100%が完全なグレースケールです。
backdrop-filter: hue-rotate()
色相環に沿って色相を回転させます。
0deg〜360degまたは0.0turn〜1.0turnで回転角度を指定します。
180degまたは0.5turnで正反対の色相となります。
backdrop-filter: invert()
色の階調（濃淡）を反転させます。
0〜1の数字または0%〜100%のパーセンテージで指定します。
0または0%が適用量0、1または100%が完全な反転です。
0.5または50%ですべての色の階調が同期してグレーになります。
backdrop-filter: opacity()
透明度を調節します。
※僕が試した限りでは効果が確認できず、ちょっと実用的ではないと思いました。
backdrop-filter: sepia()
色をセピア調に変調します。
0〜1の数字または0%〜100%のパーセンテージで指定します。
0または0%が適用量0、1または100%で完全なセピア調になります。
backdrop-filter: saturate()
彩度を調節します。
0以上の数字または0%以上のパーセンテージで指定します。
1または100%が基準値、0または0%が彩度0です。
複数の効果を組み合わせて使う
「backdrop-filter」の各効果は組み合わせて使うことができます。
blur()で背景をボカす際、明度や彩度を合わせて調整してあげると、より視認性が高まると思います。
【例】
backdrop-filter: blur(20px) brightness(125%) saturate(80%) contrast(80%);さて、今回は、任意の要素に指定してその範囲だけ背景をボカすbackdrop-filter:blur()をご紹介しました。
いかがだったでしょうか？
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。
