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

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

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
  • 13
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无糖的酸奶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值