[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説
Post on:2020年6月8日
ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。
今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。
The backdrop-filter CSS property
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- アップデート
- 2020/6/8: サポートブラウザを現在の状況に変更しました。
「backdrop-filter」だと、一行のコードで実装できる
私はbackdrop-filterというプロパティがあるのを初めて知りました。さっそく試してみたところ、このプロパティが魔法以外の何物でもないことを確信しました。
backdrop-filterプロパティは、内部のテキストやその他の要素を変更することなく、要素の背景の色相やコントラストやぼかしを変更することができます。
iOSの通知スタイルを真似たデモを見てみてください。
パネルの背景が美しくぼかされているのが分かると思います。
デモページ(メリル・ロイ・ナオミからのメッセージ!)
この背景の効果は、たった一行のCSSで実装できます。
1 2 3 |
.notification { backdrop-filter: blur(3px); } |
ただし、一つ注意点があります。それはサポートブラウザが充分でないことです(サポートブラウザを参照)。
しかし、今まではこのような効果を与えるには、非常に長いコードとCSSハックが必要でした。
参考: Frosting glass CSS Filters
backdrop-filterプロパティを使用すると、はるかに少ないコードで実装できます。
ガラス効果のさまざまなスタイル
backdrop-filterで実装できるガラス効果には、さまざまなスタイルが用意されています。下記のデモではbackdrop-filterの値を変更して、さまざまなスタイルを実装しています。
それぞれのボックスはdiv要素で、backdrop-filterの異なる値を適用しています。値は、各ボックスの上部に記述されているコードのみで、非常にシンプルです。
1 2 3 4 5 6 7 8 9 10 |
backdrop-filter: none; backdrop-filter: grayscale(1); backdrop-filter: brightness(1.5); backdrop-filter: blur(5px); backdrop-filter: contrast(.8); backdrop-filter: invert(.7); backdrop-filter: opacity(.4); backdrop-filter: sepia(.4); backdrop-filter: saturate(1.8); backdrop-filter: hue-rotate(120deg); |
さらにアニメーションと組み合わせると、backdrop-filterは精巧で複雑なデザインを作ることができます。
なぜ、このプロパティが必要なのでしょうか?
これと同じ効果をCSSで実装した2015年のデモがあります。
「backdrop-filter」プロパティの存在を心にとめておけば、より美しいものを実装できると私は思います。
backdrop-filterののサポートブラウザ
backdrop-filterプロパティは2018年6月現在、充分にサポートされていません。
SafariとEdgeのみでサポートされており、ChromeやFirefoxでは未サポートです。
2020年6月現在、主要なブラウザにサポートされています。
一部のブラウザではサポートされていませんが、この効果はすべてのブラウザでまったく同じに見える必要がありますか?
backdrop-filterのポリフィル
未サポートブラウザでも使用したい場合は、ポリフィルもリリースされています。
sponsors