玻璃态：即将到来的 UI 趋势

我最近在 Dribbble 上偶然发现了一个设计，并了解到这个备受关注的新 UI 趋势。阅读本文，了解玻璃态设计以及如何使用 HTML 和 CSS 实现它。

玻璃形态 (Glassmorphism)这个名字本身就很有意思。这个 UI 元素的设计模仿了光滑玻璃的特性。其基本思路是模糊元素的背景，使其呈现出透明的玻璃质感。

在深入研究代码之前，让我们先看一些例子。

MacOS Big Sur
Windows Vista
Dribbble 设计者Praveen Raj

玻璃态的设计特点

以下是有助于营造清爽整洁的玻璃外观的几个设计特点。

透明度：为元素设置浅色透明的背景很重要。
模糊背景：使背景模糊可产生层次感。您可以增强模糊效果，营造出毛玻璃般的质感，使其更具深度。
选择合适的背景：为母版选择色彩鲜艳、充满活力的背景是玻璃形态的理想选择。明亮的渐变色搭配，彼此协调一致，也是不错的选择。你也可以选择边缘清晰、带有圆形/斑点细节等特征的背景。使用这样的图片效果很好，因为当你将略带模糊效果的玻璃元素放在背景上时，背景的边缘会增添视觉效果和深度。
边框：为元素添加 1px 或 2px 的小边框，使其呈现干净的玻璃边缘细节。您也可以选择不添加边框，但我更喜欢添加边框，因为它看起来更美观。

太棒了！现在我们知道了如何利用玻璃态渲染技术打造优秀的 UI。接下来，我们将使用 HTML 和 CSS 来构建这一新 UI 趋势的基本实现。

代码

我们先来分解一下 HTML 元素。我们只有两个元素。A<body>是父元素，另一个<div>是玻璃元素。简单吧？！

接下来是 CSS！需要记住的重要事项是透明度、模糊效果和合适的背景。好了，一切就绪。

查看我们将要使用的两个 CSS 属性

background：使用此属性，我们将为元素添加透明度。颜色将使用 rgba 格式指定为白色。我们将增加“alpha”值以提供透明背景。
backdrop-filter：此属性用于添加模糊效果。它可以更改对比度、亮度并进行颜色变换。这些更改将应用于元素背后的所有内容。要使此效果生效，一个重要的细节是元素的透明背景。其值以 values 形式给出。值越高，模糊效果越强。您可以通过增加模糊值来使玻璃看起来像毛玻璃。让我们看看浏览器兼容性：它适用于 Chrome、Edge、Firefox、Opera 和 Safari。它与 Internet Explorer 和 Android 版 Firefox 不兼容。MDN文档px链接
background-clip：此 CSS 属性与元素的背景相关。通过此属性，您可以决定元素的背景是否延伸到其边框框、填充框或内容框下方。由于我们将设置略微不同的边框颜色以获得玻璃般的 3D 效果，因此合适的值为padding-box。至于浏览器兼容性，它适用于所有可用的浏览器。链接至MDN 文档

以下是玻璃元素的 CSS：

      color: #ecf0f1;
      border-radius: 8px;
      padding: 20px;
      background: rgba( 255, 255, 255, 0.2 );
      border: solid 1px rgba(255,255,255,0.3);
      backgroud-clip: padding-box;
      backdrop-filter: blur(10px );

请查看 codepen 中 Glassmorphism 的简单实现

在我构建了玻璃态的基本实现之后，我一直在思考如何在网页中实际使用它。在构建使用玻璃态的网页的过程中，我有一些经验想与大家分享。

玻璃态本质上是一种元素的装饰。因此，它的最佳用途是用于卡片、通知栏或任何包含 UI 整体元素的区块。请勿将其用于 CTA 元素，因为它们不会弹出！
当您考虑对玻璃元素进行分层时，请确保更改透明度和模糊值以产生多层效果。
选择色彩鲜艳的背景。简单或单调的背景无法凸显玻璃元素在 UI 上的效果。以 Big Sur 和 Windows Vista 为例，它们采用了鲜艳的背景，能够凸显元素的玻璃细节。

好了！完成后，请查看我使用这个新 UI 趋势构建的网页。

代码托管在我的Github上，下面是网页截图。

插图来自 Freepik。版权归Macrovector所有。

就这样结束了！！

这就是我对玻璃态设计 (Glassmorphism) 的理解。我们讨论了这种风格的独特之处，并探讨了如何使用 HTML 和 CSS 重现这种效果。由于它存在一些局限性，并且只在特定情况下有效，我们目前还无法确定它是否会成为 UI 领域的下一个大趋势。但与所有新的 UI 趋势一样，它已经引起了设计师们的兴趣。你可以在 Dribble 和 Behance 上看看一些很酷的设计，从中汲取灵感，打造你自己的专属设计！

希望你喜欢这篇文章。
想看更多类似的文章，请在Twitter上关注我。下次再见 ^_^

文章来源：https://dev.to/omeal/glassmorphism-upcoming-ui-trend-44fk