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

mengkun 65.6K 80

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

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

Skeuomorph Mobile Banking

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

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

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

新拟态 UI 风格的实现方式

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

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

新拟态 UI 风格的前端实现

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

HTML
  1. <style>
  2. body {
  3.     background: #ecf0f3;
  4. }
  5. div {
  6.     position: relative;
  7.     float: left;
  8.     width: 200px;
  9.     height: 200px;
  10.     margin-left: 80px;
  11.     margin-top: 80px;
  12.     background: #ecf0f3;
  13. }
  14. .drop-shadow {
  15.     border-radius: 20px;
  16.     box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
  17. }
  18. .inner-shadow {
  19.     border-radius: 20px;
  20.     box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;
  21. }
  22. .inner-shadow-ring {
  23.     border-radius: 100%;
  24.     box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
  25. }
  26. .inner-shadow-ring:before {
  27.     content: "";
  28.     position: absolute;
  29.     left: 20%;
  30.     top: 20%;
  31.     width: 60%;
  32.     height: 60%;
  33.     border-radius: 100%;
  34.     background: #ecf0f3;
  35.     box-shadow: 9px 9px 15px #d1d9e6, -9px -9px 15px #fff;
  36. }
  37. </style>
  38.  
  39. <div class="drop-shadow"></div>
  40. <div class="inner-shadow"></div>
  41. <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

