CSS3实战--关于阴影的N个细节

发表于2017-08-28 11:34  |  次阅读  |  0条评论  |   作者:siru90

 在没有CSS3的年代,阴影、渐变、圆角都是制作经理们的死穴,如果有哪个设计师敢在渐变上摞阴影,那简直就是与敌为伍。到了CSS3时代,这一切都简单了。

有人说阴影是CSS3最棒的新属性之一,可以帮助制作经理轻松实现元素的多个阴影(内部或外部)、定义阴影的大小、颜色、模糊半径。大部分人认识阴影是从Photoshop的图层投影开始的,但是在网页设计上,Photoshop中的投影能完全用CSS3实现么?这就是本文要探讨的问题。要实现阴影,首先要了解Photoshop投影的几个属性。

注:以下 “投影”指的是Photoshop的投影效果;阴影指CSS3盒阴影box-shadow属性。

一、Photoshop中的投影
1、投影
Photoshop中的投影也就是我们常说的外阴影,这个界面是我们熟悉的:


其中,结构部分的属性是我们主要讨论的,要是嫌不过瘾,还要加上品质部分的等高线、杂色这些效果,那就是再伟大的肖邦,也弹不出您的悲伤了---CSS3没有定义这几种参数来实现这些效果,姐只能切图实现了。哦,忘了一条,结构部分的混合模式也是这样,目前仅支持正片叠底方式。
 
颜色、不透明度都好说,有了rgba的色值方式,色值和透明度已经不是问题了。重点是下面这几个:

a、角度
光源的角度定义了造成投影的光线的方向,使用全局光的图层光线均使用这一角度。如果定义一个坐标轴,这个角度和它产生的投影应该是这样的:

放大投影细节,把对象和投影放到坐标系里:


b、距离(Distance)
Photoshop中关于距离的说明是“设置投影的位移”,即投影和投影对象之间的偏移量,这个值越大,会感觉光源的角度越低,反之越高。“就好比傍晚时太阳照射出的影子总是比中午时的长。”设置不同的距离,投影表现如下(为简化起见,扩展和大小都设为0):


放大细节,距离对应到上图里,分别就是这些:


以投影4为例,我们将投影放大放到坐标系里,可以得到一个蓝色三角形:


其中D就是我们设置的距离参数。即使你初中数学三角函数公式都还给老师,也该记得 个sinθ1= Y/D,cosθ1=X/D吧!那么三角形的两条直角边长度分别是:
 
X = cosθ1 * D = cos(180° - θ) * D = -cosθ * D
Y = sinθ1 * D = sin(180° - θ) * D = sinθ * D
 
这两个距离就是投影在X方向和Y方向的偏移,X为正值向下右偏移,负值向左偏移;Y为正值向下偏移、负值向上偏移。这两个值我们后面会在CSS中用到。
 
接下来我们先跳过扩展,来讲大小。
 
c、大小(Size)
这个值反映光源距离层的内容的距离,其值越大,投影越大,表明光源距离层的表面越近,反之投影越小,表明光源距离层的表面越远。如果大小为0,投影的尺寸就跟被投影对象的尺寸一样。否则,就会在原有大小范围基础上,向外扩张,扩张尺寸就是这个值大小。也来举几个例子(为便于观察,我们先将扩展值设置为100%):


可以看出扩展的的同时,正方形投影的四个被羽化成了圆角,继续以投影4为例放大来看:


其中S就是我们设置的大小参数,这时候投影的偏移仍然没变:
 
X = -cosθ * D 
Y = sinθ * D
 
但是大小扩张了S。注意,大小(size)属性的扩张是在四个方向同时扩张,并且扩张的大小是一样的。如果我们看到一个上、下 投影大于左右投影的对象,那肯定不是用投影实现的;或者说,它是不能用CSS实现的。扩张后的投影可以有位移(就是距离),但必定是向下位移,上边的投影就少了;向左位移,右边投影就少了。
 
d、扩展(Spread)
之所以跳过扩展先讲大小,是因为如果投影大小为0,设置扩展是没有作用的。
 
Photoshop中关于扩展的说明是“进行模糊处理前扩大图层模版”。这个选项用来设置投影的模糊半径,这个值越大,投影的边缘显得越清晰,模糊部分越少,即模糊处理前图层的模版设置得越大。注意,扩展的单位是百分比,具体的效果会和“大小”相关,“扩展”的设置影响范围仅仅在“大小”所限定的像素范围内。 具体来说这个值对投影的影响如下图所示:


扩展已经不会影响投影的位置偏移了,仅在原投影范围内造成边缘模糊。
 
2、内阴影
Photoshop的内阴影:


与投影的扩展相对应的是阻塞,定义是“进行模糊处理前缩小图层模版”。其他属性与投影基本同理,不再累叙,只做两个例子:
 

本站关键字:sunny90 web开发 数据库 移动开发 服务器 Nginx Mysql PHP
Copyright © sunny90版权所有 power by sunny90.com  
湘ICP备14012284号-1,粤公网安备 44030602000307号