前端2021的新趋势，由扁平化到新拟态的运用｜8月更文挑战

开局一张图

什么是新拟态 ?

「新拟态」英文名Neumorphism，也有设计师称为 Soft Ui（软 UI）。原由是源于 2019 年 11 月 5 日，来自乌克兰的设计师 Alexander Plyuto 在追波和 ins 上发布了下图的一张做品，做者说明信息：“让咱们想象一下，若是在移动界面设计中，投影的形式发展的更好的话，那未来的界面将会是什么样的，这是个人愿景。”，一时间广受设计师追捧，“新拟态”风潮迅速风靡各大设计网站，简单来讲就是一种相似浮雕的效果，介于扁平与投影之间，它是一种使用对象阴影的模糊、角度和强度来凸显出对象的样式，因为其柔和的阴影和新颖的外观，让设计看起来更加的逼真、将来、现代、有吸引力。css

在今年上半年，新拟态的 UI 设计风靡一时，它被誉为 2021 年最火的 UI 设计趋势之一，在互联网上广受欢迎。新拟态融合了拟态和平面设计技术，模仿真实物体的形态，为界面的 UI 元素赋予真实感，它是一种现实主义风格，也是很是值得探索的新设计风格。它时尚，细致，使用它进行设计确实颇有趣。所以，在本文中，我将教你们如何使用 CSS3 来实现新拟态风格的 UI 元素，而且分享一些使用新拟态 UI 的网站实例。html

简单来说，新拟态是图形的一种样式，经过灯光的原理，为图形添加上高光和阴影，其目的是为界面的 UI 元素赋予真实感、立体感。前端

说多了都是废的，咱们直接上图，一块儿看看这样的风格究竟有多好看，能被设计师这样的夸。markdown

传统扁平化设计&新拟态设计

传统的扁平化设计：

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表如今去掉了多余的透视、纹理、渐变以及能作出 3D 效果的元素，这样可让“信息”自己从新做为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。app

扁平化的优势：

下降移动设备的硬件需求，延长待机时间
能够更加简单直接的将信息和事物的工做方式展现出来，减小认知障碍的产生
扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性

扁平化的缺点：

下降用户体验，在非移动设备上使人反感
传达的感情不丰富，甚至过于冰冷

新拟态的特色：

有且只有一个光源照射
组件与背景对比度比较弱
经常用于卡片和按钮
凹凸的真实质感
由于对比度的缘由，它不如扁平的简洁直观

如何实现新拟态？

一个简单的例子：oop

废话很少说直接上代码：flex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公众号：前端开发爱好者</title>
</head>
<style> body{ width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; background: #e0e0e0; } .neumorphism{ width: 200px; height: 200px; background: #e0e0e0; border-radius: 50px; /* 核心代码 box-shadow */ box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; } </style>
<body>
  <div class="neumorphism"></div>
</body>
</html>>
复制代码

我想不少童鞋看到上面的HTML代码应该就能知道具体的实现方式了，想要实现新拟态效果，核心就在于 css 的 box-shadow。网站

box-shadow

box-shadow 属性向 box 添加一个或多个阴影。ui

语法

/* box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式] */
 box-shadow: h-shadow v-shadow blur spread color inset;
复制代码

值	描述
h-shadow	必需。水平阴影的位置。容许负值。
v-shadow	必需。垂直阴影的位置。容许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
color	可选。将外部阴影 (outset) 改成内部阴影。

具体使用这里不作一一演示了。细心的童鞋应该会发现为何上部分代码中 box-shadow 存在两个阴影，是否是写错了？spa

在这里很严肃的告诉你，么得错！！！多种阴影效果用 ,隔开拉。新拟态就是用了box-shadow能够增长多种阴影的效果，从而实现凹凸的真实质感。

小破站（建议移动端查看）

最后奉上本人用新拟态实现的我的主页小破站: 我的主页

前端2021的新趋势，由扁平化到新拟态的运用｜8月更文挑战

开局一张图

什么是新拟态 ?

传统扁平化设计&新拟态设计

传统的扁平化设计：

扁平化的优势：

扁平化的缺点：

新拟态的特色：

如何实现新拟态？

box-shadow

语法

更多新拟态效果实现

效果1：

效果2：

效果3：

小破站（建议移动端查看）

前端2021的新趋势，由扁平化到新拟态的运用｜8月更文挑战

开局一张图

什么是新拟态 ?

传统扁平化设计&新拟态设计

传统的扁平化设计：

扁平化的优势：

扁平化的缺点：

新拟态的特色：

如何实现新拟态 ？

box-shadow

语法

更多新拟态效果实现

效果1：

效果2：

效果3：

小破站（建议移动端查看）

如何实现新拟态？