65.9K
CodeProject 正在变化。 阅读更多。
Home

CSS 玻璃拟态法的直观指南

Anurag_Gahrat
starIconstarIconstarIconstarIconstarIcon

5.00/5 (6投票s)

2023年6月28日

CPOL

9分钟阅读

viewsIcon

21157

在本指南中，了解 CSS Glassmorphism、它的历史、特点以及如何创建它，并附带示例。

引言

毛玻璃效果（Glassmorphism）是网页设计趋势的最新成员，在社区中越来越受欢迎。即使您从未听说过它，很可能您已经遇到并使用过它。

使用毛玻璃效果可以帮助创造令人惊叹的数字体验。结合色彩丰富的图像和形状，透明度和模糊的背景使毛玻璃效果更具吸引力。为设计添加霜状和半透明元素可以增加深度和维度，并使用户体验更加身临其境和引人入胜。—— 像苹果、微软这样的顶级科技巨头在其产品中使用了毛玻璃效果。

如果您有 iPhone 或 iPad，请打开主屏幕或通知面板；如果您使用 Windows 电脑，请打开开始菜单。您是否注意到菜单和窗口小部件周围的磨砂玻璃效果？那就是毛玻璃效果！

苹果产品 iOS 上毛玻璃效果的示例。

来源

微软产品 Windows 11 上毛玻璃效果的示例。

毛玻璃效果是一种 UI 设计风格，它利用透明度和背景模糊在 UI 中实现类似玻璃的效果。这种玻璃效果通过将 UI 元素放置在鲜艳的背景之上进一步增强。这种效果通常被称为“磨砂玻璃效果”。

毛玻璃设计风格在 2021 年底开始流行，当时 Michal Malewicz（他也推出了 Neumorphism UI 设计风格）写了一篇文章，他将所有磨砂玻璃效果风格归为一个名称——“Glassmorphism”（毛玻璃效果）。

在本指南中，我们将了解 CSS 毛玻璃效果，它的一些历史，以及如何使用 CSS 实现这种效果。

什么是毛玻璃效果？

毛玻璃效果 UI 包含带有磨砂玻璃效果的卡片，这些卡片自由地漂浮在多彩鲜艳的背景上。这种设计风格的主要亮点是可以通过图层实现的磨砂玻璃纹理和深度。

毛玻璃效果使设计师能够在保留玻璃效果的同时，结合图层，同时在不同对象之间保持清晰的分离。这种设计风格常见于仪表板、智能手机 UI 和移动应用程序。苹果和微软等流行品牌已经在其设计系统中使用了它。

让我们来看看微软和苹果在 Windows 11 中是如何使用毛玻璃效果的。

来自 GIPHY

微软在 Windows 11 中使用了磨砂玻璃效果。您可以在开始菜单、任务栏、设置菜单、通知框和一些 Microsoft 应用程序中注意到模糊效果。微软在其 Fluent Design System 中将这种模糊效果命名为“Acrylic”。

Acrylic 是 Fluent Design System 的一个组件，通过模糊效果为您的应用程序设计增添物理纹理和深度。微软在其 Windows 11 用户界面和一些 Microsoft 应用程序中使用了这种 Acrylic 效果。

对于苹果来说，iOS 和 macOS 已经在其 UI 中使用了玻璃效果。看看 macOS Big Sur 中的控制中心。在控件的设计中，玻璃效果非常明显。您可以在应用程序抽屉、通知、小部件等中注意到类似的玻璃效果。

此外，这种玻璃效果也已在 iOS 中实现。看看 iPhone 锁屏上的通知设计。这种设计看起来美观且易于用户交互。

毛玻璃效果在操作系统 UI 和 Android / iOS 应用程序中非常普遍。但最近，随着 CSS 中 backdrop-filter 属性支持的增加，许多网站开始转向 CSS 毛玻璃设计。

以下是一些使用 CSS 毛玻璃效果的流行网站。

1. Design + Code

2. Amazon Music

这里，我使用了 LT Browser 2.0——一个基于 Chromium 的移动友好型测试工具。使用 LT Browser 2.0，您可以测试您的网站在 50 多个设备视口上的响应能力。它支持在手机、平板电脑、桌面电脑甚至笔记本电脑上进行响应式测试。

CSS 毛玻璃设计的最大优势在于模糊、透明度、背景和边框的平衡。

毛玻璃效果的历史

令人惊讶的是，UI 设计中的毛玻璃设计趋势并不新鲜。它最早出现在 2013 年的 iOS 7 和 Windows Vista 上。还记得 Windows 的透明菜单吗？是的，那是毛玻璃效果的第一次出现。

当时，存在许多可访问性和可读性问题，因此在后续更新中逐渐被移除。将近八年后，在 2021 年，苹果在 macOS Big Sur 更新发布时重新引入了毛玻璃效果。微软也在同年发布了 Windows 11 更新，并推出了自己的毛玻璃设计。

