CSS中的圖標玻璃塑料效應

最近，我遇到了一個很酷的效果，稱為運球鏡頭。我的第一個想法是，如果我只用一些表情符號在圖標中使用一些表情符號而不會浪費時間在svg上，我可以在幾分鐘內迅速重新創建它。

對於那些“幾分鐘”，我再錯了 - 他們最終變得瘋狂而令人沮喪地刮擦了這種癢！

事實證明，儘管有關於如何進行這種效果的資源，但他們都假定覆蓋層是矩形或最多是帶邊框拉迪烏斯的矩形的非常簡單的情況。但是，對圖標等不規則形狀（這些圖標是表情符號還是適當的SVG）的形狀產生玻璃晶狀體效果，比我預期的要復雜得多，因此我認為值得分享該過程，我陷入的陷阱以及我一路上學到的東西。還有我仍然不明白的事情。

為什麼要表情符號？

簡短答案：因為SVG需要太多時間。長答案：因為我缺乏僅將它們繪製在圖像編輯器中的藝術意義，但是我熟悉語法足夠多，因此我通常可以緊湊我在網上發現的現成的SVG，而不到其原始大小的不到10％。因此，我不能僅僅在Internet上找到它們時使用它們 - 我必須重做代碼以使其超級乾淨和緊湊。這需要時間。很多時間，因為這是細節的工作。

而且，如果我想要的只是用圖標快速代碼菜單概念，我可以使用表情符號，在它們上應用過濾器以使其與主題匹配，僅此而已！這是我為這個液體標籤欄互動演示所做的 - 這些圖標都是表情符號！光滑的山谷效應利用了面具合成技術。

好吧，這將是我們的起點：將表情符號用於圖標。

最初的想法

我的第一個想法是將導航鏈接的兩個假（帶有表情符號的含量）堆疊在一起，略微偏移並用變換旋轉底部，以便它們只部分重疊。然後，我將最高的一個半透明劑，其不透明度值小於1，設置背景過濾器：blur（），這應該足夠大。

現在，閱讀了介紹後，您可能會發現這沒有按計劃進行，但是讓我們看看代碼中的外觀以及它的問題。

我們使用以下哈巴狗生成導航欄：

 - 讓數據= {
 - 主：{ico：'？'，色調：200}， 
 - 注意：{iCo：'？？️'，色調：260}，， 
 - 活動：{ico：'？'，色調：320}， 
 - 發現：{ico：'？'，色調：30}
 - };
 - 令e = object.entries（data）;
 - 令n = e.length;

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

哪個彙編到下面的HTML：

 
  <a href="'%EF%BC%83'data-ico"> HOME </a>
  態
  <a href="'%EF%BC%83'data-ico">活動</a>
  <a href="'%EF%BC%83'data-ico" style="'" hue> covery </a>

我們從佈局開始，製作元素網格項目。我們將NAV放置在中間，給出鏈接明確的寬度，將兩個pseudos放在頂部單元格中的每個鏈接（將鏈接文本內容推向底部單元格），然後中間對準鏈接文本和偽造。

車身，nav，a {顯示：網格; }

身體 {
  保證金：0;
  身高：100VH；
}

nav {
  網格 - 自動流：列；
  位置：中心；
  填充：.75EM 0 .375EM;
}

a {
  寬度：5em;
  文字平衡：中心；
  
  ＆::之前，＆:: efter {
    網格區域：1/1；
    內容：attr（data-iCo）;
  }
}

請注意，表情符號的外觀將有所不同，具體取決於您使用的瀏覽器查看演示。

我們選擇一個清晰的字體，凸起其大小，使圖標更大，設置背景，並為每個鏈接提供更好的顏色（基於每個鏈接的-hue自定義屬性）：

身體 {
  / *與以前相同 */
  背景：＃333;
}

nav {
  / *與以前相同 */
  背景：#fff;
  字體：夾具（.625EM，5VW，1.25EM）/ 1.25 Ubuntu，sans-serif;
}

a {
  / *與以前相同 */
  顏色：HSL（var（-hue），100％，50％）;
  文本介紹：無；
  
  ＆::之前，＆:: efter {
    / *與以前相同 */
    字體大小：2.5em;
  }
}

