【CSS】backdrop-filter で作るすりガラス風背景

ケイです。たまにはWeb制作会社っぽい事書いてみようかなと色々考えてみたのですが、今回はCSSの事を書いてみようと思います。

そもそも「backdrop-filter」とは？

出来ることは「filter」プロパティと一緒ですが、画像編集で出来る主な操作がCSSだけで可能です！

backdrop-filter: blur(px);//ぼかし
backdrop-filter: brightness(%);//明るさ
backdrop-filter: contrast(%);//コントラスト
backdrop-filter: drop-shadow(px px px #000);//ドロップシャドウ
backdrop-filter: grayscale(%);//モノクロ調
backdrop-filter: hue-rotate(deg);//色相
backdrop-filter: invert(%);//諧調反転（ネガ）
backdrop-filter: opacity(%);//不透明度
backdrop-filter: sepia(%);//セピア調
backdrop-filter: saturate(%);//彩度

では何が違うのか、
「filter」は要素そのものに効果が付きますが、
「backdrop-filter」は要素の下に効果が付くため、内部のテキスト等に影響を与えません。

「filter: blur」の場合

「backdrop-filter: blur」の場合

こんな感じで簡単にすりガラス風のエフェクトを付けることが出来ます！

内部要素の背景だけにエフェクトを付けたい時

こんな時はボックスいっぱいに広げた「::before」等の疑似要素に対して「backdrop-filter」を当てましょう。

.blur:before {
 position: absolute;
 content: "";
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 backdrop-filter: blur(10px);
 z-index: -1;
}

重要なのは最後の「z-index」で、absolute化されて内部のテキストよりも上に来てしまっているので、疑似要素の階層を下げて、背景だけにフィルターが当たるように調整しています。

最後に

blur以外の効果もご紹介したいところですが、今回は割愛します！（すみません…）

複数の効果を重ねることも出来るので、これだけで色々遊べるプロパティですね、ホバーアニメーションにも色々と応用が効きそうです！

次回はグラデーションを使ったアニメーションに挑戦したいです！（気力があれば…笑）