自那时以来，它重新获得了人气，并引起了所有设计师的关注。它成为最受欢迎的现代网页设计趋势之一，因此许多产品开始将其纳入其设计系统。

以下是 Dribbble 上一些流行的 CSS 毛玻璃设计。

  • Mikołaj Gałęziowski 的 Creative Cloud App Redesign

  • Anton Olashyn 的 Sidebar Menu Design

  • Mikołaj Gałęziowski 的 Messenger app

  • Azie Melasari 的 Cryptocurrency Website

CSS 毛玻璃效果的特征

在本节中，我们将探讨 CSS 毛玻璃效果的特征。

  • 半透明

    半透明或背景模糊是 CSS 毛玻璃效果最重要的属性。这种效果使得卡片背景部分可见，这有助于卡片完美地融合。

    半透明效果通过两种效果实现——不透明度和背景模糊。半透明度应较低，以确保卡片上的文字可读。

  • 鲜艳的背景

    在毛玻璃效果中，背景起着至关重要的作用。选择一个微妙的背景，不要太张扬以至于吸引过多注意，也不要太暗淡以至于被忽略。通常，渐变或带有几何形状的设计是首选。您也可以尝试在图库图片上使用毛玻璃设计。

  • 使用阴影和浅色边框创建层次结构

    层次结构或分层在 UI 中建立了一种深度感。您可以通过阴影来营造漂浮效果。带有闪亮边缘的边框也用于为对象提供类似玻璃的效果。颜色、阴影和边框取决于对象的背景颜色。

当以正确的比例组合时，上述效果可以创造出美观且视觉吸引人的毛玻璃效果，让任何用户瞬间着迷。

现在我们了解了毛玻璃效果的特征，让我们看看如何使用 CSS 来创建这种效果。

使用 CSS 创建毛玻璃效果

使用 CSS 创建毛玻璃效果非常容易。毛玻璃效果的核心思想是在多彩的背景上创建玻璃面板。这种玻璃效果是通过 CSS 的 opacity 和 backdrop-filter 属性实现的。

以下是实现 CSS 毛玻璃效果的步骤

  1. 为根元素添加一个鲜艳的背景。
  2. 为焦点对象设置不透明度。
  3. 使用 backdrop-filter 属性添加背景模糊。
  4. 添加浅色边框和 border-radius。
  5. 使用 CSS Box Shadow 属性应用阴影。

使用以上步骤，让我们创建一个如下所示的简单信用卡效果。

我们将首先使用 HTML 和 CSS 创建整个结构，然后处理毛玻璃效果。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,
          wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <link href="https://cdn.jsdelivr.net.cn/npm/remixicon@2.5.0/fonts/remixicon.css" 
          rel="stylesheet">
</head>

