我的阅读
0 篇收藏读过的文章会出现在这里。
收藏和记录仅保存在当前浏览器。
公告
欢迎来到祂科技的博客。这里记录前端、AI 与生活，目前文章为原创示例。
最新文章
- 日常网页工具怎么选：图片、计时、购物计算与文件整理生活随想
- 图片去水印与短视频解析：项目选择和本站接入记录前端手记
- 从编解码到开发调试：小站工具箱与开源项目索引前端手记
- AI 协作工作流：从灵感到上线AI 工具
- 文章
- 9
- 分类
- 4
- 标签
- 21
标签
433 字
1 分钟
玻璃拟态真正好看的三个条件
阅读进度0%
输入关键词 本文为本站原创设计示例，不是已经完成的全站设计验收报告。
第一：背景值得被透出来
毛玻璃的效果来自前后层关系。背景如果本来就是单一平面，给卡片增加大量模糊并不一定能带来空间感。粉蓝天空、柔和光线或者有节奏的色块，比杂乱截图更适合放在文字卡片背后。
背景的细节也不能抢走文字注意力。尤其不要把图片中的菜单或标题当作页面装饰，让真实文字再叠在上面。
第二：透明不能牺牲可读性
对比度需要针对实际背景检查，不是只对照两个颜色值。卡片移到更亮的区域、切换下一幅背景或进入深色模式后，文字都应该保持清楚。
大部分文章区域可以使用较高不透明度的表面，把明显的玻璃效果留给导航和小型浮层。并不是所有卡片都需要模糊背景。
第三：层级比阴影数量重要
边框表达边界，阴影表达高度，圆角表达形状。三者各做一件事，不必每一张卡片都同时出现强光晕、厚描边和大阴影。
最后检查浏览器不支持背景模糊时的效果：卡片仍需有足够稳定的底色，文字不能依赖模糊才看得见。好的玻璃拟态不是“透明得更多”，而是让层级更容易理解。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时
相关文章 智能推荐