ガラスのような（そして上品な）テキスト効果

Apple Arcadeのホームページにはクールなテキスト効果があり、いくつかの「白い」テキストが半透明の効果を示しています。テキストを介して背景色の一部を見ることができます。これは、完全な背景色を表示するテキストを叫ぶこととは異なります。この例では、ダイナミックビデオを以下にプレイします。まずビデオをぼかし、次に文字を通してぼやけたビデオを表示するようなものです。

これはまさに実際に起こったことです。

以下は、実際にどのように機能するかを見ることができるビデオです（ページが変更された場合でも、この効果をサポートしていないブラウザを使用している場合でも）：

この効果が気に入らなければ、それは問題ではありません。この記事の残りの部分は、それがどのように実装されているかについての技術的な議論であり、いつ、どのように使用されるかではありません。

この効果を達成するために完全に調整する必要がある2つの主要なプロパティを次に示します。

1. backdrop-filter
2. clip-path

backdrop-filterプロパティは非常に使いやすいです。それを設定すると、その要素を通して見える背景をフィルタリングできます。

次に、そのコンテナにテキストを配置しますが、実際には非表示にします。アクセシビリティのためだけに存在する必要があります。しかし、最終的には、テキストをテキストで作成してテキストを置き換えます。それは正しい！私達はします<clippath></clippath>要素内でSVGを使用します<text></text>、そしてそれを使用して、 backdrop-filter属性で要素全体をクリップします。

何らかの理由で（これはバグだと思います）、Chromeは次のようにレンダリングします。

両方のプロパティをサポートすると言われていますが、要素を正しく編集することはできません。 @supportsブロックを使用してみましたが、これはここでは役に立ちません。 AppleのWebサイトには、その要素に.no-backdrop-blurクラス（Modernizr-Style）があります。これは、効果を完全に使用しないようにChromeに設定されています。デモプログラムをクラッシュさせたばかりです。たぶんいつか修正されるでしょう。

Safariを正しく見てください：

Firefoxは現在backdrop-filterをサポートしていないため、 @supportsブロックは操作を行い、白いテキストを提供します。

以上がガラスのような（そして上品な）テキスト効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。