Neumorphism ：集拟态美 ? 不不不，就是聊一聊CSS拟态而已啦。八千多字，我是扯了啥呀。

最新推荐文章于 2024-05-16 09:43:23 发布

无糖的酸奶

最新推荐文章于 2024-05-16 09:43:23 发布

阅读量1.4k

点赞数 13

分类专栏：趣谈CSS 文章标签： css html5 拟态 Neumorphism 前端

本文链接：https://blog.csdn.net/NiHoAjy/article/details/120234048

版权

最近有些忙，考驾照，上课，处理项目依赖。就没怎么学习新知识和发文章咯。
今天周六，聊一聊拟态吧。英文怎么读我是不知道的。就随便读吧。哈哈

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>

最低0.47元/天解锁文章

无糖的酸奶

关注

13
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
Neumorphism ：集拟态美 ? 不不不，就是聊一聊CSS拟态而已啦。八千多字，我是扯了啥呀。

最近有些忙，考驾照，上课，处理项目依赖。就没怎么学习新知识和发文章咯。今天周六，聊一聊拟态吧。英文怎么读我是不知道的。就顺便读吧。哈哈Neumorphism——新拟态设计什么是 NeumorphismNeumorphism - 新拟态UI风格是目前比较新颖的一种前端css设计风格.它的格调简单，基本颜色比较浅，如米白，浅灰，浅蓝等。再利用阴影呈现出凹凸效果。看起来和简单舒适，且有3D效果。因此我们可以通过拟态设计出很多优美的页面。如下图：什么是 SkeuomorphismNeum.
复制链接

扫一扫