私は最近、ドリブルショットでガラスモルフィズムとして知られるクールな効果に出會(huì)いました。私の最初の考えは、SVG-ingに時(shí)間を無駄にせずにアイコンに絵文字を使用するだけで、數(shù)分ですぐにそれを再現(xiàn)できることでした。

私はそれらの「數(shù)分」についてこれ以上間違っていなかったでしょう。

このような効果をCSSする方法に関するリソースがあるが、それらはすべて、オーバーレイが長方形であるか、せいぜい境界線の長方形である非常に単純なケースを想定していることが判明した。ただし、これらのアイコンが絵文字であろうと適切なSVGであろうと、アイコンのような不規(guī)則な形狀にガラス変形効果を得ることは、予想よりもはるかに複雑であるため、プロセス、私が落ちたトラップ、途中で學(xué)んだことを共有する価値があると思いました。また、私がまだ理解していないこと。

なぜ絵文字？

短い答え：SVGには時(shí)間がかかりすぎるためです。長い答え：私はそれらを畫像エディターに描くだけの蕓術(shù)的な感覚がないので、私は元のサイズの10％未満にオンラインで見つけることができるように、私はしばしばコンパクトな既製のSVGをコンパクトすることができるように、私は十分に構(gòu)文に精通しているからです。だから、インターネット上でそれらを見つけるので、単にそれらを使用することはできません。コードをやり直して、それを非常に清潔でコンパクトにする必要があります。そして、これには時(shí)間がかかります。それは詳細(xì)な仕事だからです。

そして、私が望むのがメニューのコンセプトをすばやくコーディングすることだけで、アイコンを使用して、絵文字を使用して、テーマと一致させるためにフィルターを適用することに頼ります。それは私がこのリキッドタブバーインタラクションデモで行ったことです。これらのアイコンはすべて絵文字です！滑らかな谷効果は、マスク合成技術(shù)を利用しています。

さて、これは私たちの出発點(diǎn)になるでしょう：アイコンに絵文字を使用することです。

最初のアイデア

私の最初の考えは、ナビゲーションリンクの2つの偽（絵文字コンテンツを使用）を積み重ね、わずかにオフセットして、底部を変換で回転させて、部分的にしかオーバーしないようにしました。次に、1より小さい不透明度で上部1を半透明にし、バックドロップフィルター：Blur（）を設(shè)定します。

さて、イントロを読んで、あなたはおそらく計(jì)畫どおりに進(jìn)まなかったことを理解しましたが、それがコードでどのように見えるか、そしてそれがそれにある問題を見てみましょう。

次のパグでNAVバーを生成します。

 -data = {
 - ホーム：{ico： '？'、hue：200}、 
 - メモ：{ico： '？?'、hue：260}、 
 - アクティビティ：{ico： '？'、hue：320}、 
 - 発見：{ico： '？'、hue：30}
 - };
-e = object.entries（data）をletします。
-n = e.lengthとします。

nav
  -for（i = 0; i> n; iをlet）
    a（href = '＃' data-ico = e [i] [1] .ico style = ` -  hue：$ {e [i] [1] .hue} deg`）＃{e [i] [0]}

以下のHTMLにコンパイルします。

 <nav>
  <a href="'%EF%BC%83'" data-ico="'？'" style="'-hue：200deg'"> home </a>
  <a href="'%EF%BC%83'" data-ico="'？€収style" hue> notes </a>
  <a href="'%EF%BC%83'" data-ico="'？'" style="'-hue：320deg'">アクティビティ</a>
  <a href="'%EF%BC%83'" data-ico="'？'" style="'-hue：30deg'"> iscovery </a>
</nav>

レイアウトから始めて、要素をグリッドアイテムにします。 NAVを中央に配置し、リンクに明示的な幅を與え、上部セルに各リンクの両方の擬似（リンクテキストコンテンツを下のセルにプッシュ）し、リンクテキストと擬似を中央調(diào)整します。

ボディ、nav、{display：grid; }

體 {
  マージン：0;
  高さ：100VH;
}

nav {
  Grid-auto-flow：列;
  プレースセルフ：センター;
  パディング：.75em 0 .375em;
}

{
  幅：5em;
  テキストアライグ：センター;
  
  ＆::前、＆::後{
    グリッドエリア：1/1;
    コンテンツ：attr（data-ico）;
  }
}

絵文字の外観は、デモを使用しているブラウザによっては異なることに注意してください。

