优艾设计网

Photoshop图片处理技巧教程:学习做弥散阴影的方法

用Sketch来设计的方法

接下来介绍的是利用和Photoshop具有相同人气的设计工具sketch,来制作弥散阴影效果的方法。

需要注意的有两点:

一方面,在应用阴影效果的大小时要注意按住Option/Alt键。另一方面,你可以为阴影稍微添加一点颜色。

使用HTML/CSS的设计方法

利用CSS的box-shadow属性,可以实现具有深度的阴影效果。

1.box-shadow:【水平方向移动(px)】【垂直方向移动(px)】【模糊半径(px)】【扩展】【颜色(#)】;

水平,垂直方向移动是为了表现出光照过来的方向,从而确定阴影的位置。例如下面的案例,他就同时利用了多个box-shadow,让阴影效果表现的更加真实细腻。

但是,如果你想在box-shadow上运用悬停效果,又不会对页面的载入产生影响,你可以参考这篇文章:How to animate “box-shadow” with silky smooth performance

Photoshop图片处理技巧教程:学习做弥散阴影的方法

源代码:http://codepen.io/vipcrew/pen/AXoPNA

下面是各个浏览器的支持情况。我们可以看到,从IE11以后各个浏览器都开始支持了,所以将来也会越来越多的应用这项技术吧。

Photoshop图片处理技巧教程:学习做弥散阴影的方法

源代码:http://caniuse.com/#feat=css-boxshadow

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新基础

基础排行榜