這是事情開始變得有趣的地方，因為我們開始區分使用鏈接偽造創建的兩個表情符號層。我們稍微移動並旋轉pseudo之前，用棕褐色（1）過濾器使其單色，使其正確地調出，然後撞到其對比度（） - 一種來自Lea Verou的Oldie，但Goldie Technique。我們還在:: pseudo之後應用灰度（1）並使其使其半透明，因為否則，我們將無法通過它看到另一個偽。

 a {
  / *與以前相同 */
  
  ＆：：前 {
    轉換： 
      翻譯（.375EM，-.25EM） 
      旋轉（22.5攝氏度）;
    篩選： 
      棕褐色（1） 
      色 - 旋轉（calc（var（ -  hue）-50DEG））））） 
      飽和（3）;
  }
	
  ＆：：後 {
    不透明：.5;
    過濾器：灰度（1）;
  }
}

撞牆

到目前為止，太好了……那呢？下一步，我愚蠢地認為，當我有了編寫編碼的想法時，這將是最後一步，涉及在頂部（:: :: after）層設置BlackDrop-Filter：Blur（5px）。

請注意，Firefox仍然需要gfx.webrender.all and layout.css.backdrop-filter.enabled標誌設置為true的標誌：in of：config，為了使背景濾波器屬性可行。

可悲的是，結果看起來與我期望的不像。我們得到了整個頂部圖標邊界框的大小的覆蓋，但是底部圖標並沒有真正模糊。

但是，我敢肯定，我之前已經玩過背景過濾器：Blur（），而且效果很好，那麼這裡發生了什麼？

達到問題的根源

好吧，當您不知道為什麼某件事不起作用時，您所能做的就是舉一個工作示例，開始調整它以嘗試獲得想要的結果……看看它破裂了！

因此，讓我們看看我較舊的工作演示的簡化版本。 HTML只是一節中的一篇文章。在CSS中，我們首先設置一些維度，然後在該部分上設置一個圖像背景，並在文章中設置一個半透明的背景。最後，我們在文章中設置了背景濾波器屬性。

 {背景：url（cake.jpg）50％/封面； }

文章 {
  利潤：25Vmin;
  身高：40VH；
  背景：HSLA（0，0％，97％，.25）;
  背景過濾器：模糊（5px）;
}

這起作用，但我們不希望我們的兩個層彼此嵌套。我們希望他們成為兄弟姐妹。因此，讓我們做兩個層文章兄弟姐妹，使它們部分重疊，看看我們的玻璃塑態效應是否仍然有效。

 <artical class="'Base'"> 
<artical class="'Gray'"> </artical></artical>

文章{寬度：66％;身高：40VH； }

.base {背景：url（cake.jpg）50％/封面； }

。灰色的 {
  保證金：-50％0 0 33％；
  背景：HSLA（0，0％，97％，.25）;
  背景過濾器：模糊（5px）;
}

在鍍鉻中，一切似乎都很好，並且在大多數情況下也是Firefox。只是blur（）在Firefox中的邊緣處理的方式看起來很尷尬，而不是我們想要的。而且，根據規格中的少數圖像，我相信Firefox的結果也不正確？

我想在我們的兩個層坐在堅固的背景上（在這種特殊情況下為白色）的情況下，Firefox問題的一個解決方法是為底層（.basase）一個沒有偏移，沒有偏移的盒子陰影，沒有模糊，而塗抹半徑是兩倍的模糊半徑，我們用於在頂層上使用背景濾波器（.grey）。果然，在我們的特殊情況下，此修復程序似乎可以起作用。

如果我們的兩個層坐在帶有未固定的圖像背景的元素上（在這種情況下，我們可以使用分層的背景方法來解決Firefox問題），那麼事情會變得更加毛髮，但這裡不是這樣，因此我們不會進入它。

不過，讓我們繼續下一步。我們不希望我們的兩個層是兩個平方盒，然後我們希望成為表情符號，這意味著我們不能使用HSLA（）背景來確保頂部的半平等 - 我們需要使用不透明度。

 。灰色的 {
  / *與以前相同 */
  不透明：.25;
  背景：HSL（0，0％，97％）;
}

看來我們發現了問題！由於某種原因，使用不透明度製作頂層半透明會破壞Chrome和Firefox的背景濾波器效應。那是一個錯誤嗎？那應該發生什麼嗎？

錯誤與否？

MDN在Backdrop-Filter頁面上的第一段中說以下內容：

因為它適用於元素背後的所有內容，以查看必須使元素或其背景至少部分透明的效果。

