スライドメニューのすりガラス風カスタマイズ

スマホやタブレットでの閲覧時に表示されるスライドメニュー。
微妙に閉塞感があってHPのコンセプトと合わないので、少しだけカスタマイズしました。

before / after

ちょっとした差なんですが、狭い画面でも透明感と広がりが出た気がします！
このようなすりガラス風のUIはグラスモーフィズムと呼ばれており、iphoneを使っている人にはおなじみですね。

トレンド的にはやや古めなものの、やわらかいイメージを出すにはこれが最適だったので気にせず使います。
実装は簡単で、透かしたい要素に対してbackdrop-filter: blur()を付加するだけ。

backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);

-webkit-はiosのsafari用のベンダープレフィックス（おまじない）です。
現状、これをつけないとsafariで動作してくれません。

よく似たプロパティにfilter:blur()がありますが、こちらは背景だけでなく、子要素を含めた全要素に対してぼかしがかかります。

filter: blur(9px);

ついでに、ただの半透明とブラーの違いを…

半透明の方はbackground-color: rgb(255 255 255 / 70%);で実装してます。
メニューの邪魔になるほどではないかもだけど、やっぱりちょっとうるさい感じがするし個人的にはグラスモーフィズムの方が好きです！