菜单
技能GET
返回

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

2021-6-23 17:05 盒子云   查看 : 1768   评论 : 0  

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

Skeuomorph Mobile Banking

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

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

新拟态 UI 风格的实现方式

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

新拟态 UI 风格的前端实现

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

HTML
  1.  
  2. class="drop-shadow">
  • class="inner-shadow">
  • class="inner-shadow-ring">
  •  运行 复制 文本
    参考资料

    [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

    鲜花
    鲜花
    握手
    握手
    雷人
    雷人
    路过
    路过
    鸡蛋
    鸡蛋
    上一篇:HTML + CSS 实现一个酷炫的夜间模式切下一篇:给新入坑互联网开发小白的建议——服务

    相关阅读

    0条评论

    最新评论

    没有回复
    头像 我也说一句 导航 收藏 返回
    取消
    导航 顶部
    头像游客

    您还未登录,立即登录?

    确定 取消