CSSにおけるアイコンガラスモルフィズム効果

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

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

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

なぜ絵文字？

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

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

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

最初のアイデア

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

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

次のパグで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を中央に配置し、リンクに明示的な幅を与え、上部セルに各リンクの両方の擬似（リンクテキストコンテンツを下のセルにプッシュ）し、リンクテキストと擬似を中央調整します。

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

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

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

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

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

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

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

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

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

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

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

壁にぶつかる

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

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

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

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

問題の根源に到達します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

バグかどうか？

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

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

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

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

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

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

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

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

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

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

  lion？
 lion？

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

.base {color：＃ff7a18; }

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

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

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

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

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

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

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

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

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

この結果とTwitterの提案は、ぼかしがテキストのエッジを尊重する方法を尋ねたときに得たものであり、その境界ボックスのテキストのエッジを尊重する方法ではなく、Chromeの次のステップに導かれました。マスクを最上層（.grey）のテキストにクリップしたマスクを適用しました。このソリューションは2つの理由でFirefoxで機能しません。1つは、悲しいことにWebKitブラウザでのみ機能する非標準マスククリップ値であり、2つは上記のテストで示すように、とにかくFirefoxのマスクによって作成された形状にぼやけた領域を制限しません。

 / *以前と同じ */

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

さて、これは実際に私たちが望むもののように見えますので、私たちは正しい方向に向かっていると言えます！ただし、ここでは、下層にオレンジハート絵文字を使用し、上部半透明層には黒いハート絵文字を使用しました。他の一般的な絵文字には黒と白のバージョンがないので、私の次のアイデアは、最初に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：線形勾配（赤、赤）テキスト。
}

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

これは次のとおりです。これまでのところ、上記の他の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ソリューションに到達します

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

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

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

  lion？
 lion？

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

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

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

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

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

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

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

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

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

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

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

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

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

次のステップは、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要素に設定したぼやけた背景の半透明部分の下にまだ見えます。 .baseレイヤーテキストの鋭いエッジが下にあるのを見たくありませんが、ぼやけてぼんやりが端の近くにピクセルが半透明になるためです。

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

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

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

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

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

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

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

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

私はレイヤーの後にZ-Indexレイヤーを配るのが本当に好きではありませんが、ちょっと、それは低い努力であり、それは機能します！今、私たちは素敵なFirefoxソリューションを持っています：

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

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の結果に影響を与えず、視線外の#BluR要素もありません。これがChromeで機能するためにこれが欠けている唯一のことは、.MIDL要素のバックドロップフィルターとマスク宣言です。

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

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

 $ r：5px;

/ *以前と同じ */

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

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

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

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

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

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

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

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

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

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

写真には、絵文字には絵文字がないというガラスムルファイズムの効果のみが必要な場合、これは2つの要素だけで実現できます。もう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;
      バックグラウンドクリップ：テキスト;
      バックドロップフィルター：なし;
    }
  }
}

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

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

次のパグを使用して構造を生成します。

 -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構造を生成します。</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つは、アイテムごとに異なるぼやけたアイコンレイヤーがあることです（すべてのアイテムには独自のアイコンがあるため）。したがって、.midl要素の背景をスタイル属性に設定します。この方法で物事を行うことで、データオブジェクトからエントリを追加または削除すると、CSSファイルに変更が変更されないようになります（メニュー項目の数を変更します）。

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

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

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

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

 .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;
    バックグラウンドクリップ：テキスト;
    バックドロップフィルター：なし;
  }
}

そしてそれだけです - 私たちはこのナビゲーションバーに素敵なアイコングラスモルフィズム効果を持っています！

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

 $ 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を変換します。
}

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

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

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

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

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