CSS 实现新拟态(Neumorphism) UI 风格

mengkun 8.8K 70

什么是新拟态(Neumorphism) UI 风格?网上似乎还没有一个准确统一的定义。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」

CSS 实现新拟态(Neumorphism) UI 风格

Skeuomorph Mobile Banking

新拟态 UI 风格与扁平、投影风格的对比

CSS 实现新拟态(Neumorphism) UI 风格

从上面这张对比图可以看出,扁平风格就像是一张纸贴在墙面上,投影风格像是浮在半空中,而新拟态风格则像是墙面上直接凸起了一块。

新拟态 UI 风格的实现方式

要实现这种风格,精髓在于一个白色的阴影+一个常规阴影。一个示例如下图所示:

CSS 实现新拟态(Neumorphism) UI 风格

新拟态 UI 风格的前端实现

闲来无事,参照着以上的实现方式临摹了一下练手(代码如下)。后来发现居然已经有了在线工具直接生成这种风格的 CSS 代码[aru_59],很强!Neumorphism CSS 在线生成器地址:https://neumorphism.io

<style>
body {
    background: #ecf0f3;
}
div {
    position: relative;
    float: left;
    width: 200px;
    height: 200px;
    margin-left: 80px;
    margin-top: 80px;
    background: #ecf0f3;
}
.drop-shadow {
    border-radius: 20px;
    box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
}
.inner-shadow {
    border-radius: 20px;
    box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;
}
.inner-shadow-ring {
    border-radius: 100%;
    box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
}
.inner-shadow-ring:before {
    content: "";
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
    border-radius: 100%;
    background: #ecf0f3;
    box-shadow: 9px 9px 15px #d1d9e6, -9px -9px 15px #fff;
}
</style>

<div class="drop-shadow"></div>
<div class="inner-shadow"></div>
<div class="inner-shadow-ring"></div>

参考资料

[1].设计趋势 Neumorphism 是什么?.UI中国.布莱恩臣.https://www.ui.cn/detail/514980.html

[2].Neumorphism(新拟态)UI设计趋势吗?.UI中国.Frannnk.http://www.ui.cn/detail/359233.html

[3].Skeuomorph Small Style Guide.Figma.https://www.figma.com/file/J1uPSOY5k577mDpSfGFven/Skeuomorph-Small-Style-Guide

发表评论 取消回复
表情 图片 链接 代码

  1. Time
    Time Lv 1

    昆哥什么时候把主题更新成这样

  2. Muiteer
    Muiteer Lv 1

    新拟态的效率太低感觉不会大流行。

  3. 来了
    来了 Lv 1

    网页图片描述有两个ALT描述,一个是空值alt=""

  4. xx
    xx Lv 1

    快四个月了。。。

    • 鸽子
      鸽子 Lv 1

      @xx每年更新一点哦

  5. Fengzi
    Fengzi Lv 1

    每年更新一点点哈哈哈哈

  6. Veen Zhao
    Veen Zhao Lv 1

    昼夜切换好好看,扒走了[aru_31]

    • 轻云网络 
      轻云网络  Lv 1

      @Veen Zhao这玩意咋扒[斜眼笑][斜眼笑]

    • mengkun
      mengkun 站长

      @Veen Zhao你的博客好好看[aru_53] 整个儿扒走了![aru_43]

      •  
          Lv 1

        @mengkun[斜眼笑] [斜眼笑] [斜眼笑]

    • 光阴似箭
      光阴似箭 Lv 1

      @Veen Zhao你的博客模板真不错[鼓掌],我可以扒一份吗[斜眼笑]

  7. 轻云网络
    轻云网络 Lv 1

    我说博主啊,你的主题都出2.0了,总该更新了,总不能说一年就是一年啊,别让我们这些粉丝都慢慢地不看你的博客,你自己也会掉粉的[aru_154]

  8. 小星云
    小星云 Lv 2

    坤哥求求你了,更更新吧,小弟已经等不及了[aru_12]

  9. jj
    jj Lv 1

    作者np

  10. ych-template

    2.0 也出了,也该更文了[aru_1]

  11. 王生鑫
    王生鑫 Lv 1

    博主,需要你加我QQ,有个程序需要你帮忙看看是干啥的

  12. 小宇
    小宇 Lv 1

    http://tool.mkblog.cn/relax/,这个手机用不了,播放不了

  13. Edipse
    Edipse Lv 1

    你这博客系统,是你自己做的吗?还是用的WP博客系统?

    • 轩沫
      轩沫 Lv 3

      @Edipse看图片链接就知道答案是后者。

  14. 小星云
    小星云 Lv 2

    大佬好帅,每天进步一点点,#(太开心),咦#(疑问)
    怎么变成了每年更新一点点了#(不高兴)

    • 轻云网络
      轻云网络 Lv 1

      @小星云不是我说,真成了每年进步一点点[斜眼笑][斜眼笑][aru_39]

  15. 幽谷
    幽谷 Lv 1

    牛批

  16. 今
    Lv 1

    好厉害

  17. 北京别墅装修

    多多更新,写的真是不错,受教了。

  18. 大宝侠
    大宝侠 Lv 1

    感觉打开了新世界

  19. 演员
    演员 Lv 1

    好帅

  20. CCC
    CCC Lv 1

    前排挤挤,接着催更催更催更

分享