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

Posted 2021-07-14 Naisu Xu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端例程 001：新拟物风格（Neumorphism）设计与实现相关的知识，希望对你有一定的参考价值。

文章目录

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

前言

新拟物风格（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>

在这里插入图片描述

总结

从代码角度来说在前端页面中实现新拟物风格挺简单的，不过从设计角度来说需要考虑的东西其实挺多的，更多内容可以参考下面文章：
《设计风格讲解之——新拟物风格Neumorphism》

以上是关于前端例程 001：新拟物风格（Neumorphism）设计与实现的主要内容，如果未能解决你的问题，请参考以下文章

前端例程 003：玻璃拟物化风格（Glassmorphism）设计与实现

WordPress图片主题国人原创轻拟物风格niRvana主题

WordPress主题niRvana2.6.0绿色版轻拟物主题

Android 安卓实现Neumorphism（新拟物化）UI控件