Photoshop投影和CSS box-shadow转换
"混合模式":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中的效果。
转载于:https://www.cnblogs.com/huangxi/p/5000098.html
Photoshop投影和CSS box-shadow转换相关推荐
- CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
- Photoshop投影与CSS中box-shadow的转换
来自:http://www.jb51.net/css/404167.html "混合模式":Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal ...
- html中投影效果图,利用CSS3(box shadow)制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- [css] 使用css将图片转换成黑白的效果
[css] 使用css将图片转换成黑白的效果 filter: saturate(0); 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣 ...
- 纯CSS将图片转换成黑白
纯CSS将图片转换成黑白 几行代码就可以实现!效果非常好! 1. 正常效果截图 鼠标悬停前后,分别示下: 2. 非正常效果截图:代码设置的不同,显示的效果不同! 比如:下面的设置导致图片效果不好! 参 ...
- 前端:JS/28/CSS DOM动态样式(style对象,style 对象属性与CSS属性的转换),Event DOM,事件对象简介(DOM和IE中的Event对象),实例:点出满天小星星
CSS DOM动态样式 使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by ...
- css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯 拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
- css自定义字体转换工具_5种最佳CSS3字体工具
css自定义字体转换工具 自从将图形支持添加到浏览器以来,字体在网络上产生了最戏剧性的视觉影响. 几年前,不可能找到使用Arial,Verdana,Tahoma,Times New Roman或Geo ...
- css里box是什么文件,CSS Box盒模型的详细解说
CSS盒子模型在于你做css之后每个元素都由一个包围该元素的矩形框定义.了解框模型的工作原理是理解CSS并更好地控制布局和演示的关键.话不多说,让我们直接讨论一下CSS盒子模型是什么,一个盒子如何影响 ...
最新文章
- Eclipse 创建 Java 项目概述
- 表面缺陷检测数据集汇总及其相关论文集收集 | Github开源
- 时间戳转化为时间格式 时间格式转为时间戳
- vue 分享微信传参_vue 中使用微信分享接口(简单实用)
- MathWorks.MATLAB.NET.Arrays.MWArray”的类型初始值设定项引发异常 解决方法
- mysql 查询 字段是否为空
- 8086汇编-实验7-制表
- 通过jquer连接数据库里面的数据、LINQ简介
- msp430入门编程46
- Docker学习文档之三 其他相关-安全性
- 2699!Redmi Note 11潮流限定版再次发售:全球首发“全系悬浮工艺”
- Echarts pie 饼图类型后显示数据
- 为什么赚不到90后00后的钱?
- 常见linux服务器存储空间,全面了解linux服务器的常用命令总结
- Atitit 软件项目系统托盘图标解决方案
- Scan chain/SE,SI,SO 带scan的寄存器
- 团队管理之绩效考核(OKR、KPI)
- HCIE-Routing Switching认证
- R语言read.csv()读入行不规则数据
- IE8浏览器兼容问题(日常经验总结)