CSS3 实现新拟态UI
在设计达人看来这种 UI 很适合用来做概念设计的产品,当然实际应用中也可以尝试,因为视觉效果确实是很不错呢。
什么是新拟态 UI 设计?
新拟态的英文名称是“Neumorphism”,是 New+Skeuomorphism 的组合词,同时也叫“Soft UI”。简单讲,新拟态是一种图形样式,其原理是通过模拟真实物体来为界面的 UI 元素赋予真实感。
在今年上半年,新拟态的 UI 设计风靡一时,它被誉为 2020 年最火的 UI 设计趋势之一,在互联网上广受欢迎。新拟态融合了拟态和平面设计技术,模仿真实物体的形态,为界面的 UI 元素赋予真实感,它是一种现实主义风格,也是非常值得探索的新设计风格。它时尚,细致,使用它进行设计确实很有趣。因此,在本文中,我将教大家如何使用 CSS3 来实现新拟态风格的 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 全栈开发工程师
码云笔记 » CSS3 实现新拟态UI