如何使用HTML和CSS实现一个毛玻璃效果

认识毛玻璃效果

毛玻璃效果(Glassmorphism)是一个非常流行的视觉设计,你应该在一些移动APP或PC网站上看到过毛玻璃效果。它的主要特征就是半透明的背景,以及阴影和边框,同时还要为背景加上模糊效果,使得背景之后的元素根据自身内容产生漂亮的"变形"效果。

毛玻璃效果如下所示:

这是一个应用毛玻璃效果的真实示例,可以在 ui.glass 网站上查看。ui.glass 是一个基于"毛玻璃"设计原则的现代 CSS UI 库,可以帮助你快速设计和构建漂亮的网站和应用程序。

你可以在上图中右侧代码后面看到我所说的模糊效果,后方的内容产生了漂亮的变形效果,同时还保持了可读性,赏心悦目。

本文将展示如何仅用 HTML 和 CSS 来实现一个类似的毛玻璃效果。

基本代码结构

首先,创建一个 HTML 文件,写入如下内容:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism effect</title>
</head>
<body>
    <div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
    <a href="https://ui.glass">Read more</a>
</div>
</body>
</html>

在卡片上应用毛玻璃效果之前,先添加一些排版样式,加入以下 CSS:

css 复制代码
.card {
  width: 400px;
  height: auto;
  padding: 2rem;
  border-radius: 1rem;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

p, a {
  font-size: 1rem;
}

a {
  color: #4d4ae8;
  text-decoration: none;
}

使用 CSS 制作毛玻璃效果

我们在这里要做的只是设置一个半透明背景颜色,并使用 backdrop-filter 属性设置模糊效果。在 .card 元素的样式中加入以下 CSS:

css 复制代码
.card {
	/* other styles */
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

现在我们已经为卡片加上了毛玻璃效果的样式,效果如下。

浏览器支持

毛玻璃效果的主要缺点之一就是 backdrop-filter 属性在 Internet Explorer 11 上不被支持,而且 Firefox 默认禁用了这个属性。

然而,根据 caniuse.com 网站的数据,全世界超过 88.2% 的浏览器支持这个样式。如果 Firefox 决定默认启用这个属性,并且随着过时浏览器(如 IE 11)的使用率下降,我相信未来几年毛玻璃效果会得到更广泛的应用。

总结

在本文中,我们介绍了毛玻璃效果(Glassmorphism),这是一种流行的视觉设计,常见于移动应用和网站中。毛玻璃效果的主要特点是半透明的背景、阴影和边框,以及背景元素的模糊效果,从而产生漂亮的变形效果。

我们还提到了一个名为ui.glass的现代CSS UI库,它基于毛玻璃设计原则,可以帮助你快速设计和构建漂亮的网站和应用程序。

同时我们展示了如何使用HTML和CSS实现类似的毛玻璃效果。通过设置半透明背景颜色并使用backdrop-filter属性来实现模糊效果,我们成功地给卡片添加了毛玻璃效果。

最后,展示了浏览器对毛玻璃效果的支持情况。尽管在某些过时的浏览器上不支持该属性,但根据caniuse.com网站的数据,全球超过88.2%的浏览器支持这个样式。随着时间的推移,我相信毛玻璃效果将得到更广泛的应用。

通过本教程,希望你对毛玻璃效果有了更深入的了解,并能够运用到自己的设计和开发项目中。

相关推荐
ai小鬼头19 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
foxhuli2292 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔3 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺3 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5