こんにちは、かがみです！
この記事を読んでくださっているあなたは、backdrop-filterっていうCSSプロパティを知っていますか？
いくつかフィルターの種類があって、使い方によってはなかなか面白い表現ができるんですよね。
今回はこのCSSプロパティを使用して、iOSでありそうな「すりガラス表現」を実装してみたいと思います♪
記事でわかること
- ・CSSですりガラス表現を実装する方法
CONTENTS［ hide ］
backdrop-filterのblurでiOSのすりガラス表現を実装してみませんか？
CSSのbackdrop-filterは、適用した要素の背後をぼかしたり、色変化を加えたりといろいろな効果を実装することができます。
似たようなプロパティでfilterがありますが、こちらは指定した要素自体にグラフィック効果を適用しますので使い方が異なりますね。
割と新しめのCSSプロパティなのでIE11には適用できませんが、今年Windows7のサポートが終了してシェア率的にもかなり低くなっているので、IE11の対応はもういいんじゃないかなと個人的に思っています。笑
すりガラスで画面を覆ってみる
では試しに画面全体を、すりガラスで覆ってみましょう！
CSS的には下のプロパティを要素に1行追加するだけで実現できますが、適用した要素の後ろ側の要素をぼかすことになるので、必然的にプロパティを追加した要素は透明、あるいは半透明でないと後ろ側の要素を見ることができないので、その点ご注意ください。
backdrop-filter: blur(10px);
デモとして画面全体を覆うボタンを作ってみました。 下のボタンを押すと画面全体がすりガラスっぽくなるので、閉じる際は画面のどこかをクリックorタップしてください！
最後に：backdrop-filterのblurでiOSのすりガラス表現を実装してみませんか？
今回はCSSのbackdrop-filterプロパティを使って、すりガラスを再現する方法をご紹介しました。
画像加工しなくても今は次世代のCSSでこういった表現が可能なので、面白いですよね！
今後も面白いなと思ったCSSをご紹介していきますので、楽しみにしていてくださいね♪
それでは、今回はこの辺で！