読みやすいフォントを選択し、サイズを上げ、アイコンをさらに大きくし、各リンクの背景を設(shè)定し、より良い色を作成します（それぞれのスタイル屬性の-hueカスタムプロパティに基づいて）：

體 {
  / *以前と同じ */
  背景：＃333;
}

nav {
  / *以前と同じ */
  背景：#fff;
  フォント：クランプ（.625EM、5VW、1.25EM）/ 1.25 ubuntu、sans-serif;
}

{
  / *以前と同じ */
  色：HSL（var（ -  hue）、100％、50％）;
  テキスト裝置：なし;
  
  ＆::前、＆::後{
    / *以前と同じ */
    フォントサイズ：2.5em;
  }
}

リンクの偽物で作成された2つの絵文字層を區(qū)別し始めるので、ここで物事が面白くなり始めます。 :: :: pseudoの前に少し移動(dòng)して回転させ、セピア（1）フィルターでモノクロにし、右の色合いに到達(dá)し、そのコントラスト（）を上げます。また、フィルターを適用します。グレースケール（1）は:: pseudoの後に半透明にします。

 {
  / *以前と同じ */
  
  ＆：：前に {
    変身： 
      翻訳（.375em、-.25em） 
      回転（22.5DEG）;
    フィルター： 
      セピア（1） 
      Hue-rotate（calc（var（ -  hue）-50deg）） 
      飽和（3）;
  }
	
  ＆：：後 {
    不透明：.5;
    フィルター：Grayscale（1）;
  }
}

壁にぶつかる

これまでのところ、とても良い…だから何？次のステップは、これをコーディングするというアイデアを得たときに愚かに考えていたと思っていましたが、上部（::後）レイヤーにバックドロップフィルター：Blur（5px）を設(shè)定することが含まれます。

Firefoxはまだgfx.webreder.all and layout.css.backdrop-filter.enabledフラグを必要としていることに注意してください。

悲しいことに、結(jié)果は私が期待したものとは見えません。上部アイコンの境界ボックス全體のサイズのオーバーレイを取得しますが、下のアイコンは実際にはぼやけていません。

しかし、私はバックドロップフィルター：blur（）でプレイしたと確信しています。

問題の根源に到達(dá)します

まあ、なぜ何かがうまくいかないのかわからないとき、あなたができることは、別の作業(yè)例を挙げて、あなたが望む結(jié)果を取得しようとするためにそれを調(diào)整し始め、それがどこで壊れるかを見てください！

それでは、私の古い作業(yè)デモの簡素化されたバージョンを見てみましょう。 HTMLは、セクションの記事にすぎません。 CSSでは、最初にいくつかの寸法を設(shè)定し、次にセクションに畫像の背景を設(shè)定し、記事には半透明の背景を設(shè)定します。最後に、記事にバックドロップフィルタープロパティを設(shè)定します。

セクション{背景：url（cake.jpg）50％/ cover; }

記事 {
  マージン：25vmin;
  高さ：40VH;
  背景：HSLA（0、0％、97％、.25）;
  バックドロップフィルター：Blur（5px）;
}

これは機(jī)能しますが、2つのレイヤーが互いにネストされたくありません。私たちは彼らが兄弟になりたいです。それでは、両方のレイヤー記事の兄弟を作成し、それらを部分的に重複させて、ガラスモルフィズム効果がまだ機(jī)能するかどうかを確認(rèn)しましょう。

記事{幅：66％;高さ：40VH; }

.base {background：url（cake.jpg）50％/ cover; }

.grey {
  マージン：-50％0 0 33％;
  背景：HSLA（0、0％、97％、.25）;
  バックドロップフィルター：Blur（5px）;
}

Chromeではすべてが順調(diào)に思われ、ほとんどの場合、Firefoxもあります。 Firefoxの端の周りでBlur（）が扱われる方法は、私たちが望むものではなく厄介に見えます。そして、仕様のいくつかの畫像に基づいて、Firefoxの結(jié)果も間違っていると思いますか？

私たちの2つのレイヤーがしっかりした背景に座っている場合（この特定のケースでは白い）の場合、Firefoxの問題の1つの修正は、最下層（.base）にオフセット、ぼかし、および上層（.grey）に適用されるバックドロップフィルターに使用する2倍のぼかしの半徑の2倍のぼやけた半徑を與えることです。案の定、この修正は私たちの特定のケースでは機(jī)能しているようです。