除非我不了解上述句子，否則這似乎表明不透明度不應該打破效果，即使它在鉻和Firefox中都可以。

規格呢？好吧，規格是一堵大文字牆，沒有許多插圖或互動演示，用一種語言編寫，使閱讀它與嗅探臭鼬的氣味一樣吸引人。它包含了這部分，我有一種感覺可能是相關的，但是我不確定我要說的是要說的是 - 在頂部元素上設置的不透明度，我們也將背景過濾器也用於下面的兄弟姐妹嗎？如果這是預期的結果，那麼在實踐中肯定不會發生。

除非元素B的某些部分是半透明的，否則將看不到背景過濾器的效果。另請注意，應用於元素B的任何不透明度也將應用於過濾的背景圖像。

嘗試隨機的事情

無論規格可能說什麼，事實仍然存在：使頂層半透明具有不透明度的特性會破壞鍍鉻和Firefox中的玻璃晶狀體效應。還有其他方法可以使表情符號半透明嗎？好吧，我們可以嘗試過濾器：opacity（）！

在這一點上，我可能應該報告這種替代方案是否有效，但現實是……我不知道！我在此步驟上花了幾天的時間，並在此步驟中進行了無數次的檢查 - 有時它有效，有時它在完全相同的瀏覽器中，根據一天中的時間的不同結果。我還在Twitter上問，得到了不同的答案。當您不禁要問萬聖節鬼是否沒有困擾，嚇到和疤痕您的代碼時，只是其中之一。永恆！

看來所有希望都消失了，但是讓我們只嘗試一件事：用文本代替矩形，最高的是顏色的半透明：hsla（）。我們可能無法獲得我們所追求的涼爽表情符號效果，但也許我們可以得到純文本的結果。

因此，我們將文本內容添加到我們的文章元素中，放棄其明確的尺寸，凸起其字體大小，調整空間，從而使我們局部重疊，最重要的是，用顏色替換上一個工作版本中的背景聲明。出於可訪問性原因，我們還將aria-hidden ='true'設置在底部。

 <artical class="'Base'Aria-Hidded">獅子？
<artical class="'Gray'">獅子？</artical></artical>

文章{字體：900 21VW/ 1草書； }

.base {顏色：＃ff7a18; }

。灰色的 {
  保證金：-.75EM 0 0 .5EM;
  顏色：HSLA（0，0％，50％，.25）;
  背景過濾器：模糊（5px）;
}

這裡有幾件事要注意。

首先，將顏色屬性設置為具有亞軍alpha的值，還可以使表情符號半透明，而不僅僅是純文本，無論是在Chrome還是在Firefox中！考慮到其他渠道不會以任何方式影響表情符號，這是我以前從未知道的事情，我發現絕對令人震驚。

其次，Chrome和Firefox都模糊了橙色文本和表情符號的整個區域，這些區域在頂部半透明灰色層的邊界框下方發現，而不僅僅是模糊實際文本下面的內容。在Firefox中，由於尷尬的鋒利邊緣效果，情況看起來更糟。

即使盒子的模糊不是我們想要的，我也不禁認為這確實有意義，因為規格確實說了以下內容：

[…]創建一個“透明”元素，可以看到完整的過濾背景圖像，您可以使用“背景色：透明;”。

因此，讓我們進行測試以檢查當頂層是另一個不是文本的非矩形形狀時發生的情況，而是用背景梯度，剪貼式路徑或口罩獲得的！

在Chrome和Firefox中，當以背景獲得形狀時，頂層整個盒子下方的區域都會模糊：漸變（），如以前的文本情況所述，根據規格有意義。但是，Chrome尊重夾子路徑和麵罩形狀，而Firefox則不尊重。而且，在這種情況下，我真的不知道哪個是正確的，儘管鉻的結果對我來說確實更有意義。

朝鍍鉻溶液移動

當我問如何使模糊文本邊緣而不是其邊界盒的模糊時，我得到了這個結果，也是我得到的Twitter建議。該解決方案在Firefox中不起作用的原因有兩個：一個原因，可悲的是，僅在Webkit瀏覽器中起作用的非標準蒙版-CLIP值，而在上面的測試中，掩模並不將模糊區域限制在Firefox中蒙版所產生的形狀。

 / *與以前相同 */

