Photoshop投影和CSS box-shadow转换
2015-11-27 11:21
681 查看
"混合模式":Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal)。
"颜色(color)":阴影颜色。对应于CSS3阴影中的
color值。
"不透明度(opacity)":阴影的不透明度。对应于CSS3阴影的颜色
rgba()中的
a值。
"角度(Angle)":投影的角度。
"距离(Distance)":阴影的距离。根据角度和距离可以换算出CSS3阴影中的x-offset和y-offet。
x-offset = Distance * cos(180 -Angle),
y-offset = Distance * sin(180 - Angle)
"扩展(Spread)":阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。
Spread * Size = 阴影中实体颜色的大小。剩下的就是虚化的颜色。CSS3阴影
spread-radius = Spread * Size
"大小(Size)":阴影的大小。在CSS3中
blur-radius + spread-radius = Size即
blur-radius = Size - spread-radius。
以上图中的数值为例。
color: rgba(118,113,113,.75)x-offset: 5 * cos(180°- 145°) = 4.09pxy-offset: 5 * sin(180°- 145°) = 2.87pxspread-radius: 10 * 6% = 0.6pxblur-radius: 10 - 0.6 = 9.4px;
box-shadow: 4.09px 2.87px 9.4px 0.6px rgba(118,113,113,.75);text-shadow: 4.09px 2.87px 9.4px rgba(118,113,113,.75);
text-shadow没有
spread-radius所以不能完全实现PS中的效果。
相关文章推荐
- CSS入门(9)-overflow 属性
- CSS3选择器 (全)
- 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
- CSS样式的优先级别
- CSS入门(8)-position和 z-index属性
- css3渐变
- 大清早来一发——CSS3实现照片墙效果
- CSS入门(7)-Font和行高Line Height
- WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
- 第十八课 色彩样式与滤镜
- 第十七课 图层样式
- CSS入门(6)-margin、padding和top,绝对定位与覆盖的问题
- iOS学习之分段Table View的使用(Grouped样式表格)
- CSS入门(5)-CSS+DIV
- CSS实现垂直居中的5种方法
- Activity实现的Dialog(并不是 用Dialog 的样式实现)
- 两种方法实现CSS垂直居中
- 导入样式表与外部样式表的区别
- 【更改表单元素默认样式】更改文件上传按钮样式
- 获取元素CSS值之getComputedStyle方法熟悉