# 新拟态 UI

# 什么是新拟态

英文名 Neumorphism,简称 “Soft UI”。是一种图形样式,通过 css 来模拟真实的物体
soft.webp

# 原理

基础的凸起效果,【凸起效果】使用了外部阴影;【凹陷效果】使用内部投影,卡片背景色统一相同的颜色

  • 效果展示

tu.png

  • 结合颜色

ao.png

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
  • 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  • 效果

image.png

# 中级实现

  • 定义两个 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
  • 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);

        --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);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
  • 效果

image.png

# 高级实现

  • 定义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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • 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);

    --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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
  • 效果

image.png

参考:
教你使用CSS3实现新拟态UI (opens new window)

更新于: 10/14/2020, 3:24:10 AM