人生海海，山山而川
唠叨一会
我们总得在不断学习道路上成长，当我们随着知识越来越丰富得时候，才能发现这个世界的精彩；新手快速在PS,XD绘制新拟物风格化图标和前端实现？这个问题是枫瑞之前一只纠结的，总感觉自己的ps基础很差，万一要用到该知识的时候无法填充就寻找大佬们开始学习起来！
原理
我们在观察封面图片的时候可以发现我们的按钮的颜色和背景是比较相近的，而且在左上角部分是有白色的阴影，在右下角会有颜色比较重的黑色阴影，基本也就是三种高是模糊然后图层叠加；
PS操作
我们绘制3个圆角矩形，第一个为白色，第二个颜色贴近背景色，第三个在第二颜色的基础上在淡化一点，如下图：
关于高斯模糊大家自己按感觉处理
XD中操作
xd中和ps 基本原理是一样，但是在xd中是没有高斯模糊选择，他是对象模糊
前端代码
在刚接新拟物风格化的时候 ，比较担心的是在uni-app中如何实现，因为我们肉眼看过去就像在地面凸起一个按钮；其实在前端还是可以实用box-shadow:实现，前端实现如图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box-weh{
width: 800px;
height: 500px;
background-color: #c1dff3;
position: relative;
}
.box-btn{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 80px;
border-radius: 20px;
background-color: #c1dff3;
position: absolute;
box-shadow: -5px -5px 10px 0px #f4faff,
10px 10px 10px 0px #aac6d8;
}
}
</style>
</head>
<body>
<div id="" class="box-weh">
<div id="" class="box-btn">
</div>
</div>
</body>
</html>
评论列表（1条）
看看