教你使用CSS3实现新拟态UI

深碍√TFBOYSˉ_ 2022-12-04 01:14 265阅读 0赞

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

## 什么是新拟态？ ##

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

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

![White Soft UI][]  
![White Soft UI][White Soft UI 1]

## 起源 ##

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

## 发展 ##

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

## 原理 ##

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

*  效果展示  
    ![原理][format_png]
 *  结合颜色  
    ![原理][format_png 1]

## 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);
    }

*  效果  
    ![原理][format_png 2]

### 高级玩法 ###

*  定义两个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);
        }

*  效果  
    ![原理][format_png 3]

### 更高级的玩法 ###

*  定义两个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;
    }

*  效果  
    ![原理][format_png 4]

## 总结 ##

1.  开发时使用CSS3变量可以便捷的调整整个页面的新拟态样式
2.  以上代码重点部分在于Shadow的定义和使用部分
3.  还有更多玩法有待发掘，比如：使用渐变色

[White Soft UI]: /images/20221123/3863c6a6303742cf8e165a7458312c03.png
[White Soft UI 1]: /images/20221123/634c7d54b75242fbabe1bd0a34c5d0aa.png
[dribbble]: https://dribbble.com/
[Alexander Plyuto]: https://dribbble.com/alexplyuto
[Link 1]: https://des.cloud.tencent.com/?utm_campaign=MJTG&utm_source=KYZG&utm_medium=SYDLP#/
[format_png]: /images/20221123/f1ae1cc23c5641ea80a6a63187ae782e.png
[format_png 1]: /images/20221123/2232827d4543467489b5b82ce309487b.png
[format_png 2]: /images/20221123/a8fd5ed196a14154b536c56479b92a4c.png
[format_png 3]: /images/20221123/b4f303f077384f1cb2f6c8525c231da5.png
[format_png 4]: /images/20221123/f684dbdcd6724394aa3bd9a626dfe088.png