likes
comments
collection
share

教你使用CSS3实现新拟态UI

作者站长头像
站长
· 阅读数 54

什么是新拟态？

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

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

教你使用CSS3实现新拟态UI 教你使用CSS3实现新拟态UI

起源

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

发展

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

原理

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

  • 效果展示 教你使用CSS3实现新拟态UI

  • 结合颜色 教你使用CSS3实现新拟态UI

CSS实现

普通玩法

  • 先定义两个div
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="card left"></div>
    <div class="card right"></div>
</body>
</html>
  • 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);
}
  • 效果 教你使用CSS3实现新拟态UI

高级玩法

  • 定义两个div
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="card left"></div>
    <div class="card right"></div>

</body>
</html>
  • 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);
    }
  • 效果 教你使用CSS3实现新拟态UI

更高级的玩法

  • 定义两个4个div，这次是两个right里面分别嵌套了两个left
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="card right">
        <div class="card left"></div>
    </div>

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

</body>
</html>
  • 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实现新拟态UI

总结

  1. 开发时使用CSS3变量可以便捷的调整整个页面的新拟态样式
  2. 以上代码重点部分在于Shadow的定义和使用部分
  3. 还有更多玩法有待发掘，比如：使用渐变色
转载自:https://juejin.cn/post/6868099832175820808
评论
请登录