前言
新拟物风格(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》