东莞道滘网站建设,西安广告设计公司有哪些,重庆潼南网站建设公司,wordpress 可以提交信息入口什么是新拟态(Neumorphism) UI 风格#xff1f;网上似乎还没有一个准确统一的定义。按照我个人的通俗理解#xff0c;就是将界面的一部分凸起来#xff0c;另一部分凹下去#xff0c;形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新…什么是新拟态(Neumorphism) UI 风格网上似乎还没有一个准确统一的定义。按照我个人的通俗理解就是将界面的一部分凸起来另一部分凹下去形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」 Skeuomorph Mobile Banking
新拟态 UI 风格与扁平、投影风格的对比 从上面这张对比图可以看出扁平风格就像是一张纸贴在墙面上投影风格像是浮在半空中而新拟态风格则像是墙面上直接凸起了一块。
新拟态 UI 风格的实现方式
要实现这种风格精髓在于一个白色的阴影一个常规阴影。一个示例如下图所示 新拟态 UI 风格的前端实现
闲来无事参照着以上的实现方式临摹了一下练手代码如下。后来发现居然已经有了在线工具直接生成这种风格的 CSS 代码很强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;
}
/stylediv classdrop-shadow/div
div classinner-shadow/div
div classinner-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 CSS 实现新拟态(Neumorphism) UI 风格 | 孟坤博客
