首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

纯CSS 毛玻璃效果 💎

在我年轻时做过的开发中,毛玻璃应用得最广是在复杂的背景图上。 如果你希望在一个复杂的背景上添加文字,文字能清晰展示,并尽可能的保留原背景的话,使用毛玻璃的效果去处理是非常合适的。...本文主要讲解背景毛玻璃效果,也会讲讲文字如何做出模糊效果。...背景图毛玻璃 在 PhotoShop 中,毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。 在 CSS 中,想要实现模糊效果,可以使用 滤镜 。...有了它就实现了毛玻璃的基本效果。 最后加上 box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3); 让毛玻璃与背景之间产生一点阴影,看起来会更自然。...文字毛玻璃 文字版的毛玻璃效果其实也是一个模糊效果。 这个案例是鼠标移入文字时,文字变清晰;鼠标移出后变模糊。也是 纯CSS 可以做出来的。

3.2K30

玻璃拟态(Glassmorphism)设计风格

前言 特征 毛玻璃拟态模仿了塑料材质(凹凸质感,凸显层次感),这个新的视觉风格更加注重垂直空间Z轴的使用: 透明感(使用背景模糊/高斯模糊的磨砂玻璃效果) 物体漂浮在空间中,通过前后关系表现层次感 鲜艳的色彩感...,更突出了模糊的透明度 半透明物体边缘的微妙处理,采用细腻的边框来表现玻璃质感 这是注重空间感的典型特征,意味着这种风格有助于用户建立界面的层次结构和深度。...用户可以看到物体间的层次关系,哪一层在哪一层之上,就像空间中真实的玻璃一样。 实例 玻璃拟态风格设计: 玻璃拟态风格图标: 网页头图: 不足 毛玻璃拟态效果并不好应用于上线产品。...选择背景时,请确保其具有足够的色调差异,以使玻璃效果真正可见。 细节 你可以尝试的最后一件事是为形状添加1px内边框,并具有一定的透明度。它模拟玻璃边缘,可以使形状从背景中脱颖而出。...在线生成工具: 玻璃拟态在线生成工具 玻璃拟态样式

1.7K30

2022年玻璃行业研究报告

浮法玻璃是目前平板玻璃生产的主流工艺,约占平板玻璃总量90%,普通平板玻璃与浮法玻璃在品质上有所不同,普通玻璃呈现翠绿色易碎、透明度不高,浮法玻璃表面光滑,光学性能较强,可实现规模化生产;压延法具有透光不透明的特点...与普通玻璃相比,电子玻璃在物理性质方便具备明显差异,其厚度更薄、抗压强度更大、热膨胀性更小等。电子玻璃的主要应用领域为光电玻璃、盖板玻璃和显示玻璃。...电子玻璃按照化学属性可以分为有碱玻璃和无碱玻璃,有碱玻璃碱金属含量大于0.1%,主要包括钠钙玻璃和高铝硅酸盐玻璃,无碱玻璃碱金属量小于0.1%,主要包括硅酸铝玻璃和硼硅酸盐玻璃。...国际标ISO 12775 - 1997《正常大规模生产的玻璃按成份分类及其试验方法》中将药用玻璃分为硼硅玻璃、中性玻璃和钠钙玻璃,其中中硼硅和高硼硅玻璃耐水性较强,属于一类玻璃,低硼硅与钠钙玻璃则分别属于二类与三类玻璃...图 药用玻璃市场规模及份额 image.png 第五章 汽车玻璃 5.1 汽车玻璃分类 根据在汽车中所应用的不同部位可以分为前挡风玻璃、后挡风玻璃、天窗玻璃、前三角玻璃、前门玻璃、后门玻璃、后三角玻璃

90440

CSS3实现毛玻璃效果

最近在开发个人博客的时候,在网上学到了一种CSS特效---毛玻璃 感觉还是比较实用下面将这种特效分享给大家。...如下图,我的后台登录界面表单部分就是毛玻璃效果 有时候这种特效很有用,可以达到一种朦胧的效果,接下来我们来看看如何实现它 图片 首先定义布局 <!...效果如下: 图片 接下来添加毛玻璃特效 通过伪类元素实现 .box::before{ content:''; position:absolute; top:0; right...到这里毛玻璃效果已经完成 图片 我们还可以给他加一层滤镜颜色,使其黯淡下来 .box::after{ content:""; position:absolute; top:0...right:0; bottom:0; left:0; background:rgba(0,0,0,0.2); } 效果如下 图片 此时发生我们之前的文字不见了,设置因为毛玻璃效果覆盖了

85610

css毛玻璃背景的制作

听到有人说拼多多上市, 然后各种黑, 说什么市场倒退了二十年, 然后搬出那英当年的"雾里看花",说这首歌就是在讽刺假货横行~ "雾里看花"代表了一种"朦胧美", 如果你喜欢朦胧美, 那你也可能也会喜欢毛玻璃..."毛玻璃"效果, 本质上是对背景图片的部分区域进行模糊运算, 比如我们在photoshop经常使用的高斯模糊, 这种模糊其实是在UI设计中非常常见, 比如Mac上的siri ?...Mac上siri的毛玻璃效果 ?...DOCTYPE html> 毛玻璃效果 <style...以这个毛玻璃效果为例, 人工智能或许能在一瞬间完成这种效果, 而人类需要3分钟, 但人类在3分钟内,可能会涌现更好的想法, 并将想法添加到原本的步骤中, 人类与人工智能的区别想必已经很明显了~

1.4K20
领券