преобразование тени photoshop в тень CSS3 box

Если у меня есть тень photoshop со следующими настройками

Режим наложения-rgb(0,0,0) / Непрозрачность - 25% / Угол - 135 градусов / Расстояние в 4px / Спред - 0% / Размер - в 4px

Как я могу установить тень коробки CSS3, чтобы она представляла мой дизайн photoshop?

8
css3 photoshop

7 ответов

этот класс 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

Я написал статью, охватывающую преобразование свойств тени падения 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)
20

Я написал сценарий, который копирует layer FX в буфер обмена в виде строки CSS вместе со стандартным копированием layer FX. Немного сыровато, но работает. http://github.com/dfcreative/Photoshopr

0

Я использую инструмент psd Для 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

вот хороший инструмент, который не требует кодирования и создает коробки photoshop css:http://www.layerstyles.org/

0

самый простой способ-изолировать графику на один слой, отключить все остальные слои, а затем Сохранить как png. Это даст вам прозрачную область тени.

бац

0

этот вопрос может быть в возрасте, но и для тех, кто новичок, Adobe Photoshop имеет встроенную поддержку извлечения CSS из слоя начиная с версии CS6.1.

сделать это просто: кликните правой кнопкой мыши на слой, который вы хотите экспортировать в панели слоев и выберите "копировать css" затем вы можете вставить его непосредственно на ваш .файл CSS.

в качестве альтернативы вы можете использовать http://www.melanieceraso.com/psd-to-css3/ чтобы получить css, который вы хотите.

0