2つのレイヤーが固定されていない畫像の背景を持つ要素に座っている場合、物事は非常に髪になります（この場合、Firefoxの問題を解決するために層狀の背景アプローチを使用できます）が、それはここではそうではないので、私たちはそれに入りません。

それでも、次のステップに進(jìn)みましょう。 2つのレイヤーが2つの正方形のボックスになりたくないので、絵文字になりたいと考えています。つまり、hsla（）の背景を使用して上部1の半透明性を確保することはできません。不透明度を使用する必要があります。

 .grey {
  / *以前と同じ */
  不透明：.25;
  背景：HSL（0、0％、97％）;
}

問題を見つけたようです！何らかの理由で、不透明度を使用して最上層を半透明にすると、ChromeとFirefoxの両方でバックドロップフィルター効果が破壊されます。それはバグですか？それは何が起こるはずですか？

バグかどうか？

MDNは、バックドロップフィルターページの最初の段落で次のように述べています。

要素の背後にあるすべてに適用されるため、効果を確認(rèn)するには、要素またはその背景を少なくとも部分的に透明にする必要があります。

上記の文を理解していない限り、これは、ChromeとFirefoxの両方で行われているにもかかわらず、不透明度が効果を破るべきではないことを示唆しているようです。

スペックはどうですか？まあ、スペックは多くのイラストやインタラクティブなデモのない巨大なテキストの壁であり、スカンクの香りの腺を嗅ぐのと同じくらい魅力的な言語で書かれています。この部分が含まれていますが、私には関連性があるかもしれませんが、それが何を言おうとしているのか理解しているのはわかりません。それが意図した結(jié)果である場合、実際には確かに起こっていません。

要素Bの一部が半透明でない限り、背景フィルターの効果は見えません。また、要素Bに適用された不透明度は、フィルタリングされた背景畫像にも適用されることに注意してください。

ランダムなことを試みます

スペックが何を言っても、事実は殘っています。不透明なプロパティで最上層を半透明にすることは、クロムとファイアフォックスの両方でガラスモルフィズム効果を破ります。絵文字を半透明にする他の方法はありますか？さて、Filter：Opacity（）を試すことができます！

この時(shí)點(diǎn)で、私はおそらくこの代替が機(jī)能するかどうかを報(bào)告する必要がありますが、現(xiàn)実は…私にはわかりません！私はこのステップで數(shù)日間過ごし、その間に數(shù)え切れないほどのテストをチェックすることができました。時(shí)には動(dòng)作することもあります。時(shí)にはまったく同じブラウザーではなく、時(shí)刻に応じて異なる結(jié)果を得ることがあります。また、Twitterで尋ねて、さまざまな答えを得ました。ハロウィーンの幽霊が悩まされていないのではないかと疑問に思わずに助けられない瞬間の1つだけです。永遠(yuǎn)のために！

すべての希望がなくなったように見えますが、もう1つだけを試してみましょう。長方形をテキストに置き換えます。上部は、色で半透明です：HSLA（）。クールな絵文字のガラスモルフィズム効果を手に入れることができないかもしれませんが、たぶん私たちはプレーンテキストでそのような結(jié)果を得ることができます。

そのため、記事要素にテキストコンテンツを追加し、明示的なサイジングをドロップし、フォントサイズを押し上げ、部分的なオーバーラップを與えるマージンを調(diào)整し、最も重要なことは、最後の作業(yè)バージョンの背景宣言をカラーバージョンに置き換えることです。アクセシビリティ上の理由から、aria-hidden = 'true'も下部に設(shè)定します。

  lion？
 lion？

記事{font：900 21vw/ 1 cursive; }

.base {color：＃ff7a18; }

.grey {
  マージン：-.75EM 0 0 .5EM;
  色：HSLA（0、0％、50％、.25）;
  バックドロップフィルター：Blur（5px）;
}

ここに注意すべきことがいくつかあります。

まず、サブナティアのアルファで色のプロパティを値に設(shè)定すると、クロムとファイアフォックスの両方で、単なるテキストだけでなく、絵文字を半透明にします！これは私が今まで知らなかったことであり、他のチャネルが絵文字に影響を與えないことを考えると、絶対に驚くべきことに気づきます。

