photoshop - 将 photoshop 阴影转换为 CSS3 框阴影

Question

如果我有一个具有以下设置的 photoshop 投影

Blend Mode - rgb(0,0,0) / 
Opacity - 25% / 
Angle - 135 degrees /
Distance 4px / 
Spread - 0% / 
Size - 4px

如何设置我的 CSS3 框阴影以使其代表我的 photoshop 设计？

Answer 1

我写了一篇涵盖 conversion of Photoshop Drop Shadow properties into a CSS3 box-shadow 的文章.如果你使用 Sass/Compass，你可以使用 photoshop-drop-shadow compass plugin .如果你想自己做数学，这并不难，下面是一个用 JavaScript 编写的简单示例。两个棘手的部分是将 Angular 转换为 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)