t's space.

iOSのすりガラス効果をCSSで簡単に実装する【backdrop-filter】

iOSやWindowsなどで背景をぼかす「すりガラス効果」があるのですが、これを従来のCSSで実装すると かなり長い構文を書く必要があり、一苦労でした。
過去に参考にした記事です。ご覧の通り、実装するのに大変なのが分かります。)

しかし、最近実装された “backdrop-filter” を使えば簡単に実装ができてしまううようです。自分もこの事を知ったのがつい最近でした。せっかくなので、今回はこちらのCSSを紹介します。

実際に使ったものはこちら

画像をクリック / タップすると別ページに飛びます

コードはこちら

.weather_box {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

ボックスを半透明にし、backdrop-filterで10pxのぼかしを設定しています。
こうすることによってiOSライクなぼかしが簡単に実装できるというわけです。

backdrop-filterでは、他にも明度等を設定することが出来ますが、詳しくはリファレンスサイトを見ていただけれはと思います。

ちなみに上記のページはJavascriptの授業でvue.jsを使用し、現時刻のの東京の天気が表示されるものを作成しました。

注意点

このCSSは、まだ実験的な機能であり、対応ブラウザが多くないのが現状です。
対応ブラウザを知らずに使ってしまうと、効果が効かなくなるので要注意です。

現在の backdrop-filter のサポート状況(別リンクで開けます)

実験的な機能ですが、わずか数行のCSSを書くだけで美しいデザインが簡単にできるので個人的には超お気に入りです。
今後、ブラウザでこのCSSのサポートが増えていくといいですね。