玻璃擬態是什麼？前端該如何實現

你好，玻璃擬態

玻璃擬態是目前市面上的新風格，越來越受歡迎。

新擬態（ Neumorphism [1] ）模仿了受到擠壓的塑料材質（凹凸質感，凸顯層次感），這個新的視覺風格更加註重垂直空間 z 軸的使用。它最典型的特徵是：

• 透明度（使用背景模糊的磨砂玻璃效果）；

• 物體漂浮在空間中，通過前後關係表現層次感；

• 鮮豔的色彩突出了模糊的透明度；

• 半透明物體邊緣的微妙處理，採用細膩的邊框表現玻璃質感。

這些注重空間感的典型特徵，意味這種風格有助於用户建立界面的層次結構和深度。用户可以看到物體間的層次關係，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。

因為它看起來像玻璃，我相信最好的叫法是：「玻璃擬態」Glassmorphism

玻璃擬態的歷史

背景模糊的視覺表現方式，毛玻璃效果最早在 Windows Vista 開始嘗試，在 2013 年 iOS 7 系統中首次被廣泛引入。

這是一個非常重大的變化，但由於當時正處於擬物態快速切換到扁平化的階段，所有的爭議焦點圍繞着無襯線字體和扁平化圖標的變革，背景模糊並沒有受到影響，反而人們似乎很喜歡它。

流行趨勢不斷加強

隨着時間推移，蘋果在他們的移動操作系統中大大減少了模糊的玻璃效果，但是最近在 MacOS Big Sur 中又增加了透明模糊的質感。

觀察這個窗口，看看背景照片被窗口遮擋的部分是如何表現隱約透明的玻璃質感的。我把窗口放在桌面中央，突出了背景模糊效果最明顯的地方。

當然，如果你不喜歡這個風格的話，可以在系統設置中完全關閉這種效果。

Dribbble 上的案例

與其他的 UI 趨勢一樣，一旦流行起來，便會在 Dribbble 出現大量的相關作品。玻璃擬態現在才慢慢地開始流行起來，已經有一些漂亮的案例了。當然，這些案例看起來確實都很不錯，但是並不好應用於上線產品，在實際的手機屏幕上，它們很難這樣去覆蓋背景，因為手機上的應用程序都是全屏的。

前端製作玻璃擬態

代碼 [2]

設置正確的背景透明度

.card {
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    right: 100px;
    bottom: 100px;
    z-index: 10;
    font-family: sans-serif;
    text-align: center;
    width: 300px;
    height: 500px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    background: linear-gradient(
    to top right,
    rgba(90, 149, 207, 0.5),
    rgba(58, 76, 99, 0.8)
    );
    box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2),
    -10px 10px 20px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px); /*  元素後面區域添加模糊效果 */
    border-radius: 20px;
    transform: rotate(-15deg);
}

最重要的是使用 backdrop-filter: blur(6px); 給元素後面區域添加模糊效果

設置合適的背景

body {
height: 100vh;
background: radial-gradient(
    circle at 60% 90%,
    rgba(46, 103, 161, 1),
    transparent 60%
  ),
  radial-gradient(
    circle at 20px 20px,
    rgba(46, 103, 161, 0.8),
    transparent 25%
  ),
  #182336;
}

細節調整

我們可以嘗試為透明層添加一個帶有透明度的 1px 邊框。

參考

Glassmorphism in user interfaces [3

以上就是本文全部內容，希望這篇文章對大家有所幫助，也可以參考我往期的文章或者在評論區交流你的想法和心得，歡迎一起探索前端。