什么是玻璃晶型?背景滤波器如何在 CSS 中构建磨砂玻璃

Frosted glass panels 在界面设计中无处不在:桌面操作系统上的半透明侧边栏,让照片显示通过的模糊标头,在着陆页上浮在梯度上的卡片,外观描述简单,奇怪的是容易出错 CSS 中的面板最终变成平坦和灰色,或者模糊没有任何作用,或者其上的白色文本无法读取超过一半的背景。

本指南解释了使效果发挥作用的 CSS、为什么五个属性都在那里、如何在后台不断变化时保持文本可读性、渲染性能的成本以及如何优雅地向后退缩。工作示例使用 的输出 Toolz 玻璃化 CSS 生成器的,它从滑块和实时预览构建代码。

TL;博士: Glassmorphism 是一种 UI 风格,面板看起来像磨砂玻璃:半透明背景加 backdrop-filter: blur() so 后面的内容轻柔地展现出来,通常以 1px 的半透明边框和柔和的阴影来完成,它需要两样东西才能看见:部分透明的填充物和面板后面色彩缤纷的东西。文字对比度会随着下面经过的任何内容而变化,因此要在真实背景中最明亮和最黑暗的部分进行测试 CSS玻璃化生成器 写入完整块,包括 -webkit- 前缀,客户端,免费,无注册。

CSS中的玻璃形态是什么？

Glassmorphism是一种模仿磨砂玻璃的视觉风格,一个元素得到低不透明度的背景颜色和模糊其后像素的背景滤镜,因此下面的形状和颜色通过表面显得柔和,一个薄薄的光边框暗示着玻璃边缘,一个温和的阴影将面板从页面上抬起。

关键属性是 backdrop-filterW3C中定义的 过滤器效果模块级别 2。它采用与相同的滤波器功能 filter (x),在2019年10月10日开始实施,在2019年10月10日开始实施,在2019年10月10日开始实施,在2019年10月10日开始实施blur()、 saturate()、 brightness() 及(其余的),而是将它们应用到元素后面的区域而不是元素本身,那个区别就是使效果成为可能的原因。

这是生成器为其 Frosted 预设生成的完整块:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

6条线,而且每条线都有一份工作。

过滤器与背景过滤器:有什么区别?

filter 改变元素本身的绘制方式,包括其文本和子元素。 backdrop-filter 从后面改变通过元素显示的内容,并使元素'自己的内容清晰。

财产	它影响什么	模糊示例结果	典型用途
filter: blur(10px)	该元素及其所有子元素	卡片及其文字模糊	图像效果、禁用状态、加载占位符
backdrop-filter: blur(10px)	元素后面画了什么	卡片保持锋利,透过它看到的背景是模糊的	磨砂玻璃板、模糊的集管、模态覆盖层

如果你模糊了一张卡片 filter 并想知道为什么标题不可读,你使用了错误的属性。 CSS滤波器生成器 覆盖 filter 两人的一侧。

玻璃 CSS 的每条线如何工作?

的背景 是色调,其α通道是块中最重要的数字。 rgba(255, 255, 255, 0.2) 20%不透明度时为白色,在1的α下面板是实心的,没有任何东西显示出来,因此背景模糊是不可见的,在0的α下根本没有表面,大多数可用的玻璃位于0.1和0.4之间。

Generator中这是透明滑块,命名需要注释:滑块设置填充的不透明度,因此更高的透明度值使面板更加坚固透明20%写入α为0.2,40%写入0.4。

的背景过滤器 做磨砂。 blur(10px) 设置应用于后面内容的模糊半径。 saturate(120%) 20%提升那个模煳背景的颜色,这抵消了那个模煳加上白色调往往会产生的灰色,冲刷出来的外观生成器's模煳滑块从0到40px运行,饱和度从100%到200%。

的前缀副本 因为较旧的 Safari 版本只能理解而存在 -webkit-backdrop-filter.用相同的值写两行不花钱,并且涵盖这些版本。

的边界半径 圆角,生成器内为 0 至 50px。模糊处剪裁成圆形。