。灰色的 {
  / *與以前相同 */
  -webkit面具：線性級別（紅色，紅色）文本； / *僅在Webkit瀏覽器中工作 */
}

好吧，這實際上看起來像我們想要的，所以我們可以說我們正朝著正確的方向前進！但是，在這裡，我們使用了橙色的心臟表情符號作為底層，而黑心表情符號則用於頂部半透明層。其他通用表情符號沒有黑白版本，所以我的下一個想法是最初使這兩層相同，然後將頂部的一個半透明劑和使用過濾器製成：灰度（1）。

文章 { 
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25草書；
}

。灰色的 {
  -a：.25;
  保證金：-1EM 0 0 .5EM;
  過濾器：灰度（1）;
  背景過濾器：模糊（5px）;
  -webkit面具：線性級別（紅色，紅色）文本；
}

好吧，那肯定會產生我們想要的效果。不幸的是，出於某種奇怪的原因，它似乎也影響了下面的層的模糊區域。這一刻是要簡要考慮將筆記本電腦扔出窗口的地方……在獲得添加另一層的想法之前。

它會像這樣：我們有基礎層，就像我們到目前為止，與上面的其他兩個相距略有偏見。中間層是一個“幽靈”（透明），它應用了背景過濾器。最後，頂部是半透明的，並獲取灰度（1）濾波器。

身體{顯示：網格; }

文章 {
  網格區域：1/1；
  位置：中心；
  填充：.25em;
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25 Pacifico，Z003，Segoe腳本，漫畫Sans MS，草書；
}

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

.midl {
  -a：0;
  背景過濾器：模糊（5px）;
  -webkit面具：線性級別（紅色，紅色）文本；
}

.grey {過濾器：灰度（1）不透明度（.25）}

現在我們到達某個地方！還有另一件事要做：使基層單色！

 / *與以前相同 */

。根據 {
  保證金：-.5EM 0 0 -.5EM;
  濾鏡：棕褐色（1）色 - 旋轉（165DEG）對比度（1.5）;
}

好吧，這就是我們想要的效果！

進入Firefox解決方案

在編碼Chrome解決方案時，我不禁認為我們可能能夠在Firefox中取得相同的結果，因為Firefox是唯一支持元素（）函數的瀏覽器。此功能使我們可以採用一個元素，並將其用作另一個元素的背景。

這個想法是，.base和.grey層具有與Chrome版本相同的樣式，而中間層將具有（通過元素（）函數）我們層的模糊版本的背景。

為了使事情變得更容易，我們僅從這個模糊的版本和中層開始。

 獅子？
<artical class="'Midl'">獅子？</artical>

我們絕對將模糊的版本定位（目前仍將其視為），使其單色並模糊，然後將其用作.midl的背景。

 #blur {
  位置：絕對；
  頂部：2em;右：0;
  保證金：-.5EM 0 0 -.5EM;
  過濾器：棕褐色（1）色 - 旋轉（165DEG）對比度（1.5）Blur（5px）;
}

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

我們還將文字在.midl元素半透明式上進行了，因此我們可以通過它看到背景。最終我們將使其完全透明，但是就目前而言，我們仍然希望看到其相對於背景的位置。

我們可以立即註意到一個問題：雖然保證金可以抵消實際的#Blur元素，但它無濟於事，可以轉移其作為背景的位置。為了獲得這種效果，我們需要使用轉換屬性。如果我們想要旋轉或任何其他變換，這也可以幫助我們，因為它可以在下面看到我們用變換替換邊緣的地方：旋轉（-9DEG）。

好吧，但是我們仍然堅持現在的翻譯：

 #blur {
  / *與以前相同 */
  變換：轉換（ - 。25EM，-.25EM）; / *更換保證金 */
}

這裡要注意的一件事是，隨著中間層的填充框的限制，它有些模糊的背景被切斷。無論如何，這並不重要，因為我們的下一步行動是將背景夾在文本區域中，但是只有該空間就可以了，因為.base層將被翻譯到遠處。

因此，即使在這一點上，我們也會在視覺上毫無區別，因為我們還設置了backgrows-clip：.midl元素上的文本，我們也將稍微提高填充物。

文章 {
  / *與以前相同 */
  填充：.5em;
}

#blur {
  位置：絕對；
  底部：100VH;
  變換：轉換（ - 。25EM，-.25EM）;
  過濾器：棕褐色（1）色 - 旋轉（165DEG）對比度（1.5）Blur（5px）;
}

