CSS backdrop-filterを使って曇りガラスなどの背景効果を出す(iOS9.0新機能)
はじめに
mediba制作部 メディアクリエイティブグループの今野です。
初回投稿なので、カンタンにグループ紹介からさせていただきます。
当グループは20名強のメンバーがいて、サービスごとにチーム編成されており、デザインとフロントエンドを担当しております。
普段の業務で培ったノウハウや、また、業務以外で、UI/UX、Webの最新技術も研究などもしているので、今後そのネタも記事にしていく予定です。お楽しみに!
次から本題です。
backdrop-filterとは
先日iOS9.0がリリースされました。
iOS9.0では、様々な機能がブラウザに実装されたのですが、追加機能のうちのbackdrop-filter
プロパティをさっそく試してみました。
backdrop-filter
は、背景にfilter
が使えるようにするプロパティです。
filter
は、色相・明度・彩度や、ぼかし、セピアなどPhotoshopでよく使う機能があります。
例えば、以下画像のように、ぼかしであるblur()
をうまく使えば、すりガラスのような見た目もカンタンに実装できます。
(今までは、通常とぼかした画像を二重にして擬似的に表現しなければならなかったため、ちょっと面倒でした)
実装方法
実装方法はカンタンで、上に被せてるボックスにbackdrop-filter
を追加するだけ。
以下は、例です。
background-color: rgba(31, 20, 11, 0.5);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
現在、-webkit-
のベンダープレフィックスが無いと動作しません。
なお、上記の書き方だと、対応していないブラウザには、画像左側の見え方になりますので、非対応ブラウザでも問題なく見えます。
さらに、iOS9.0から@supports
も対応しており、指定プロパティが対応しているかどうかも条件分岐できるようになったため、非対応ブラウザの表現幅が広がりました。
ちなみに、似たような名前で、::backdrop
擬似要素というのがありますが、こちらは、dialog
要素で生成したモダールウィンドウ以外の背景に装飾するための機能です。
今まで、モーダルウィンドウを一から作成するのは、少々面倒でしたが、今後はHTML、CSS、(JavaScript)でカンタンに実装できるので、こちらの機能も今後要チェックです。
各ブラウザ側の対応はこれからですので、早々に使えるわけではありませんが、最新ブラウザだけちょっと違う見え方というのも面白いと思いますので、ぜひ試してみてください。