跳到主要内容位置

CSS Claymorphism 泥陶态简介

Claymorphism(这里称它为泥陶态) 是结合 3D 设计流行风格而兴起的新形态。

设计趋势由拟物风格发展为扁平风格时,去掉了一切表示深度和层叠的效果,虽然视觉上简化了,但不容易表现空间关系。

后来出现了:

  • Material Design,物料设计,基于纸张等物体的叠放关系,利用阴影表示不同元素之间的位置和距离
  • Neumorphism:新拟态,模拟物体的内嵌和凸出状态,以淡色为主
  • Glassmorphism:玻璃态,模拟玻璃效果,主要是对背景元素的虚化和散射

Claymorphism 则模拟了陶土制作的物件,在视觉上形成 3D 效果,提示物体可触摸,可点击等,未来可以更好的和 VR 等仿真技术结合。

Claymorphism 解决了新拟态对比度不高的问题,使用泥陶态可以根据配色自由定制突出的、高对比色。

CSS 实现

Claymorphism 的实现比较容易,主要靠 3 个阴影:

  • drop-shadow 投影
  • 较亮的 inner shadow 内阴影
  • 较暗的 inner shadow 内阴影

在 CSS 中,使用 box-shadow 属性就可以一次性设置;

box-shadow: 12px 12px 18px rgba(155, 196, 255, 0.42), inset 10px 10px 11px rgba(250, 252, 255, 0.48),
inset -10px -10px 15px rgba(46, 129, 255, 0.22);

其中 inset 设置内阴影,可以根据 x y 的偏移,把内阴影分别设置到左上和右下。

工具

网络上也有 claymorphism css 生成工具,例如 clay.css:

https://codeadrian.github.io/clay.css/

可以通过覆盖 css 变量,生成自定义的 claymorphism 效果。

小结

好了,这个就是网页设计的发展和变迁,以及 claymorphism 的介绍,你学会了吗?如果有帮助请三连并关注,想学更多的开发知识,可以在评论区留言,感谢观看!

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买