la conversión de la sombra del descenso del photoshop en la caja de CSS3 sombra

Question

Si tengo una gota de sombra photoshop con los siguientes ajustes

Blend Mode - RGB (0,0,0)/ de opacidad - 25%/ ángulo - 135 grados/ Distancia 4 píxeles/ Spread - 0%/ Tamaño - 4 píxeles

¿Cómo puedo configurar mi CSS3 caja de sombra por lo que representa mi diseño photoshop?

Answer 1

Esta clase CSS es para varios navegador web recogido en una norma sin transparencia (conocida apoyo: 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'); 
} 

... y esta clase de CSS es con el apoyo de la transparencia:

.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); 

} 

Answer 2

escribí un artículo que cubre la conversion of Photoshop Drop Shadow properties into a CSS3 box-shadow. Si está utilizando Sass/Compass, puede usar el photoshop-drop-shadow compass plugin. Si quiere hacer las matemáticas usted mismo, no es terriblemente difícil, a continuación se muestra un ejemplo simple escrito en JavaScript. Las dos partes complicadas están convirtiendo el ángulo en desplazamientos X e Y y convirtiendo el porcentaje extendido en un radio expandido.

// 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) 

Answer 3

Había escrito un script que copia la capa FX al portapapeles como una cadena de CSS junto con la copia estándar de la capa FX. Es un poco crudo, pero funciona. http://github.com/dfcreative/Photoshopr

Answer 4

estoy usando una herramienta llamada PSD a CSS 3, sólo tiene que añadir los valores de photoshop y ya está utilice este enlace 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) 
} 

Answer 5

Aquí es una buena herramienta que no requiere codificación y crea cuadros de photoshop css: http://www.layerstyles.org/