第二に、ChromeとFirefoxの両方が、実際のテキストの下にあるものをぼかすだけでなく、上部半透明の灰色層の境界ボックスの下にあるオレンジ色のテキストと絵文字の全領(lǐng)域をぼかしています。 Firefoxでは、その厄介な鋭いエッジ効果により、事態(tài)はさらに悪化しています。

ボックスブラーは私たちが望むものではありませんが、スペックが次のことを言っているので、それが理にかなっていると思わずにはいられません。

[…]完全なフィルター処理された背景畫像を見ることができる「透明」要素を作成するには、「バックグラウンドカラー：透過;」を使用できます。

したがって、上層がテキストではなく、バックグラウンドグラデーション、クリップパス、またはマスクで取得された別の非長方形の形狀である場合に何が起こるかを確認(rèn)するためにテストを行いましょう。

ChromeとFirefoxの両方で、上部層のボックス全體の下の領(lǐng)域は、形狀が背景で得られるとぼやけます：Gradient（）は、以前のテキストケースで述べたように、仕様ごとに意味があります。ただし、Chromeはクリップパスとマスクの形を尊重しますが、Firefoxは尊重しません。そして、この場合、クロムの結(jié)果は私にとってより理にかなっていますが、どちらが正しいのか本當(dāng)にわかりません。

クロムソリューションに向かって移動(dòng)します

この結(jié)果とTwitterの提案は、ぼかしがテキストのエッジを尊重する方法を?qū)い亭郡趣说盲郡猡韦扦ⅳ?、その境界ボックスのテキストのエッジを尊重する方法ではなく、Chromeの次のステップに導(dǎo)かれました。マスクを最上層（.grey）のテキストにクリップしたマスクを適用しました。このソリューションは2つの理由でFirefoxで機(jī)能しません。1つは、悲しいことにWebKitブラウザでのみ機(jī)能する非標(biāo)準(zhǔn)マスククリップ値であり、2つは上記のテストで示すように、とにかくFirefoxのマスクによって作成された形狀にぼやけた領(lǐng)域を制限しません。

 / *以前と同じ */

.grey {
  / *以前と同じ */
  -webkit-mask：線形勾配（赤、赤）テキスト。 / * WebKitブラウザでのみ動(dòng)作します */
}

さて、これは実際に私たちが望むもののように見えますので、私たちは正しい方向に向かっていると言えます！ただし、ここでは、下層にオレンジハート絵文字を使用し、上部半透明層には黒いハート絵文字を使用しました。他の一般的な絵文字には黒と白のバージョンがないので、私の次のアイデアは、最初に2つのレイヤーを同じようにし、上部の1つを半透明で使用し、フィルターを使用することでした：Grayscale（1）。

記事 { 
  色：HSLA（25、100％、55％、var（ -  a、1））;
  フォント：900 21VW/ 1.25筆記體;
}

.grey {
  -A：.25;
  マージン：-1EM 0 0 .5EM;
  フィルター：Grayscale（1）;
  バックドロップフィルター：Blur（5px）;
  -webkit-mask：線形勾配（赤、赤）テキスト。
}

まあ、それは確かに私たちが最上層に望んでいた効果を持っていました。殘念ながら、いくつかの奇妙な理由で、それはまた、その下の層のぼやけた領(lǐng)域にも影響を與えたようです。この瞬間は、さらに別のレイヤーを追加するというアイデアを取得する前に、ラップトップを窓の外に捨てることを簡単に検討する場所です。

これは次のとおりです。これまでのところ、上記の他の2つからわずかに相殺されたように、基本層があります。中央の層は、背景フィルターを適用している「ゴースト」（透明な）です。そして最後に、上部は半透明であり、グレースケール（1）フィルターを取得します。

ボディ{display：grid; }

記事 {
  グリッドエリア：1/1;
  プレースセルフ：センター;
  パディング：.25em;
  色：HSLA（25、100％、55％、var（ -  a、1））;
  フォント：900 21VW/ 1.25 Pacifico、Z003、Segoe Script、Comic Sans MS、Cursive;
}

.base {margin：-.5em 0 0 -.5em; }

.midl {
  -A：0;
  バックドロップフィルター：Blur（5px）;
  -webkit-mask：線形勾配（赤、赤）テキスト。
}

.grey {filter：grayscale（1）ofacity（.25）}

今、私たちはどこかになっています！やることがもう1つ殘っています。基本層のモノクロを作りましょう！

 / *以前と同じ */

.base {
  マージン：-.5em 0 0 -.5em;
  フィルター：セピア（1）色相（165deg）コントラスト（1.5）;
}

