人生海海，山山而川
唠叨一会
我们总得在不断学习道路上成长，当我们随着知识越来越丰富得时候，才能发现这个世界的精彩；新手快速在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>
原创文章，作者：枫瑞博客，如若转载，请注明出处：https://www.frbkw.com/3110/
相关推荐
-
CSS3 filter(滤镜) 制作图片高斯模糊无需JS
CSS3 filter(滤镜) 制作图片高斯模糊无需JS 这是一个寂寞的工作日，因为没有女盆友所以很寂寞，因为很寂寞所以来写教程。希望再看教程的你也是单身！啊,知道你是单身枫瑞贼开心！爽的一B！！！起初我在不停的切...
-
新手绘制svg地图热点纯css实现鼠标划滑过颜色变化效果
原先发布了一个dw制作热点的方式，该方式简单容易上手。也有一定的弊端比如：如果后期某个区域需要修改颜色得修改图片，以及无法在上面做一些客户想要得效果。那么就百度了一些关于（SVGDeveloper）svg制作地图且...
-
纯html+css3绘制任天堂switch掌机Dome
纯html+css3绘制任天堂switch掌机Dome [tip type="worning"]声明:在学习html+css的路上偶遇一个大神写的switch，便下载下来学习学习，分析下怎么写的。本文章只是详解绘制switch中所需要的技术栈以及对名...
-
原生JS递归寻找一维数据转多层级评论回复
我可以一个人 坐地铁一直到终点 ，也可以 一个人看电影到凌晨六点 ，你以为我过的孤独 我只是想过的舒服 唠叨一会 原本是打算做星宿UI的评论留言的但是wodpress过来的json数据是一级的，就知道了评论回复不好写，...
-
红色小型新闻类网站源码基于Bootstrap框架
红色小型新闻类网站源码基于Bootstrap框架 目前项目为开放源码 自适应设计完美兼容移动端 绿色医院门户即将上线 mui项目源码 在7月底将恢复更新 预览地址 红色新闻类型网站 预览截图
-
使用Dreamweaver做地图热点且删除热点边框
Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，最初为美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript...
-
小型医院门户网站 淡绿色主题 基于BootStrap框架
小型医院门户网站 淡绿色主题 基于BootStrap框架 预览界面 小型医院门户网站 淡绿色主题 枫瑞博客网 预览截图 需求收集： 2018.07.29UI设计：2018.07.20界面编写：2018.07.23界面测试：2018.07.24整体流程下来大...
-
网站Footer导航完美自动固定在底部div+css
网站Footer导航完美自动固定在底部div+css，为啥要添加完美呢？因为马上过年，我们需要一个比今年更完美一点 我们在设计网页的时候，都会遇到一个问题： 我底部导航要在底部，用position: absolute;定位的...
-
WordPress博客美化文章底部添加百度收录以及申明
目前自媒体给了不少新人一些可观的收入，门槛极低。但是随着现在越来越多的人开始注重版权这块。那新博主在辛辛苦苦写了文章之后给第三方采集，出处都不带的那种“借鉴”！在不说版权这块上，也有不少人想知道自己...
-
分享一个好看的扁平插画引导页宣传页
你眼中的星河荡漾，是我一生的心之所向 唠叨两会 哎，烦！哎！后台这坑爹插件天天上图片天天失败，这是给星茫做的一个宣传页，也可以叫引导页。插画风格颜色之类的还是听吸引眼球，神奇的是...