锐普首发|新拟态风格PPT模板，限时免费下载！

正文

请到「今天看啥」查看全文

2 | 元素与背景对比度比较弱

---

在上一篇推文的实操部分，高光和阴影投影我用的是纯白和纯黑，对比度太强，柔化边缘参数要设置很大才能让色彩过渡更柔和。

经过色值与CSS代码分析，我发现全部使用纯白与纯黑做投影并不好。

2.1 | 色值分析

---

以上次推文中的这三张案例为例进行色值分析，最终发现，无论在亮色模式下还是在暗色模式下，对比度都是很低的。

2.2 | CSS代码分析

---

将以上三个案例的背景色放到 https://neumorphism.io ，根据CSS代码分析默认状态下的色值。

完整版CSS代码：

| 代码源自孟坤博客  @mengkun

| 代码运行后的效果

根据代码提取色值 （外阴影）

根据代码提取色值 （内阴影）

2.3 | sketch源文件分析

---

| 源文件源自站酷  @Frannnk

2.4 | 章节小结

---

通过色值与CSS代码分析，确实了上一篇推文中的各种结论。其中要再强调一下新拟态风格元素的组成： 1个形状+2个投影 。

其中，形状与背景色一致，当然也可以添加渐变。投影分为内投影与外投影，凹进去 （选中状态） 多使用内投影。凸出 （未选中） 多使用外投影。

所以在PPT中用柔化边缘的方法添加两个投影的方法是正确的。只需要注意不要使用纯黑或纯白，选取与背景色对比弱的色值即可。

3 | 新拟态技法优化

---

通过CSS代码分析，投影大都是呈 45° 位移，而且受光与背光投影与顶层图形呈 中心对称 。

在上一篇推文中，我们是通过柔化边缘画出两个投影，然后通过调整位置实现新拟态效果。这种方法有两个缺点：

❶ 形状转图片后不便于二次修改

❷ 很难手动调整到完全中心对称

基于这两个缺点，我们来继续优化。新方法：使用 阴影 。

请到「今天看啥」查看全文