.midl {
  -a：.1;
  背景：-moz -element（#blur）;
  背景剪輯：文字；
}

我們還將#Blur元素移到了視線之外，並進一步降低了.midl元素的顏色的alpha，因為我們希望通過文本在背景上更好地視野。我們並沒有使其完全透明，但是現在仍然可以看到它，以便我們知道它覆蓋的區域。

下一步是添加帶有與Chrome情況相同的樣式的.basase元素，只能用轉換代替邊距。

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'">獅子？</artical></artical>

 #blur {
  位置：絕對；
  底部：100VH;
  變換：轉換（ - 。25EM，-.25EM）;
  過濾器：棕褐色（1）色 - 旋轉（165DEG）對比度（1.5）Blur（5px）;
}

。根據 {
  變換：轉換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋轉（165DEG）對比度（1.5）;
}

由於這些樣式的一部分很常見，因此我們還可以在模糊元素#blur上添加.basase類，以避免重複並減少我們編寫的代碼量。

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'">獅子？</artical></artical>

 #blur {
  -r：5px;
  位置：絕對；
  底部：100VH;
}

。根據 {
  變換：轉換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋酸鹽（165DEG）對比度（1.5）Blur（var（-r，0））;
}

我們這裡有一個不同的問題。由於.base層具有轉換，因此儘管DOM順序，它現在位於.Midl層的頂部。最簡單的修復？在.midl元素上添加z index：2！

我們仍然有另一個更微妙的問題：在.Midl元素上設置的模糊背景的半透明部分下方仍然可以看到.base元素。我們不想看到下面的.base層文本的尖銳邊緣，但是我們是因為模糊會導致像素接近邊緣變成半透明的像素。

根據我們在文本層的父母身上有哪種背景，這是一個可以通過少量或大量精力來解決的問題。

如果我們只有堅實的背景，則通過將.Midl元素上的背景色設置為相同的值來解決問題。幸運的是，這恰好是我們的情況，因此我們不會討論其他情況。也許在另一篇文章中。

 .midl {
  / *與以前相同 */
  背景：-moz -element（#blur）#fff;
  背景剪輯：文字；
}

我們在Firefox中取得了不錯的成績！剩下要做的就是添加頂部.grey層，其樣式與Chrome版本完全相同！

 .grey {過濾器：灰度（1）不透明度（.25）; }

可悲的是，這樣做並不能產生我們想要的結果，如果我們還將中間層文本完全透明（通過將其alpha -a：0）使中間層文本完全透明，那麼我們只會看到其背景（在固體白色頂部使用模糊的元素#blur）夾在文本區域：

問題是我們看不到.grey層！由於設置了z索引：2，中間層.MIDL現在還是在頂層（.grey One）上方，儘管有DOM順序。解決方案？設置z索引：3上的.grey層！

 。灰色的 {
  z索引：3;
  過濾器：灰度（1）不透明度（.25）;
}

我真的不喜歡一層給出z索引，但是，嘿，這很努力，而且有效！我們現在有一個不錯的Firefox解決方案：

將我們的解決方案組合到跨瀏覽器中

我們從Firefox代碼開始，因為還有更多：

 獅子？
<artical class="'Base'Aria-Hidded">獅子？
<artical class="'Midl'Aria-Hidded">獅子？
<artical class="'Gray'">獅子？</artical></artical></artical>

身體{顯示：網格; }

文章 {
  網格區域：1/1；
  位置：中心；
  填充：.5em;
  顏色：HSLA（25，100％，55％，var（-a，1））;
  字體：900 21VW/ 1.25草書；
}

#blur {
  -r：5px;
  位置：絕對；
  底部：100VH;
}

。根據 {
  變換：轉換（ - 。25EM，-.25EM）;
  濾鏡：棕褐色（1）色 - 旋酸鹽（165DEG）對比度（1.5）Blur（var（-r，0））;
}

.midl {
  -a：0;
  z索引：2;
  背景：-moz -element（#blur）#fff;
  背景剪輯：文字；
}

。灰色的 {
  z索引：3;
  過濾器：灰度（1）不透明度（.25）;
}

額外的z索引聲明不會影響鉻的結果，並且視覺#blur元素也不會影響。為了在Chrome中起作用的唯一缺少的是背景濾波器和.midl元素上的蒙版聲明：

