最近有些忙,考驾照,上课,处理项目依赖。就没怎么学习新知识和发文章咯。
今天周六,聊一聊 拟态吧。英文怎么读我是不知道的。就随便读吧。哈哈
Neumorphism——新拟态设计
什么是 Neumorphism
Neumorphism - 新拟态UI风格是目前比较新颖的一种前端css设计风格.
它的格调简单,基本颜色比较浅,如米白,浅灰,浅蓝等。
再利用阴影呈现出凹凸效果。看起来和简单舒适,且有3D效果。因此我们可以通过拟态设计出很多优美的页面。
如下图 :
什么是 Skeuomorphism
Neumorphism可以说是“New” 和 “Skeuomorphism”的”巧妙”结合。
为了更好了解 Neumorphism 的特殊,并且顺便了解UI设计的几个趋势,我们可以先了解一下 Skeuomorphism 这个东西。
Skeuomorphism : 拟物化
先来看一张图 :
图片来源网络,侵删
无论从字面意思还是图片,我可以知道,拟物化就是模拟现实的物体,包括形状,颜色,花纹,特殊标志的。不仅颜色丰富,而且有3D效果,细节较完善。
拟物化的潮流已经过去,但还有一些地方我们还使用的。因为它能让人一眼看出这个图标到底是干嘛的。如按钮。
这也突出了新拟态设计的一个缺点,新拟态细节少,颜色简单,可能会让人不能一下子就知道是干什么的。
与扁平化的不同
扁平化设计是继拟物化后的一个潮流。一直到现在。
诺 :
简单粗暴。
一个扁平的图标,不需要3D效果,不需要去刻意模拟物体。
而新拟态设计是颜色基调简单,有3D效果的。
CSS怎么实现
逼逼赖赖那么久,终于谈到怎么实现了。
其实 灰常简单。简易设计也是 Neumorphism 的一个特点。
关键就在于一个CSS样式 : box-shadow
不熟悉 box-shadow? 点这里
通过改变盒子阴影的位置和颜色,使盒子出现3D效果。
注意,新拟态设计的风格是颜色简单,莫过于花里胡哨(但非必要,喜欢花里胡哨当然也可以)
demo1
<!DOCTYPE html>
<html lang="en">
<head>
<title>拟态</title>
</head>
<body>
<div class="cir"></div>
</body>
<style>
body {
/* 设置基本色调 */
background-color: #c9d6e6;
}
.cir {
margin: 200px auto;
width: 200px;
height: 200px;
border-radius: 50%;
/* 灰色阴影 */ /* 白色阴影 */
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.19), -10px -10px 20px rgba(255, 255, 255, .9);
}
</style>
</html>
当然你也可以改变方向,不一定是右下角灰,左上角白。但位置一定是相对面的。
有凸出来的,便有凹下去的。
demo2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>拟态</title>
</head>
<body>
<div class="cir"></div>
</body>
<style>
body {
background-color: #c9d6e6;
}
.cir {
margin: 200px auto;
width: 200px;
height: 200px;
border-radius: 50%;
/* 不同点就是将阴影设置到盒子内部,缩小了一下阴影 */
box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.19), inset -6px -6px 12px rgba(255, 255, 255, .9);
}
</style>
</html>
方法一样,就是设置阴影,只不过是设置到盒子内部,也就是加上 inset
盒子内部阴影可以不用那么大。我顺便缩小了一下阴影。
demo3:
先对比这两个圆 :
可以看出 B图 的圆是有微微向内凹进去的。这可不同于 demo2 的凹。
那么它是如何实现的呢?
<!DOCTYPE html>
<html lang="en">
<head>
<title>拟态</title>
</head>
<body>
<div class="cir"></div>