TypechoJoeTheme

尘遇 logo

当我遇上你
排行榜
统计

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

醉书生站长
7个月前
0 评论
147 阅读
检测收录...
05/03
本文最后更新于2021年05月03日,已超过219天没有更新,若内容或图片失效,请留言反馈。

什么是新拟态(Neumorphism) UI 风格?网上似乎还没有一个准确统一的定义。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「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;
}
</style>
 
<div class="drop-shadow"></div>
<div class="inner-shadow"></div>
<div class="inner-shadow-ring"></div>
本文共271个字数,您已阅读:平均阅读时长≈1分钟。
CSS
朗读
点赞
1
赞赏
海报
人生
欢迎
要时间嘉许,等春风得意,我正好遇上你!

微信/QQ/支付宝三合一收款码

微信
QQ
支付宝
打开微信/QQ/支付宝扫一扫,即可进行扫码打赏!
版权属于:

尘遇

最后修改:

2021 年 05 月 03 日 07 : 25 PM

本文链接:

https://chenyu.me/1368.html(转载时请注明本文出处及文章链接)

暂无评论

光阴者,百代之过客

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. 小斌秀才
    2021-12-07
  2. GGHZT贡士
    2021-12-06
  3. 米奇秀才
    2021-12-06
  4. GGHZT贡士
    2021-12-04

    {!{data:image/webp;base64,UklGRpIEAABXRUJQVlA4WAoAAAAwAAAAtQMAKwEASUNDUBgCAAAAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgbAAAAAQcQEREQkCT9/09G9D/jP//5z3/+85///F9vAFZQOCAwAgAAkEAAnQEqtgMsAT9xuNlltK8rpyAIApAuCWlu4XdhG0AJ7APfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkN4AAP7/rR4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=}!}

  5. GGHZT贡士
    2021-11-30