最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

CSS3 实现新拟态UI

CSS3实现新拟态UI

在设计达人看来这种UI很适合用来做概念设计的产品,当然实际应用中也可以尝试,因为视觉效果确实是很不错呢。

什么是新拟态UI设计?

新拟态的英文名称是“Neumorphism”,是New+Skeuomorphism的组合词,同时也叫“Soft UI”。简单讲,新拟态是一种图形样式,其原理是通过模拟真实物体来为界面的UI元素赋予真实感。

在今年上半年,新拟态的UI设计风靡一时,它被誉为2020年最火的UI设计趋势之一,在互联网上广受欢迎。新拟态融合了拟态和平面设计技术,模仿真实物体的形态,为界面的UI元素赋予真实感,它是一种现实主义风格,也是非常值得探索的新设计风格。它时尚,细致,使用它进行设计确实很有趣。因此,在本文中,我将教大家如何使用CSS3来实现新拟态风格的UI元素,并且分享一些使用新拟态UI的网站实例。

什么是新拟态UI设计?

新拟态UI的网站

起源

新拟态风格起源于 dribbble(国际主流的设计作品分享平台)上一名叫 Alexander Plyuto 的设计师分享出来的一些设计作品。这些使用新拟态风格的作品之一,一路飙升至Dribbble 2019 年 POP 排行第一热门。

发展

虽然当前新拟态风格非常火,但也仅仅局限于设计圈,距离正真落地应用还有很长一段路要走。国内许多大厂也都在进行新拟态UI的落地探索和尝试,在百度、腾讯等大厂的某些网页上,也能看到一些新拟态的身影。如 腾讯全球数字生态大会的网站。

原理

最基础的「凸起效果」和「凹陷效果」,卡片要使用与页面的背景色相同的背景色,差别在于前者使用外投影,后者使用内投影。

效果展示

最基础的「凸起效果」和「凹陷效果」

结合颜色

结合颜色

CSS实现

普通玩法

先定义两个div

<div class="card left"></div>
<div class="card right"></div>

CSS部分

html {
    /* 定义变量 */
    --bgColor: #ff5353;

    /* rgba的四个值分别为:红(R)、绿(G)、蓝(B)、透明度(A) */
    --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
    --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
}

/* 设置一些页面的布局样式 */
body {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--bgColor);
}

.card {
    width: 30vh;
    height: 30vh;
    margin: 45px;
    background-color: var(--bgColor);
    border-radius: 30px;
}

/* 主要部分 */
.left {
    /* 设置外阴影 */
    box-shadow: var(--blackShadow),
                var(--whiteShadow);
}

.right {
    /* 设置内阴影 */
    box-shadow: inset var(--blackShadow),
                inset var(--whiteShadow);
}

效果如下:

普通玩法

高级玩法

定义两个div,和普通玩法定义一样,这里不写忽略。

CSS部分(改变Shadow方向)

html {
        /* 定义变量 */
    --bgColor: #ff5353;
        /* rgba的四个值分别为:红(R)、绿(G)、蓝(B)、透明度(A) */
    --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
    --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
    --whiteShadow2: 15px 15px 25px rgba(255, 117, 117, .5);
    --blackShadow2: -15px -15px 25px rgba(110, 40, 40, .2);
}

    /* 设置一些页面的布局样式 */
body {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--bgColor);
}

.card {
    width: 30vh;
    height: 30vh;
    margin: 45px;
    background-color: var(--bgColor);
    border-radius: 30px;
}

    /* 主要部分 */
.left {
    box-shadow: inset var(--blackShadow2),
                    inset var(--whiteShadow2);
}

.right {
    box-shadow: var(--blackShadow2),
                    var(--whiteShadow2);
}

效果如下:

高级玩法

更高级的玩法

定义两个4个div,这次是两个right里面分别嵌套了两个left

div class="card right">
  <div class="card left"></div>
</div>

<div class="card right2">
  <div class="card left2"></div>
</div>

CSS部分(改变Shadow方向)

html {
    /* 定义变量 */
    --bgColor: #ff5353;

    /* rgba的四个值分别为:红(R)、绿(G)、蓝(B)、透明度(A) */
    --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
    --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);

    --whiteShadow2: 15px 15px 25px rgba(255, 117, 117, .5);
    --blackShadow2: -15px -15px 25px rgba(110, 40, 40, .2);
}

/* 设置一些页面的布局样式 */
body {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--bgColor);
}

.card {
    width: 30vh;
    height: 30vh;
    /* margin: 45px; */
    background-color: var(--bgColor);
    border-radius: 30px;
}

/* 主要部分 */
.left {
    box-shadow: inset var(--blackShadow),
                inset var(--whiteShadow);
}

.right {
    box-shadow: var(--blackShadow),
                var(--whiteShadow);
    padding: 5px;
}

.left2 {
    box-shadow: inset var(--blackShadow2),
                inset var(--whiteShadow2);
}

.right2 {
    box-shadow: var(--blackShadow),
                var(--whiteShadow);
    padding: 5px;
    margin: 50px;
}

效果如下:

更高级的玩法

总结

开发时使用CSS3变量可以便捷的调整整个页面的新拟态样式,以上代码重点部分在于Shadow的定义和使用部分,还有更多玩法有待发掘,比如:使用渐变色等,如果你有更好的想法,欢迎留言讨论。

作者 Truda 全栈开发工程师

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS3 实现新拟态UI

发表评论