的边界 18%不透明度时是一条1px的白色线,它作为玻璃边缘的一大亮点吸引了人们的目光,在较暗的背景上最重要,否则面板边界将溶解生成器's边界复选框将其打开或关闭;颜色和宽度是固定的。

的影子 0 8px 32px rgba(0, 0, 0, 0.12) 是将面板与页面分开的宽而微弱的落影,如果要调音,the 盒子阴影指南 解释偏移、模糊和深入传播。

生成器预设会产生什么?

预设是起点而不是完成的设计,所有五个都使用 16px 半径,除了 Subtle 之外,所有都包含边框。

预设	背景	背景过滤器	边境	最好的结束
磨砂	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	论	色彩缤纷的渐变和照片
光	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	论	繁忙的图像,文本需要更多支持
暗	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	论	灯光照片,白色文字
充满活力	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	论	黑暗或饱和的英雄部分
微妙	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	关闭	小筹码和徽章

Frosted 选择的生成器加载,单击预设,调整滑块和色调颜色,代码块在拖动时更新。

为什么我的背景过滤器不起作用？

当模糊似乎无能为力时,其中之一几乎总是原因。

1. 背景是不透明的。 一个坚实的 background: #fff or 1的α完全隐藏背景。降低α。
2. 背后没有什么可以模糊的。 在平面单色页面上,模糊的平面颜色看起来与平面颜色相同。玻璃需要一个梯度,后面有一张照片或形状。生成器's预览为此故意坐在带有彩色圆圈的梯度上; CSS 梯度指南 是很好地显示效果的背景的良好来源。
3. 前缀缺失。 较旧的 Safari 版本忽略未修复的属性。
4. 祖先限制了过滤器可以看到的内容。 在当前的过滤器效果规范中,祖先的一些属性,例如它自己的属性 filter,一个 opacity 1以下或另 backdrop-filter、开始一个新的背景根,模糊只采样该根内部的内容物,如果玻璃坐在其中一个包装纸内,则移动效果或属性。
5. 该面板没有尺寸或以其他方式完全透明。 零高度元素或 opacity: 0 面板上隐藏了效果和面板。

如何在玻璃面板上保持文本可读性?

可读玻璃比样式的任何其他部分都需要更多的工作,因为文本颜色是固定的,而面板下方的背景不是。的 WCAG 2.2 对比度最小值 求普通文本至少4.5:1,大文本至少3:1的比例,在半透明面板上,该比例取决于面板当时每个部分的后面是什么。

1个工作例子使这个混凝土。对比度是根据两种颜色的相对亮度计算的,(L1 + 0.05)/(L2 + 0.05)。背景上的玻璃填充复合材料:每个通道变成α乘以填充加(1减去α)乘以背景。模糊平均相邻像素,但留下一个区域's平均颜色大致在原来的位置,因此在一个颜色的大面积上,复合材料是一个公平的估计。

填	背景颜色	复合颜色	与白色文本形成对比
0.2 时磨砂、白色	蓝色 #60A5FA	关于 rgb(128, 183, 251)	2.1:1左右的情形
0.2 时磨砂、白色	黄色 #FBBF24	关于 rgb(252, 204, 80)	1.5:1左右的情形
黑暗, rgba(15, 23, 42, 0.25)	蓝色 #60A5FA	关于 rgb(76, 130, 198)	4.0:1左右的情形

取第一行。红色是0.2 x 255 + 0.8 x 96 = 127.8,绿色是0.2 x 255 + 0.8 x 165 = 183,蓝色是0.2 x 255 + 0.8 x 250 = 251。那种颜色's相对亮度在0.454附近工作,白色's是1,所以比例是1.05/0.504,大约2.1:1。背景黄色部分上方的同一面板下降到大约1.5:1。身体文本均不通过,蓝色上的黑暗预设达到大约4.0:1:足以满足大文本,仍然不足4.5:1对于小文本。

实际修复,按有效性顺序排列:

• 提高填充 alpha。 将透明度从 20% 提高到 40% 会隐藏更多的背景并缩小对比度波动的范围。
• 淡化浅色文本的色调(dark text),或为深色文字加光,白色文字的深色玻璃比白色文字的白色玻璃托起的背景要多得多。
• 增加模糊度。 它可以抚平高对比度的细节,因此字母后面的一条细白线不会穿过它。
• 添加文本阴影 作为标题的最后手段。 文本阴影生成器 快速制作柔软的。
• 测试极端。 检查面板可以放置的最亮和最暗区域的对比度 颜色对比度检查器的, 不是在一个方便的地方。

Generator's复制的CSS仅覆盖玻璃表面,其预览中的白色文字不是输出的一部分,所以设置 color 自己在元素上。

背景过滤器会损害性能吗?

It can。a backdrop blur 强迫浏览器读回元素后面的像素,并在该区域每次变化时在它们上运行一个 blur。on static card that cheap。on a blarge area,在滚动过程中,或者当内容在面板后面动画时,它是合成起来更昂贵的效果之一,而功率较低的手机首先将其显示为丢帧。

控制它的指南:

• Keep玻璃板尺寸适中,全视口磨砂叠加成本远不止一张卡片。
• Prefer 较小的模煳半径,成本随半径增长,超过20px左右视差小。
• 避免对模糊值本身进行动画化。动画 opacity 或 transform 的面板代替。
• 注意长滚动内容上的粘性标头,这些内容会在每个滚动帧上重新模糊。在真正的中端手机上进行测试。

如何为需要后备的浏览器或用户添加后备?

当前版本的 Chrome、Edge、Firefox 和 Safari 都支持 backdrop-filter.很旧的浏览器忽略它,显示没有模煳的半透明填充,在低 alpha 可以在繁忙的背景上留下文字,两个小添加使效果下降得很好,可以查看当前的支持表 MDN's背景-过滤页面。

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

的 @supports block 仅在存在模糊的地方应用半透明版本。 prefers-reduced-transparency 媒体功能,定义于 媒体查询级别 5的,让那些要求操作系统降低透明度的用户得到一个坚实的面板,浏览器对那个媒体功能的支持仍然是部分的,所以把它当作一个改进,只要可用,而不是唯一的保障。

玻璃晶型与新晶型与平面设计

玻璃晶型是几种表面样式之一,每种样式的成本都不同。

风格	表面是如何制作的	主要CSS	力量	主要风险
玻璃化	半透明填充加上背景模糊	background 着阿尔法, backdrop-filter	背景的深度和背景	对比度各不相同,成本表现模糊
新形态	与页面颜色相同,由成对的阴影凸起或按压	二 box-shadow 层	柔软的触觉控制	控制和页面之间的对比度非常低
平坦的	固体填充,无深度	background	快速且可预测	能感觉平淡
材料风格的立面	固体填充物,带有阴影深度水平	box-shadow	清晰的层次结构	大气层较少

如果柔软、挤压的外观更接近您想要的,那么 新形态生成器 构建成对的阴影。许多界面混合了风格:用于英雄图像上浮动导航栏的玻璃,用于其下方密集内容的平板卡。

如何制作玻璃卡,开始完成

1. 打开 磨砂玻璃 CSS 生成器 并选择最接近背景的预设:深色用于浅色照片,霜色或浅色用于彩色渐变。
2. Blur设置得足够高,背景细节不会与文本竞争,通常为8到16px。
3. 置透明度。从 20% 开始,然后将其提高,直到您的文本在背景最严酷的部分上通过对比度。
4. 选色调 选色器选色调 从背景中画出的色调's自己的调色板看起来比纯白色更自然。
5. 调整半径以匹配其余组件,并保留 Border 以适应深色背景。
6. 单击复制 CSS 并将该块粘贴到您的卡类中。添加 color 并给自己填充。
7. 将块包裹在 @supports 如果您支持旧浏览器,请回退到上面。

生成器中的所有内容都在您的浏览器中运行,因此不会上传任何内容,并且在页面加载后它会保持离线工作。对于相关的表面和效果工具, CSS 工具集线器 在一个地方列出梯度、阴影、滤波器和转换。