さて、これは私たちが望む効果です！

Firefoxソリューションに到達(dá)します

Chromeソリューションをコーディングしている間、FirefoxはElement（）関數(shù)をサポートする唯一のブラウザであるため、Firefoxで同じ結(jié)果を引き出すことができると思いました。この関數(shù)により、要素を取り、別の要素の背景として使用できます。

アイデアは、.baseレイヤーと.greyレイヤーはChromeバージョンと同じスタイルを持ち、中間層には（要素（）関數(shù)を介して）ぼやけたバージョンのレイヤーの背景があるということです。

物事を簡単にするために、このぼやけたバージョンと中間層から始めます。

  lion？
 lion？

ぼやけたバージョンを絶対に配置し（今のところ視界に保持しています）、モノクロとぼやけて、.midlの背景として使用します。

 #blur {
  位置：絶対;
  トップ：2EM;右：0;
  マージン：-.5em 0 0 -.5em;
  フィルター：セピア（1）色相（165deg）コントラスト（1.5）ぼかし（5px）;
}

.midl {
  -a：.5;
  背景：-moz -element（#blur）;
}

また、.midl要素のテキストをSemitransparentに作成しました。これにより、背景を確認(rèn)できます。最終的には完全に透明にしますが、今のところ、背景に比べてその位置を確認(rèn)したいと考えています。

すぐに1つの問題に気付くことができます。マージンは実際の#BLUR要素を相殺するために機(jī)能しますが、背景としての位置をシフトするためには何もしません。このような効果を得るには、Transformプロパティを使用する必要があります。これは、回転やその他の変換が必要な場合にも役立ちます。これは、マージンを変換（-9DEG）に置き換えた以下で見ることができるためです。

大丈夫ですが、私たちはまだ今のところ単なる翻訳に固執(zhí)しています：

 #blur {
  / *以前と同じ */
  変換：翻訳（ - 。25em、-.25em）; / *交換されたマージン */
}

ここで注意すべきことの1つは、中間層のパディングボックスの限界の外側(cè)にあるため、ぼやけた背景が少し遮斷されることです。とにかくこのステップでは、次の動(dòng)きは背景をテキスト領(lǐng)域にクリップすることですが、.baseレイヤーが翻訳されるので、そのスペースを持っているだけで問題ありません。

したがって、パディングを少しずつぶつけます。この時(shí)點(diǎn)で、バックグラウンドクリップ：.midl要素にテキストを設(shè)定するため、視覚的に違いがまったくない場合でも。

記事 {
  / *以前と同じ */
  パディング：.5em;
}

#blur {
  位置：絶対;
  下：100VH;
  変換：翻訳（ - 。25em、-.25em）;
  フィルター：セピア（1）色相（165deg）コントラスト（1.5）ぼかし（5px）;
}

.midl {
  -a：.1;
  背景：-moz -element（#blur）;
  バックグラウンドクリップ：テキスト;
}

また、#BluR要素を見えなくし、.MIDL要素の色のアルファをさらに減らしました。私たちはそれを完全に透明にしているわけではありませんが、今のところそれを目に見えるようにしているので、それがカバーする領(lǐng)域を知っています。

次のステップは、Chromeの場合とほぼ同じスタイルで.Base要素を追加することで、マージンを変換に置き換えるだけです。

  lion？
 lion？
 lion？

 #blur {
  位置：絶対;
  下：100VH;
  変換：翻訳（ - 。25em、-.25em）;
  フィルター：セピア（1）色相（165deg）コントラスト（1.5）ぼかし（5px）;
}

.base {
  変換：翻訳（ - 。25em、-.25em）;
  フィルター：セピア（1）色相（165deg）コントラスト（1.5）;
}

これらのスタイルの一部は一般的であるため、重複を避けて記述するコードの量を減らすために、ぼやけた要素#Blurに.Baseクラスを追加することもできます。

 <article id="'Blur'" class="'base'" aria-hidden="'true'"> lion？</article>
 lion？
 lion？

 #blur {
  -R：5px;
  位置：絶対;
  下：100VH;
}

.base {
  変換：翻訳（ - 。25em、-.25em）;
  フィルター：セピア（1）色相（165deg）コントラスト（1.5）ぼかし（var（ -  r、0））;
}

