logo标签列表

将Photoshop的投影效果转换为CSS3的盒子阴影

photoshopcss
11
如果我有一个具有以下设置的Photoshop阴影：
Blend Mode - rgb(0,0,0) / 
Opacity - 25% / 
Angle - 135 degrees /
Distance 4px / 
Spread - 0% / 
Size - 4px

如何设置CSS3盒子阴影以与我的Photoshop设计相匹配？

7个回答
23

我写了一篇文章，介绍了如何将Photoshop投影属性转换为CSS3的box-shadow。如果你使用Sass/Compass，你可以使用photoshop-drop-shadow compass插件。如果你想自己计算，也不是很难，下面是一个简单的JavaScript示例。两个棘手的部分是将角度转换为X和Y偏移量，以及将扩展百分比转换为扩展半径。

// Assume we have the following values in Photoshop
// Blend Mode: Normal (no other blend mode is supported in CSS)
// Color: 0,0,0
// Opacity: 25%
// Angle: 135deg
// Distance: 4px
// Spread: 0%
// Size: 4px

// Here's some JavaScript that would do the math
function photoshopDropShadow2CSSBoxShadow(color, opacity, angle, distance, spread, size) {
  // convert the angle to radians
  angle = (180 - angle) * Math.PI / 180;

  // the color is just an rgba() color with the opacity.
  // for simplicity this function expects color to be an rgb string
  // in CSS, opacity is a decimal between 0 and 1 instead of a percentage
  color = "rgba(" + color + "," + opacity/100 + ")";

  // other calculations
  var offsetX = Math.round(Math.cos(angle) * distance) + "px",
      offsetY = Math.round(Math.sin(angle) * distance) + "px",
      spreadRadius = (size * spread / 100) + "px",
      blurRadius = (size - parseInt(spreadRadius, 10)) + "px";
  return offsetX + " " + offsetY + " " + blurRadius + " " + spreadRadius + " " + color;
}

// let's try it
// for simplicity drop all of the units
photoshopDropShadow2CSSBoxShadow("0,0,0", 25, 135, 4, 0, 4);
// -> 3px 3px 4px 0px rgba(0,0,0,0.25)
4

这个 CSS 类用于将多种网页浏览器放在一个规则中，不带透明度（已知支持：Firefox 3.5+、Chrome 5+、Safari 5+、Opera 10.6+、IE 9+）：

.shadow {
    -moz-box-shadow: 4px 4px 4px #000;
    -webkit-box-shadow: 4px 4px 4px #000;
    box-shadow: 4px 4px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

...而且这个CSS类还支持透明度：

.shadow {
  -webkit-box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  box-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
  -webkit-transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  transform:rotate(135deg);

}
3
这个问题可能有点老了，但对于新手来说，Adobe Photoshop从CS6.1版本开始就原生支持从图层提取CSS。
要做到这一点，只需在图层面板中右键单击要导出的图层，然后选择“复制CSS”，然后您可以直接将其粘贴到您的.css文件中。
或者，您也可以使用http://psd-to-css-shadows.com获取所需的CSS。
“复制 CSS” 功能不包括阴影。 - Hilyin
0

我正在使用一个叫做psd to css3的工具，你只需要从Photoshop中添加数值，就可以完成了。使用这个链接http://melanieceraso.com/psd-to-css3/#sthash.T9hS7I1j.dpbs

.shadow  {
-moz-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25);
box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.25)
}
0
0

我写了一个脚本，可以将图层FX复制到剪贴板作为CSS字符串，并进行标准的FX复制。它还有点粗糙，但是它能够正常工作。 http://github.com/dfcreative/Photoshopr

-1

最简单的方法是将图形隔离到一个图层中，关闭所有其他图层，然后保存为png格式。这将为您提供一个透明的阴影区域。

bam

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接