用CSS实现当下最火的Neumorphism UI 风格

学前端

发布于 2020-04-22 16:24:15

8030

发布于 2020-04-22 16:24:15

文章被收录于专栏：前端之巅前端之巅

什么是 Neumorphism？

最开始是一位来自乌克兰的设计师 Alexander Plyuto 在许多平台发布了自己设计的新作品。接下来我们来看看这个作品是长什么样子的。

该作品上传到网上后获得了许多好评。有许多网友将这种新型的设计概念称之为拟物风格（New Skeuomorphism）。

也有人说这是拟物风格 2.0 版本（Skeuomorph 2.0），而后来就有设计师创出一个新的虚构名词，把 New Skeuomorphism 两个词组合，Neo 谐音 New 就是 Neuomorphism。

于是这个名字就这么火了，而且到后来，Alexander Plyuto也在自己的作品后面加上了该风格的名称。

该风格使用CSS的实现方式

要实现这种风格，主要的样式在于一个白色的阴影+一个常规阴影。一个示例如下图所示：

在这个基础上，通过改变颜色和大小参数来达到不同效果。

而且经过我在网络上搜寻一番后，找到了有一些网站，已经可以生成这样的效果了。

通过颜色选取和大小等属性的控制，来达到自己想要的效果。

但是要自己实现的话，需要哪些步骤呢？

这里我们直接贴出代码，大家可以去实现一下。

<div class="drop-shadow"></div>
<div class="inner-shadow"></div>
<div class="inner-shadow-ring"></div>
<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>

代码和文章参考来源于网络：孟坤博客 https://mkblog.cn/2081/

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-04-13，如有侵权请联系 cloudcommunity@tencent.com 删除

neo

本文分享自一起学前端微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

neo

登录后参与评论

0 条评论

热度