ここでは別の問題があります。 .baseレイヤーには変換があるため、Dom Orderにもかかわらず、.midlレイヤーの上にあります。最も簡単な修正？ .midl要素にz-index：2を追加してください！

別の別の、さらに微妙な問題があります。.base要素は、.midl要素に設(shè)定したぼやけた背景の半透明部分の下にまだ見えます。 .baseレイヤーテキストの鋭いエッジが下にあるのを見たくありませんが、ぼやけてぼんやりが端の近くにピクセルが半透明になるためです。

テキストレイヤーの親に背景の種類に応じて、これは少しまたは多くの努力で解決できる問題です。

堅(jiān)実な背景しかない場合、.MIDL要素の背景色を同じ値に設(shè)定することで問題が解決されます。幸いなことに、これはたまたま私たちのケースなので、他のシナリオについて議論することはありません。多分別の記事で。

 .midl {
  / *以前と同じ */
  背景：-moz -element（#blur）#fff;
  バックグラウンドクリップ：テキスト;
}

Firefoxの素晴らしい結(jié)果に近づいています！殘されているのは、Chromeバージョンとまったく同じスタイルのトップ.Greyレイヤーを追加することだけです！

 .grey {filter：grayscale（1）Opacity（.25）; }

悲しいことに、これを行うことは私たちが望む結(jié)果を生成しません。これは、中間層のテキストを完全に透明にして（アルファ-a：0をゼロにすることで）、その背景のみがテキスト領(lǐng)域にクリップされたぼやけた要素#blurを使用する）のみを見ることができます。

問題は、.greyレイヤーが表示されないことです！ z-index：2の設(shè)定により、中間層.midlは、DOM順序にもかかわらず、最上層（.Grey One）の上にあるようになりました。修正？ .greyレイヤーにz-index：3を設(shè)定します！

 .grey {
  z-index：3;
  フィルター：グレースケール（1）不透明（.25）;
}

私はレイヤーの後にZ-Indexレイヤーを配るのが本當(dāng)に好きではありませんが、ちょっと、それは低い努力であり、それは機(jī)能します！今、私たちは素?cái)长蔉irefoxソリューションを持っています：

ソリューションをクロスブラウザーに組み合わせます

Firefoxコードから始めます。

 <article id="'Blur'" class="'base'" aria-hidden="'true'"> lion？</article>
 lion？
<article class="'midl'" aria-hidden="'true'"> lion？</article>
 lion？

ボディ{display：grid; }

記事 {
  グリッドエリア：1/1;
  プレースセルフ：センター;
  パディング：.5em;
  色：HSLA（25、100％、55％、var（ -  a、1））;
  フォント：900 21VW/ 1.25筆記體;
}

#blur {
  -R：5px;
  位置：絶対;
  下：100VH;
}

.base {
  変換：翻訳（ - 。25em、-.25em）;
  フィルター：セピア（1）色相（165deg）コントラスト（1.5）ぼかし（var（ -  r、0））;
}

.midl {
  -A：0;
  z-index：2;
  背景：-moz -element（#blur）#fff;
  バックグラウンドクリップ：テキスト;
}

.grey {
  z-index：3;
  フィルター：グレースケール（1）不透明（.25）;
}

余分なZ-Index宣言は、Chromeの結(jié)果に影響を與えず、視線外の#BluR要素もありません。これがChromeで機(jī)能するためにこれが欠けている唯一のことは、.MIDL要素のバックドロップフィルターとマスク宣言です。

バックドロップフィルター：Blur（5px）;
-webkit-mask：線形勾配（赤、赤）テキスト。

バックドロップフィルターがF(xiàn)irefoxで適用されることを望んでいないため、背景をChromeで適用することも望まないので、 @Supportsを使用します。

 $ r：5px;

/ *以前と同じ */

#blur {
  / *以前と同じ */
  -R：＃{$ r};
}

.midl {
  -A：0;
  z-index：2;
  / * @supports內(nèi)でリセットする必要があるため、Firefoxで適用されない */
  バックドロップフィルター：Blur（$ r）;
  / * Firefoxでの無効な値、とにかく適用されず、リセットする必要はありません */
  -webkit-mask：線形勾配（赤、赤）テキスト。
  
  @supports（background：-moz -element（#blur））{ / * firefox * /
    背景：-moz -element（#blur）#fff;
    バックグラウンドクリップ：テキスト;
    バックドロップフィルター：なし;
  }
}

これにより、クロスブラウザーソリューションが提供されます！

