CSS 实现新拟态(Neumorphism) UI 风格 |
您所在的位置:网站首页 › 新拟态设计师是谁 › CSS 实现新拟态(Neumorphism) UI 风格 |
什么是新拟态(Neumorphism) UI 风格?网上似乎还没有一个准确统一的定义。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」 Skeuomorph Mobile Banking新拟态 UI 风格与扁平、投影风格的对比从上面这张对比图可以看出,扁平风格就像是一张纸贴在墙面上,投影风格像是浮在半空中,而新拟态风格则像是墙面上直接凸起了一块。 1新拟态 UI 实现的方式要实现这种风格,精髓在于一个白色的阴影+一个常规阴影。一个示例如下图所示: 16-39-31-031.jpg新拟态 UI 风格的前端实现线工具直接生成这种风格的 CSS 代码,很强!Neumorphism CSS 在线生成器地址:https://neumorphism.io 代码语言:javascript复制 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; } |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |