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 的介绍，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！