本文作者为mengkun，转载请注明。

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

  1. 轻云
    轻云 Lv 1

    正式催更你！

    #30 2020-04-03 10:22 回复
  2. CCC
    CCC Lv 1

    愚人节过来催更

    #29 2020-04-01 17:23 回复
  3. ych-template
    ych-template Lv 3

    大佬，今天是4月1日，总该出个愚人节菜单了吧

    #28 2020-04-01 10:06 回复
    • ych-template
      ych-template Lv 3

      @ych-template说错了，是彩蛋……

      2020-04-01 11:27 回复
      • mengkun
        mengkun 站长

        @ych-template今年的愚人节彩蛋就是没有彩蛋！

        2020-04-01 18:37 回复
      • ych-template
        ych-template Lv 3

        @mengkun那么，大佬的邮箱提醒怎么配置的……

        2020-04-01 18:39 回复
      • ych-template
        ych-template Lv 3

        @mengkun而且，大佬你说的没有彩蛋不会是在“愚人”吧……

        2020-04-01 18:42 回复
  4. 轩沫
    轩沫 Lv 4

    孟老哥，这篇文章标题的左边是英文括号，右边是中文括号，看着有点难受，望统一。

    #27 2020-03-29 19:06 回复
    • 轩沫
      轩沫 Lv 4

      @轩沫抱歉是我看错了哈，右边的也是英文括号，只不过右边的括号后面有个空格。

      2020-03-29 19:08 回复
    • Aeomo
      Aeomo Lv 1

      @轩沫哈哈，跟我一样有强迫症

      2020-03-31 07:09 回复
  5. 熊猫君
    熊猫君 Lv 1

    挺好看

    #26 2020-03-29 12:06 回复
  6. bwmelon
    bwmelon Lv 1

    这种风格挺好看

    #25 2020-03-27 19:19 回复
  7. lwm
    lwm Lv 1

    ni 比 好逼真的感觉

    #24 2020-03-26 17:57 回复
  8. ych-template
    ych-template Lv 3

    大佬月更呢……

    #23 2020-03-25 11:35 回复
  9. happy
    happy Lv 1

    这个怎么用啊

    #22 2020-03-24 22:09 回复
  10. 雨年
    雨年 Lv 1

    作者加油

    #21 2020-03-21 15:49 回复
  11. 陌涛
    陌涛 Lv 1

    啊啊啊啊啊啊，坤坤，爱你！！！

    #20 2020-03-17 10:26 回复
  12. 会飞的鱼
    会飞的鱼 Lv 2

    新年快乐！

    #19 2020-03-08 11:06 回复
    • mengkun
      mengkun 站长

      @会飞的鱼我怕三十晚上的祝福太多。你会看不到我的问候。
      我怕初一的鞭炮太吵。你会听不到我的祝福。
      我怕初二的菜肴太香。你会看不到我的消息。
      值此 2021 年春节还有 341 天之际，也提前祝你新年快乐！灯笼灯笼灯笼

      2020-03-08 17:24 回复
  13. 阿珏酱
    阿珏酱 Lv 3

    不就是加宽了个边框和阴影吗滑稽

    #18 2020-03-02 14:34 回复
    • mengkun
      mengkun 站长

      @阿珏酱不不不，连边框都没有，只有阴影滑稽

      2020-03-02 20:10 回复
  14. 零距离
    零距离 Lv 1

    不错 不错

    #17 2020-03-01 22:26 回复
  15. 木子欢儿
    木子欢儿 Lv 1

    大佬，牛批

    #16 2020-02-28 11:17 回复
  16. 陆简隽
    陆简隽 Lv 1

    新拟态(Neumorphism) UI 风格感觉适合做手机端页面，做好了打包成APP

    #15 2020-02-27 14:38 回复
  17. 王会
    王会 Lv 1

    好看是好看，感觉更适合在设计图上用，在 web 上用的话，太麻烦了

    #14 2020-02-27 10:35 回复
  18. Matata
    Matata Lv 1

    搞的不错，能直接引用js就更好了

    #13 2020-02-26 12:37 回复
  19. 365cent
    365cent Lv 3

    可以做成能拖拽的吗？好想把第一个合到第二个槽里

    #12 2020-02-25 10:55 回复
    • mengkun
      mengkun 站长

      @365cent然而第一个的“体积”和第二个并不一样~就算能“拖动”也无法完美组合（逼死强迫症）

      2020-02-26 19:37 回复
  20. wu先生
    wu先生 Lv 1

    不错。很多年前不是有个CSS3的吗？

    #11 2020-02-19 22:49 回复
    • mengkun
      mengkun 站长

      @wu先生不同的是这个多了个反光的白色“阴影”

      2020-02-21 20:43 回复
  21. 从不膨胀的小朋友
    从不膨胀的小朋友 Lv 1

    设计界的一股潮流

    #10 2020-02-18 14:24 回复
  22. Ocean
    Ocean Lv 1

    真香，我前几天还看着，这么快就可以生成了

    #9 2020-02-18 09:50 回复
  23. Mark
    Mark Lv 1

    好看，支持一下，事半功倍啊

    #8 2020-02-18 04:00 回复
  24. 小米博客
    小米博客 Lv 1

    坤坤的博客必须留个言

    #7 2020-02-17 23:38 回复
  25. 轩沫
    轩沫 Lv 4

    感觉新的拟物风是今年设计的潮流。

    #6 2020-02-17 23:01 回复
    • mengkun
      mengkun 站长

      @轩沫这种风格不适合大范围使用。因为阴影占地不较大，同时也只有少数几种颜色搭配能出效果

      2020-02-21 20:42 回复
  26. 凉风小筑
    凉风小筑 Lv 2

    这样的风格是真的好看

    #5 2020-02-17 10:57 回复
  27. 小康
    小康 Lv 1

    终于更新了

    #4 2020-02-17 08:48 回复
  28. 亻韦哥
    亻韦哥 Lv 1

    好难得等到你更新，沙发没坐到！没想到我们是湖南老乡

    地板 2020-02-16 19:57 回复
  29. 小星云
    小星云 Lv 3

    等了好久，终于更新了

    板凳 2020-02-16 17:49 回复
  30. 白云drop
    白云drop Lv 1

    大佬终于更新了啊

    沙发 2020-02-16 13:01 回复
    • mengkun
      mengkun 站长

      @白云drop哈哈哈……终于想起后台登录密码了！

      2020-02-16 14:20 回复