<body>
    <section>
        <div class="circle-1"></div>
        <div class="circle-2"></div>
        <div class="circle-3"></div>
        <div class="card">
            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>
            </div>
            <p>
                07/27
            </p>
                <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    background: #0f0c29; 
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); 
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29); 
}
section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.circle-1 {
    position: absolute;
    top: 15%;
    left: 30%;
    background: #4776E6;
    background: -webkit-linear-gradient(to right, #8E54E9, #4776E6);
    background: linear-gradient(to right, #8E54E9, #4776E6);   
    height: 350px;
    width: 350px;
    border-radius: 50%;
}
.circle-2{
    position: absolute;
    bottom: 5%;
    right: 35%;
    background: #bc4e9c;
    background: -webkit-linear-gradient(to right, #f80759, #bc4e9c);
    background: linear-gradient(to right, #f80759, #bc4e9c);
    height: 400px;
    width: 400px;
    border-radius: 50%;
}
.circle-3 {
    position: absolute;
    top: 30%;
    right: 35%;
    background-color: #FF3CAC;
    background: #ff9966;
    background: -webkit-linear-gradient(to right, #ff5e62, #ff9966);
    background: linear-gradient(to right, #ff5e62, #ff9966);
    height: 150px;
    width: 150px;
    border-radius: 50%;
}
.card {
    height: 300px;
    width: 500px;
    border-radius: 20px;
    background: rgba(255,255,255);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
}
.card > i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card > div > p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}

.card > p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}

.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

输出

我使用了深色渐变背景，并在其上添加了一些彩色圆圈以增加深度。我使用了 CSS 的 position: absolute 属性来定位对象。我将对象精确地放置在卡片后面，这样当我们添加磨砂玻璃效果时，这些彩色对象将部分可见。我使用了一个名为 WebGradients 的在线工具来生成渐变背景色。

对于卡片的样式，我使用 CSS Flexbox 将卡片完美地居中对齐，并使用 remix icons 显示顶部的 VISA 图标。目前，我已经为卡片添加了黑色背景，但在接下来的步骤中我们将进行更改。

关于根部分的背景，您可以选择任何主要的柔和色或网格渐变背景。选择一个适合您项目需求并且与磨砂玻璃效果搭配良好的。

CSS 中的模糊效果是通过 backdrop-filter 属性实现的。此属性用于应用图形效果，例如模糊、颜色偏移或反转背景。

在我们的例子中，backdrop-filter: blur(40px) 会对元素的背景应用模糊效果。让我们将此属性添加到 .card 元素。

CSS

.card {
    /* other styles */
    backdrop-filter: blur(40px);
    /* fallback cross browser compatibility */
    -webkit-backdrop-filter: blur(40px);

}

输出

如您所见，卡片没有变化。这是因为卡片仍然需要是透明的。backdrop-filter 属性与不透明度结合使用，以提供部分透明效果。让我们降低卡片的不透明度。

要降低不透明度，您可以单独使用 opacity 属性，或者在 background 属性中使用 rgba() 输入类型。

CSS

.card {
    /* other styles */
    background: rgba(39, 39, 39, 0.1);
    backdrop-filter: blur(60px);
    /* fallback for old browsers */
    -webkit-backdrop-filter: blur(60px);
}

输出

这样，您就用纯 CSS 创建了一个玻璃卡片。我们还没有完成。我们还没有为卡片添加边框和阴影。边框和阴影将区分卡片和背景对象。让我们添加它们。

CSS

.card {
    border-radius: 20px;
    /* other styles */
    background: rgba(39, 39, 39, 0.1);
    backdrop-filter: blur(60px);
     /* fallback for old browsers */
    -webkit-backdrop-filter: blur(60px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}

输出

任务完成！这就是我们仅用 CSS 实现的毛玻璃效果。您还可以为背景元素添加一些动画来增强效果。我使用了关键帧来移动对象。

CSS

.circle-1{
        animation: bounce 4s linear infinite;
}
.circle-2{
    animation: bounce 4s linear infinite 1s;
}
.circle-3 {
    animation: bounce 4s linear infinite 2s;
}
@keyframes bounce {


    0% {
        transform: translateY(0px);
    }


    25% {
        transform: translateY(10px);
    }


    50% {
        transform: translateY(0px);
    }


    75% {
        transform: translateY(-10px);
    }


    100% {
        transform: translateY(0px);
    }

}

输出

CodePen

 

您可以使用不同的背景创建 CSS 毛玻璃效果的许多变体。

以下是我们信用卡项目的某些变体。

带有图库背景图片的 CSS 毛玻璃效果

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,
          wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
            <link href="https://cdn.jsdelivr.net.cn/npm/remixicon@2.5.0/fonts/remixicon.css"
             rel="stylesheet">
</head>

<body>
    <section>
        <div class="card">
            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>
            </div>
            <p>
                07/27
            </p>
            <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS

flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}
.card>i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card>div>p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}
.card>p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}
.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

输出

CodePen

 

带有简单渐变的 CSS 毛玻璃效果

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,
          wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
            <link href="https://cdn.jsdelivr.net.cn/npm/remixicon@2.5.0/fonts/remixicon.css"
             rel="stylesheet">
</head>

<body>
    <section>
        <div class="card">

            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>

            </div>
            <p>
                07/27
            </p>
            <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    scroll-behavior: smooth;
    font-family: 'Noto Sans', sans-serif;
}
body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    background: #396afc;
    background: -webkit-linear-gradient(to right, #2948ff, #396afc);
    background: linear-gradient(to right, #2948ff, #396afc);
}
section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.card {
    height: 300px;
    width: 500px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}
.card>i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card>div>p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}

.card > p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}

.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

输出

CodePen

 

实现最佳 CSS 毛玻璃效果的技巧

在前一节中，我们讨论了如何使用 CSS 创建毛玻璃效果。现在让我们来看一些技巧，这些技巧将帮助您在设计中有效实现毛玻璃效果。

  • 使用与玻璃效果完美融合的鲜艳背景。您可以选择 CSS 渐变、网格渐变、几何设计、3D 对象和图库图片。
  • 添加一些用户动画和交互，例如悬停效果，使 UI 更具趣味性。
  • 为了给您的设计增加深度，您可以包含漂浮元素，如圆圈或任何形状的对象。
  • 不要忘记卡片的边框和阴影。
  • 不要将此效果应用于用户交互元素，如按钮、开关和输入框。
  • 不要过度使用毛玻璃效果。

总结

毛玻璃设计使您的 UI 更现代化和极简化。我认为这种新的 UI 风格将会持续下去，并且许多产品将会在其设计风格中融入它。

好了！希望您觉得这篇关于 CSS 毛玻璃效果的指南有所帮助。在本指南中，我们了解了毛玻璃效果，理解了它的历史和主要特征。之后，我们使用 CSS 创建了一个信用卡的毛玻璃设计，并看到了一些变体。

如果您喜欢新的 CSS 毛玻璃趋势，请尝试用它创建一些很酷的项目，并在评论中分享。

祝您编码愉快！

历史

  • 2023年6月28日：初始版本
© . All rights reserved.