結(jié)果は2つのブラウザでは同じではありませんが、それでもかなり似ており、私にとっては十分です。

私たちのソリューションを1つ録音するのはどうですか？

悲しいことに、それは不可能です。

まず、Firefoxソリューションでは、1つ（IDで參照）を別の要素の背景として使用するため、少なくとも2つの要素が必要です。

第二に、殘りの3つのレイヤー（とにかくクロムソリューションに必要な唯一の層）で最初の考えは、そのうちの1つが実際の要素であり、他の2つはその偽物である可能性があるということですが、この特定のケースではそれほど単純ではありません。

Chromeソリューションの場合、各層には少なくとも1つの特性があり、子供やそれが持っている可能性のある偽物にも不可逆的に影響します。 .baseおよび.greyレイヤーの場合、それがフィルタープロパティです。中間層の場合、それがマスクプロパティです。

したがって、これらすべての要素を持っているのはきれいではありませんが、ガラスモルフィズム効果を絵文字でも動(dòng)作させたい場合、より良い解決策がないようです。

寫真には、絵文字には絵文字がないというガラスムルファイズムの効果のみが必要な場合、これは2つの要素だけで実現(xiàn)できます。もう1つは#BluR要素で、Firefoxでのみ必要です。

  Blood 
<article class="'text'" aria-hidden="'true'" data-text="'blood'"> </article>

.text要素の2つの擬似を使用して、ベースレイヤー（::前）と他の2つのレイヤーの組み合わせ（::後）の組み合わせを作成します。ここで私たちを助けてくれるのは、絵文字から絵文字を使って、フィルターを必要としないということです。グレースケール（1）ですが、代わりに色値の飽和成分を制御できます。

これらの2つの偽は、一方の1つを他方の上に積み重ねられており、下部（::前）が同じ量で相殺され、#BluR要素と同じ色を持っています。この色の値は、飽和とアルファの両方を制御するのに役立つフラグ、-fに依存します。 #Blur要素と::擬似の前の両方の場合（ - F：1）、飽和は100％、アルファは1です。

 $ r：5px;

％text {// #blurと両方で使用されています。Textspseudos
   - -F：1;
  グリッドエリア：1/1; // Stack擬似、絶対に配置された#baseについて無視されます
  パディング：.5em;
  色：HSLA（345、calc（var（ -  f）*100％）、55％、calc（.25 .75*var（ -  f）））;
  コンテンツ：attr（data-text）;
}

記事{font：900 21VW/ 1.25筆記體}

#blur {
  位置：絶対;
  下：100VH;
  フィルター：Blur（$ r）;
}

#blur、.text :: before {
  変換：translate（ - 。125em、-.125em）;
  @extend％text;
}

。文章 {
  ディスプレイ：グリッド;
	
  ＆：：後 {
     - -F：0;
    @extend％text;
    z-index：2;
    バックドロップフィルター：Blur（$ r）;
    -webkit-mask：線形勾配（赤、赤）テキスト。

    @supports（background：-moz -element（#blur））{
      背景：-moz -element（#blur）#fff;
      バックグラウンドクリップ：テキスト;
      バックドロップフィルター：なし;
    }
  }
}

クロスブラウザーソリューションをユースケースに適用します

ここでの良いニュースは、リンクアイコン（テキストを含むリンク全體ではなく）にガラスムルファズムの効果のみが実際に物事を少し単純化する特定のユースケースです。

次のパグを使用して構(gòu)造を生成します。

 -data = {
 - ホーム：{ico： '？'、hue：200}、 
 - メモ：{ico： '？?'、hue：260}、 
 - アクティビティ：{ico： '？'、hue：320}、 
 - 発見：{ico： '？'、hue：30}
 - };
-e = object.entries（data）をletします。
-n = e.lengthとします。

nav
  -for（let i = 0; i <n i e .ico a.item style="`" hue .hue deg span.icon.tint aria-hidden="'true'）＃{ico}" span.icon.midl span.icon.grey><p>以下のようなHTML構(gòu)造を生成します。</p>
<pre rel="HTML" data-line=""> <nav>
  <a class="'item'" href="'%EF%BC%83'" style="'" hue>
    <span class="'icon" tint id="'blur0'" aria-hidden="'true'">？</span>
    <span class="'icon" tint aria-hidden="'true'">？</span>
    <span class="'icon" midl aria-hidden="'true'" style="'background-image：-moz-element（＃blur0）'">？</span>
    <span class="'icon" grey aria-hidden="'true'">？</span>
    家
  </a>
  
