待望のbackdrop-filter

みなさん、cssの、backdrop-filterというプロパティをご存じでしょうか。

当サイトのヘッダーにも使用していますが、「ある要素の背景にエフェクトを加える」というプロパティです。

僕はこれをずっとずっと待っていました。

というのも、これ、iOSのSafariなんかでは2015年ぐらいから使えたんです。

これがあれば、iOSのロック画面や、コントロールセンターのような画面が「Webで」すぐに再現出来たんですよね。

でも、ReactNativeなんかでも、このエフェクトを使うためにはそこそこ面倒な方法しかありませんでしたし、ほかのプラットフォームに至っては面倒すぎて諦めるようなエフェクトでした。

Webに、Androidに！

なんと、これが、Chrome 76から、公式に実装されました（それまでは、Experimental Web Platform Featuresを有効にしない限り有効になりませんでした）

同時に、AndroidのChromeにも実装されています。

と、言うことは。

ガワネイティブアプリでもこれが使用できるのです。

いやいや、もっとすごい。PWAでも使用できる。

本当にすごいことです。

他のプラットフォームは？

Edgeには少し前に実装されました。FireFoxはabout:configの設定を変更しない限り無理です。

どんなプロパティ？

.foo {
    backdrop-filter: [フィルター];
    -webkit-backdrop-filter: [フィルター];
}

これだけです。

待ち望んでいたぼかし効果は

.foo {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

みたいな感じで適用できます。

Safari等だと、まだ-webkit-がプリフィクスに要るので注意です。

あと、Chrome以外だとtransitionが綺麗に効かないので、だんだんぼんやりしていくエフェクトが必要な時は適宜スクリプト書きましょう。

ついでに、ブラウザによっては完全に無視される件に対応するために、雰囲気色を付けておくことをお勧めします。

では、これを使用するとどんな風になるか、ざっくり見てみましょう。

テスト

ボタンをクリックすると、表示されます。

ぼやっと 上から

まだまだtransitionを効かせるとスマホでは少し重いですね。

でも、どうです？　テンション上がりませんか？

その他にも、いろんなフィルターがあります。

blur(5px) brightness(60%) contrast(40%) grayscale(50%) hue-rotate(120deg) invert(70%) opacity(40%) sepia(90%) saturate(50%)

ぜひ、流行らせましょう。