优艾设计网

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

优艾设计网 https://www.uibq.com 2020-09-13 00:00 出处:网络 作者:弥散阴影
Photoshop图片处理技巧教程:学习做弥散阴影的方法,弥散阴影全方位通关指南,实例中还加上了HTML/CSS 的制作方法,附超多优秀案例,学完弥散阴影就通关了。

用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

精彩评论

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