如何使用纯 HTML 和 CSS 创建“玻璃态”模板。

什么是玻璃态？

如果您是第一次听到“玻璃态”这个术语，那么...它在我发表这篇文章的几个小时前才引起我的注意，那么，什么是玻璃态？

玻璃态是一种新趋势，它在Dribble、Behance等网站上越来越受欢迎，我已经看到了一些使用这种流行 UI 制作的很棒的设计。

以下是Rishabh Saxena的一个例子

值得注意的是，截至撰写本文时，玻璃态现象在网络上尚未广泛应用。因此，我们将探索创造力的力量。

属性/特征

半透明（毛玻璃）
详细颜色（变得像云一样）
阴影
其他一切...

先决条件

为了跟进本教程，由于可能需要我们复制粘贴一些代码来测试，我们将：

创建HTML和CSS文件（index.html和index.css）
如果您遇到困难，请链接到GitHub上的完整工作代码。
链接至Live 网站以供参考。

需要注意的主要CSS 属性是backdrop-filter。您可以随意在MDN上获取任何 CSS 或 HTML 属性的文档。backdrop -filterbackdrop-filter : blur(_px)赋予了它冰霜般的玻璃效果。backdrop
-filter 的作用不仅仅是模糊背景。再次强调，请查看MDN获取完整文档。

为了使其有效工作，元素必须是部分半透明的（模仿玻璃效果）。

现在，在我们的index.html中粘贴下面的代码块

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./index.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Glassmorphism" />
    <meta
      name="keywords"
      content="glassmorphism,UIUX"
    />
    <meta name="author" content="emmaccen" />
    <title>Glass Morphism</title>
  </head>
  <body>
    <div class="landingContainer">
      <div class="centered">
        <h1 class="title">Changing The World</h1>
      </div>
      <div class="glassContainer">
        <div class="cover"></div>
      </div>
    </div>
  </body>
</html>

由于HTML代码片段非常简单，因此我不会对其进行任何解释。

索引.css

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.landingContainer {
  /* span the entire desktop height : height: 100vh;*/
  height: 100vh;
  font-family: helvetica;
  /* set a gradient background with 3 colours https://coolors.co/ */
  background: linear-gradient(
    to right,
    rgba(32, 191, 85),
    rgba(32, 164, 243),
    rgba(11, 79, 108)
  );
}

.centered {
  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
  /* so it takes up its containers height (landingContainer)*/
  height: inherit;
}

.title {
  color: whitesmoke;
  /* cover the entire page width : font-size: 10vw;*/
  font-size: 10vw;
  text-align: center;
}

/* The real deal  starts here*/
.glassContainer {
  position: absolute;
  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
}
.cover {
  transition: 0.5s all ease;
  height: 70%;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.25);
  /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  /* For the fog-like glass effect */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
}

/* responsiveness */

@media (max-width: 700px) {
  .cover {
    height: 30%;
  }
}