前端例程20210510：新拟物风格（Neumorphism）设计与实现

Naisu Xu

已于 2022-07-28 14:30:12 修改

阅读量4.8k

点赞数 1

分类专栏： Web与JS相关文章标签： css 设计新拟物 Neumorphism ui设计

于 2021-05-10 13:42:25 首次发布

本文链接：https://blog.csdn.net/Naisu_kun/article/details/116480881

版权

Web与JS相关专栏收录该内容

58 篇文章 21 订阅

订阅专栏

文章目录

前言
基础说明
更多示例
总结

前言

新拟物风格（Neumorphism）是前两年兴起的一种设计风格，这个风格虽然因为特征上的一些问题没有流行开来，但是单从视觉角度来说好看是真的好看。这篇文章将对在前端中使用新拟物风格的设计与实现做个简单介绍。
在这里插入图片描述

基础说明

在这里插入图片描述
新拟物风格的设计其实蛮简单，所有的组件都是在它所依附的背景上凸出或凹陷，光源从侧面照射，这样该组件四周就会产生一片高光区域和一片阴影区域。根据这个原理在前端页面中实现新拟物风格组件其实挺简单，只要控制两点：

组件和其父容器背景色要相同或相近；
使用box-shadow制造一片比背景色稍亮的阴影和一片比背景色稍暗的阴影；

下面是个简单的示例：
在这里插入图片描述
到此为止基本上在前端中实现新拟物风格的方法就已经介绍完了。这里再介绍一个方便的工具，可以方便的调节颜色光照等，可以实时预览，并且可以生成代码：
https://neumorphism.io/

更多示例

新拟物风格按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html,body {
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
            background-color: #e6e6e6;
        }
        .neumorphism {
            width: 200px;
            height: 75px;
            border: none;
            border-radius: 20px;
            background-color: #e6e6e6;
            box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff; 
        }
        .neumorphism:active {
            box-shadow: inset 5px 5px 10px #bbbbbb, inset -5px -5px 10px #ffffff;
        }
        .neumorphism:focus {
            outline: none;
        }
        .neumorphism span {
            display: block;
            user-select: none;
            color: #a6a6a6;
            font-size: 24px;
            text-align: center;
            line-height: 75px;
            transition: 0.1s;
        }
        .neumorphism:active span {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <button class="neumorphism"><span>BUTTON</span></button>
</body>
</html>

在这里插入图片描述

暗色新拟物风格卡片

在这里插入图片描述

新拟物风格单选按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            width: 100vw;
            height: 100vh;
            padding: 0;
            margin: 0;
            display: grid;
            place-items: center;
            background-color: #e6e6e6;
        }
        .neumorphism label input {
            appearance: none;
        }
        .neumorphism label div {
            margin: 0.5rem;
            display: inline-block;
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background-color: #e6e6e6;
            box-shadow: 0.2rem 0.2rem 0.6rem #c4c4c4, -0.2rem -0.2rem 0.6rem #ffffff;
        }
        /* 设置在input选中时其后面的div */
        .neumorphism label input:checked+div {
            box-shadow: inset 0.2rem 0.2rem 0.6rem #c4c4c4, inset -0.2rem -0.2rem 0.6rem #ffffff;
        }
        .neumorphism label div span {
            display: block;
            user-select: none;
            color: #a6a6a6;
            text-align: center;
            line-height: 4rem;
            transition: 0.1s;
        }
        .neumorphism label input:checked+div span {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <div class="neumorphism">
        <!-- label标签会将下面input和div绑定，选中div即选中input -->
        <label>
            <input type="radio" name="bool" />
            <div>
                <span>True</span>
            </div>
        </label>
        <label>
            <input type="radio" name="bool" />
            <div>
                <span>False</span>
            </div>
        </label>
    </div>
</body>
</html>