最近浏览网站,发现一个好玩的,整体风格都是拟态化的,一下子激起了我的学习能力和挑战性,拟态化效果归根到底还是投影shadow的妙用。当然还是需要会用CSS的box-shadow属性,不是随便设置个值就可以实现的。先来回顾一下投影如何使用。
CSS投影shadow闪现到当前流行拟态化效果,那些基础被忽视的样式!-Qui-Note

基础知识

box-shadow 属性可以设置一个或多个下拉阴影的框。

box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow 必需的。水平阴影的位置。允许负值
  • v-shadow 必需的。垂直阴影的位置。允许负值
  • blur 可选。模糊距离
  • spread 可选。阴影的大小
  • color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
  • inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

另外,inset,不要忘记,这个玩意可以实现内阴影效果,是实现拟态化的大坑之一。

浅谈拟态化

最初还是19年在dribbble上看到过移动UI设计作品中看到过,第一眼就给人一种独特的冲击感,就好比喝了一辈子的矿泉水,突然来了一口红牛。卧槽,还有这样的设计风格——拟态化。

拟态化,模拟一个物体的形态,有点类似于拟物化和扁平化的结合体。整体风格:干净,简约,美观,视觉冲击感强。缺点:不突出,易疲劳。

拟态化效果特点:

  • 1.整体呈现”凹凸“效果
  • 2.元素背景色和整体背景色一致,或元素无背景色;
  • 3.元素四周携带投影;
  • 4.元素投影分浅色投影和暗色投影,投影色趋近于背景色;

效果预览地址

https://course.51qux.com/effect/box-shadow

代码实现:

.card{width: 200px;height: 200px;border-radius: 30px;box-sizing: border-box;}
.shadow{box-shadow: 15px 15px 25px rgb(165 165 165 / 20%), -15px -15px 25px rgb(223 223 223 / 50%);}
.shadow:hover{box-shadow:inset 15px 15px 25px rgb(183 183 183 / 20%),inset -15px -15px 25px rgb(211 211 211 / 50%);}

如下,就实现了一个简单拟态化效果。
CSS投影shadow闪现到当前流行拟态化效果,那些基础被忽视的样式!-Qui-Note

复制几个,换个底色。修改一下投影颜色就得到了一组如下的拟态效果:
CSS投影shadow闪现到当前流行拟态化效果,那些基础被忽视的样式!-Qui-Note

当然也可以使用渐变背景。效果如下:
CSS投影shadow闪现到当前流行拟态化效果,那些基础被忽视的样式!-Qui-Note

拟态虽好,也属流行,很容易过时,可能一段时间内看着美感和独特性强,审美疲劳之后就觉得很low,和拟物化一下,可能这种风格转个圈又变成了流行。好了,以上就是个人对拟态化的理解。