背景過濾器：模糊（5px）;
-webkit面具：線性級別（紅色，紅色）文本；

由於我們不希望在Firefox中應用背景過濾器，也不希望背景在Chrome中應用，因此我們使用@supports：

 $ r：5px;

/ *與以前相同 */

#blur {
  / *與以前相同 */
  -r：＃{$ r};
}

.midl {
  -a：0;
  z索引：2;
  / *需要在@supports內部重置，以免將其應用於Firefox */
  背景過濾器：Blur（$ r）;
  / * Firefox中無效的值，無論如何都沒有應用，無需重置 */
  -webkit面具：線性級別（紅色，紅色）文本；
  
  @supports（背景：-moz -element（#blur））{ / * for Firefox * /
    背景：-moz -element（#blur）#fff;
    背景剪輯：文字；
    背景過濾器：無；
  }
}

這為我們提供了跨瀏覽器解決方案！

雖然在兩個瀏覽器中的結果並不相同，但它仍然非常相似，對我來說足夠了。

一個元素的解決方案呢？

可悲的是，這是不可能的。

首先，Firefox解決方案要求我們至少具有兩個元素，因為我們使用一個元素（由其ID引用）作為另一個元素。

其次，雖然其餘三層的第一個想法（無論如何，這是我們唯一需要的鉻解決方案）是，其中一個可能是實際元素，而其他兩個則可能是偽造的，但在這種特殊情況下，它並不那麼簡單。

對於Chrome解決方案，每個層都有至少一個特性，它也會不可逆地影響任何兒童及其可能擁有的任何偽造物。對於.base和.grey層，這就是過濾器屬性。對於中間層，這是掩模屬性。

因此，儘管擁有所有這些元素並不是很漂亮，但如果我們希望玻璃晶狀體效應也可以在表情符號上起作用，看起來我們沒有更好的解決方案。

如果我們只想對純文本產生玻璃晶狀體影響 - 圖片中沒有表情符號 - 只需兩個元素即可實現，其中只需要一個元素才能用於鍍鉻溶液。另一個是#blur元素，我們只需要在Firefox中。

 血液
<artical class="'text'aria-hidded"> </artical>

我們使用.TEXT元素的兩個偽群來創建基礎層（以::之前）和其他兩個層的組合（帶有::後面）。在這裡有幫助的是，隨著表情符號的圖像，我們不需要過濾器：灰度（1），而是我們可以控制顏色值的飽和成分。

這兩個偽堆在另一個偽造的頂部，底部的一個（::前）被相同的量偏移，並且具有與#Blur元素相同的顏色。該顏色值取決於一個標誌 - -f，有助於我們控制飽和度和alpha。對於#blur元素和偽元素和:: pseudo（-f：1）之前，飽和度為100％，alpha為1。對於pseudo（-f：0）之後的:: ::飽和度為0％，而alpha為.25。

 $ r：5px;

％text {// #blur和兩個.text pseudos使用
  -f：1;
  網格區域：1/1； //堆棧pseudos，絕對定位的#base忽略了
  填充：.5em;
  顏色：HSLA（345，calc（var（-f）*100％），55％，calc（.25 .75*var（-f）））;
  內容：attr（data-text）;
}

文章{字體：900 21VW/ 1.25草書}

#blur {
  位置：絕對；
  底部：100VH;
  過濾器：Blur（$ r）;
}

#blur，.text :: {
  變換：翻譯（ - 。125EM，-.125EM）;
  @extend％text;
}

.文字 {
  顯示：網格；
	
  ＆：：後 {
    -f：0;
    @extend％text;
    z索引：2;
    背景過濾器：Blur（$ r）;
    -webkit面具：線性級別（紅色，紅色）文本；

    @supports（背景：-moz -element（#blur））{
      背景：-moz -element（#blur）#fff;
      背景剪輯：文字；
      背景過濾器：無；
    }
  }
}

將跨瀏覽器解決方案應用於我們的用例

這裡的好消息是我們的特殊用例，在該情況下，我們只對鏈接圖標產生玻璃效果效果（不在整個鏈接上，包括文本）實際上簡化了一點一點。

我們使用以下哈巴狗生成結構：

 - 讓數據= {
 - 主：{ico：'？'，色調：200}， 
 - 注意：{iCo：'？？️'，色調：260}，， 
 - 活動：{ico：'？'，色調：320}， 
 - 發現：{ico：'？'，色調：30}
 - };
 - 令e = object.entries（data）;
 - 令n = e.length;

