好看的阴影如何实现,在设计时需要注意CSS的这个属性

Apr 2, 2019   Owlling

好看的阴影

在前端页面中设置一个div有卡片的效果,我们只要设置好CSS中的box-shadow的属性就可以了

我们先看一下box-shadow和sketch参数之间的设置对比

Image
Image

CSS中的box-shadow属性参数表

属性 必选项 表达 允许负值 对应Sketch参数
h-shadow 必选 水平阴影的位置 允许 对应x值
v-shadow 必选 垂直阴影的位置 允许 对应y值
blur 可选 模糊距离 不允许 对应模糊
spread 可选 阴影的尺寸 允许 对应扩展
color 可选 阴影的颜色 - 对应颜色
inset 可选 将外部阴影 (outset) 改为内部阴影 - 对应内阴影

用sketch画一个卡片来测试还原度

Image
* Design
Image
* Code

当box-shadow参数和设计稿参数一致时基本还原度是100%

通过以上截图我们发现box-shadow少了一个参数;那就是spread;对应sketch里的扩展, 如果不写这个参数默认长度为0;也是开发最容易忽略的。

在做阴影的过程中当遇到特殊情况或当前页面需要更干净的阴影使界面看起来更舒服, 我们可以对阴影进行收缩相应的像素。

Image
* Design
Image
* Code

收缩前后卡片对比

Image
* Spread Before
Image
* Spread After

做好看的阴影&弥散

我们经常会遇到彩色的或渐变色的卡片以及彩色的按钮;

给这样的卡片做出弥散效果的阴影可能就需要给阴影做收缩才能感觉弥散效果舒服些。

下边看两个设计上实现弥散的效果

Image

从视觉上来看两种阴影效果是一样的;但是实现的过程不一样

第一种是直接给卡片设置阴影参数,然后做一个收缩;

第二种是在卡片底部做一个比卡片小的卡片设置模糊通过位置设定达到投影的效果;

理论上来讲两种都可以开发实现这种效果,但是为了减少开发工作量和兼容定位问题

第一种方案是最合理的,只需要注意不要少掉 " 扩展 " 这个参数;

Image

Android和iOS的实现方式有所不同;这里暂时只介绍CSS的样式参数。

什么情况下会用到两层分开的情况呢?

一般是特殊情况;多为顶层为图片的情况,切图自身打阴影会很不自然;需要图片和阴影分开定位,

当然这样就可以给图片和阴影分开做动效,在动效实现上会更加灵活;

对于大图情况下开发出阴影效果会比直接切图清晰太多,但是在网络环境不好的情况下也可能会出现图片加载速度没有阴影出来的快的状况;

所以一般不是为了实现动效的情况下还是避免这种情况。

最常见的两层做阴影就是以下这种情况;图片阴影不和图片放在一块切图;分为两层,图片的消失和出现动效就会更加灵活。

* 分层做阴影示例

Codepen.io有很多有趣的CSS样式源码

END / THX