前言

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

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

【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [web前端特效源码]Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: <!DOCT ...
【前端实例代码】Html5+css3创建登录和注册表单~实现新拟态新拟物风格(Neumorphism)网页图标效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: [web前端特效源码]Html5+css3创建登录和注册表单2!实现新拟态新拟物风格(Neumorphism)网页图标效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: ...
【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)气泡图标泡泡网页效果~手把手教学~初学者进阶必会~超简单 ~
b站视频演示效果: [前端实例代码]Html5+css3创建登录和注册表单!实现新拟态新拟物风格(Neumorphism)气泡图标泡泡网页效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: ...
【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...
Neumorphism新拟物化控件设计灵感
最近关于新拟物化的风太大,基本上设计圈的人是无人不知.尽管观点如此,我还是想为新拟物化这位诞生在不平凡 2020 年的新生儿稍稍正个身,它并非空穴来风,也并非完全在设计里面无法落地使用,相反如果合理加 ...
UI设计新趋势|拟物风格UI设计素材模板
拟物风格的设计总显得精致有质感,高级感. 这基本上意味着他们使用了 "真实世界 "的元素,比如木质书架,笔记中缝制的皮革,以及你翻阅的CD封面,让你感受到新的数字世界.通过使用 ...
新拟物素材|UI设计领域必掌握的要领！
新拟物风的前身是拟物,是在界面中模仿现实物纹理材质的设计,让人们在使用时会联想到现实物体,当时拟物写实的设计曾风靡全球. 新拟物设计以细腻而著称,通过加重图标轮廓与阴影处理,达到像悬浮/凸起的样式效果 ...

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

文章目录

前言