導航
   -  for（讓i = 0; i <n i e .ico a.item .hue deg span.icon.tint span.icon.midl span.icon.grey><p>它產生了下面的HTML結構：</p>
<pre rel="HTML" data-line=""> 
  <a class="'item'href" hue>
    <span class="'圖標tint'id">？</span>
    <span class="'圖標色調'aria-hidded">？</span>
    <span class="'iCon" midl>？</span>
    <span class="'圖標灰色'aria-hidded">？</span>
    家
  </a>
  

我們可能可以用偽造代替這些跨度的一部分，但是我覺得它更加一致，更容易，所以跨度三明治！

值得注意的一件事是，我們對每個項目都有一個不同的模糊圖標層（因為每個項目都有自己的圖標），因此我們將.Midl元素的背景設置為樣式屬性。如果我們添加或刪除數據對象的條目（從而更改菜單項的數量），以這種方式進行操作可以避免對CSS文件進行任何更改。

當我們第一次CSS-ED The Nav Bar時，我們幾乎具有相同的佈局和風化的樣式。唯一的區別是，現在我們在項目網格的頂部單元格中沒有偽造。我們有跨度：

跨度{
  網格區域：1/1； / *將所有表情符號彼此堆疊在一起 */
  字體大小：4em; / *凸起表情符號大小 */
}

對於表情符號圖標本身，我們也不需要從跨瀏覽器版本中進行許多更改，儘管有一些lttle。

首先，我們使用最初選擇的轉換和濾網鏈，而不是使用鏈接偽造而不是跨度。從那以後，我們也不需要顏色：hsla（）聲明，因為我們只有表情符號在這裡，所以只有alpha頻道才是重要的。為.base和.grey層保留的默認值是1。因此，我們不在設置一個顏色值，而只有alpha，-a，通道很重要，我們將其更改為.midl層上的0，我們將其直接設置為顏色：透明。我們也只需要在Firefox情況下的.midl元素上設置背景色，因為我們已經在樣式屬性中設置了背景圖像。這導致了解決方案的以下適應：

 .base { / * mono emoji版本 * /
  變換：translate（.375em，-.25em）旋轉（22.5DEG）;
  濾鏡：棕褐色（1）色調旋轉（var（-hue））飽和（3）Blur（var（-r，0））;
}

.midl { / *中間，透明表情符號版本 * /
  顏色：透明； / *所以看不到 */
  背景過濾器：模糊（5px）;
  -webkit mask：線性級別（紅色0 0）文本;
  
  @supports（背景：-moz -element（#b））{
    背景色：#FFF;
    背景剪輯：文字；
    背景過濾器：無；
  }
}

就是這樣 - 我們對此NAV欄具有不錯的圖標玻璃效果！

只有一件事要照顧 - 我們一直不希望這種效果；僅在：懸停或：焦點狀態。因此，我們將使用一個標誌，即正常狀態為0，在：懸停或：焦點狀態中為1，以控制不透明度並轉換.base跨度的不透明度。這是我在早期文章中詳細介紹的一種技術。

 $ t：.3s;

a {
  / *與以前相同 */
  -hl：0;
  顏色：HSL（var（-hue），calc（var（-hl）*100％），65％）;
  過渡：顏色$ t;
  
  ＆：Hover，＆：focus {-hl：1; }
}

。根據 {
  轉換： 
    翻譯（calc（var（-hl）*。375EM），calc（var（-hl）* - 。25EM）） 
    旋轉（calc（var（-hl）*22.5DEG））;
  不透明度：var（-hl）;
  過渡：變換$ t，不透明度$ t;
}

當圖標懸停或聚焦時，可以在下面的交互式演示中看到該結果。

使用SVG圖標怎麼樣？

在完成CSS表情符號版本所需的一切之後，我自然而然地問自己這個問題。普通的SVG方式是否比跨度三明治更有意義，這不是很簡單嗎？好吧，雖然這確實更有意義，尤其是因為我們沒有表情符號，但可悲的是代碼不少，而且也不是更簡單。

但是，我們將在另一篇文章中詳細介紹！

以上是CSS中的圖標玻璃塑料效應的詳細內容。更多資訊請關注PHP中文網其他相關文章！