</nav>

おそらくそれらのスパンの一部を偽物に置き換えることができますが、私はそれがより一貫性があり、このように簡単だと思うので、スパンのサンドイッチです！

非常に重要なことの1つは、アイテムごとに異なるぼやけたアイコンレイヤーがあることです（すべてのアイテムには獨(dú)自のアイコンがあるため）。したがって、.midl要素の背景をスタイル屬性に設(shè)定します。この方法で物事を行うことで、データオブジェクトからエントリを追加または削除すると、CSSファイルに変更が変更されないようになります（メニュー項(xiàng)目の數(shù)を変更します）。

最初にNAV BARを使用したときに、ほぼ同じレイアウトとプレゼントスタイルがありました。唯一の違いは、今ではアイテムのグリッドの上部セルに偽がないことです。スパンがあります：

スパン{
  グリッドエリア：1/1; / *すべての絵文字を互いに積み重ねる */
  font-size：4em; / *絵文字サイズをぶつけます */
}

絵文字のアイコンレイヤー自體については、いくつかのlttleのものがありますが、少し早く得たクロスブラウザーバージョンから多くの変更を加える必要もありません。

まず、スパンの代わりにリンクの仮名を使用していたときに最初に選んだ変換とフィルターチェーンを使用します。また、私たちがここに絵文字しか持っていないことを考えると、重要なのはアルファチャネルのみです。 .baseレイヤーと.greyレイヤー用に保存されているデフォルトは1です。したがって、アルファ、a、チャネルのみが重要な色値を設(shè)定する代わりに、.midl層でそれを0に変更します。また、Style屬性のバックグラウンドイメージをすでに設(shè)定しているため、Firefoxケースの.midl要素に背景色を設(shè)定する必要があります。これは、ソリューションの次の適応につながります。

 .base { / * mono emojiバージョン * /
  変換：translate（.375em、-.25em）回転（22.5deg）;
  フィルター：セピア（1）色相（var（ -  hue））飽和（3）ぼやけ（var（ -  r、0））;
}

.midl { / *ミドル、透明な絵文字バージョン * /
  色：透明; / *したがって、それは見えない */
  バックドロップフィルター：Blur（5px）;
  -webkit-mask：線形勾配（red 0 0）テキスト。
  
  @supports（background：-moz -element（#b））{
    バックグラウンドカラー：#fff;
    バックグラウンドクリップ：テキスト;
    バックドロップフィルター：なし;
  }
}

そしてそれだけです - 私たちはこのナビゲーションバーに素?cái)长圣ⅴぅ偿螗哎楗攻猊毳榨％亥鄤抗虺证盲皮い蓼梗?/p>

世話をすることはもう1つだけです。この効果は常に望んでいません。のみ：Hoverまたは：フォーカス?fàn)顟B(tài)。したがって、.baseスパンの不透明度と変換値を制御するために、フラグ（通常の狀態(tài)で0、次の1つがHoverまたは：フォーカス?fàn)顟B(tài)）を使用します。これは、以前の記事で詳述した手法です。

 $ t：.3s;

{
  / *以前と同じ */
  -HL：0;
  色：HSL（var（ -  hue）、calc（var（ -  hl）*100％）、65％）;
  遷移：$ t;
  
  ＆：HOVER、＆：FOCUS {--HL：1; }
}

.base {
  変身： 
    翻訳（calc（var（ -  hl）*。375em）、calc（var（ -  hl）* - 。25em）） 
    回転（calc（var（ -  hl）*22.5deg））;
  不透明：var（ -  hl）;
  トランジション：$ t、不透明な$ tを変換します。
}

結(jié)果は、アイコンがホバリングまたはフォーカスされているときに、以下のインタラクティブデモで見ることができます。

SVGアイコンを使用するのはどうですか？

私は當(dāng)然、CSS絵文字バージョンを機(jī)能させるのにかかった後、この質(zhì)問を自問しました。プレーンSVGの方法は、スパンサンドイッチよりも理にかなっていませんか？まあ、それはより理にかなっていますが、特に私たちはすべてのために絵文字を持っていないので、それは悲しいことにコードが少なく、それも簡単ではありません。

しかし、別の記事でそれについて詳しく説明します！

以上がCSSにおけるアイコンガラスモルフィズム効果の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。