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中的效果。

时间： 2024-08-11 18:41:27

Photoshop投影和CSS box-shadow转换的相关文章

Photoshop投影与CSS中box-shadow的转换

box-shadow是给元素块添加周边阴影效果,Photoshop投影与CSS中box-shadow的转换 text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} "混合模式":Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal). "颜色(color)&

css的2D转换

脚本化css 下面通过css实现动画效果,可以使用脚本化的css实现滑入,轮廓伸缩的列表,即动态的HTML,一个过时的说法DHTML 一些css的基础知识 之前已经看过厚厚的一本大书,现在简单看一下,补充一下不知道的点 层叠 web浏览器组合元素的style属性,然后再计算样式. 颜色透明度和半透明 颜色有半透明的颜色(不知道为什么edge不兼容) 脚本化内联样式 div.style.background = "#FFFFFF" 即通过js完成css样式的添加 由于-会被js认为有语法

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2d转换测试</title> </head> <body> <div id="fr&

css box模型content-box 和border-box

因为刚开始学,用了bootstrap的框架,有些东西可以用现成的,不用自己布局,后来发现如果要调比较精细的布局还是得自己写css,然后就开始一点点去掉bootstrap的布局,不然在原来bootstrap的css上改,没有完全理解bootstrap这个效果是怎么弄出来的话想去掉某个效果也很难,某些样式会和自己调的样式冲突,最终决定直接把整个bootstrap框架卸掉,全部用原来的 但是一卸调之后布局全变了,控件各种错位,完全想不明白为什么,width调的50%却占了70+%,于是去看了一下css

CSS Box Model

Table of Contents The CSS Box Model Visualized width and height box-sizing The CSS box model specifies how margins, borders and padding of HTML elements are rendered. The CSS Box Model Visualized The CSS box model looks like this: Each HTML element r

小tip: 使用CSS将图片转换成黑白(灰色、置灰) ? 张鑫旭-鑫空间-鑫生活

小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川这种糟糕

CSS Box Model（盒子模型）

CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 下面的图片说明了盒子模型(Box Model): 不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框.

小tip: 使用CSS将图片转换成黑白(灰色、置灰)

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能. CSS3 greyscale 滤镜实现 如下测试代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: