快捷导航
 
CSS 实现新拟态(Neumorphism) UI 风格
VIEW CONTENTS

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

2021-6-23 17:05| 发布者: 盒子云| 查看: 1767| 评论: 0|原作者: mengkun
摘要: 按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」

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

CSS 实现新拟态(Neumorphism) UI 风格 20200216_040913_82.pngSkeuomorph Mobile Banking

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

CSS 实现新拟态(Neumorphism) UI 风格 20200216_042400_34.jpg

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

新拟态 UI 风格的实现方式

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

CSS 实现新拟态(Neumorphism) UI 风格 20200216_042456_31.jpg

新拟态 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


    鲜花

    握手

    雷人

    路过

    鸡蛋

    相关阅读

    最新评论

    嗨,AV8D ~!X

    喜欢给你阳光,让你充满活力!

    • 反馈建议:2308883803@qq.com
    • 工作时间:周一~周五

    云服务支持

    精彩内容,快速检索

    关注我们

    Copyright© 盒子云 - 你笑起来真好看~  Powered by Discuz!    ( 蜀ICP备18033287号-3 )