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