轉換的Photoshop陰影成CSS3框陰影

Question

如果我有一個的Photoshop陰影具有以下設置

混合模式 - RGB（0,0,0）/ 透明度 - 25％/ 角度 - 135度/ 距離4PX/ 傳播 - 0％/ 大小 - 4PX

如何設置我的CSS3框陰影，因此代表着我的Photoshop設計？

Answer 1

這個CSS類是收集在一個沒有規則的透明度不同的網絡瀏覽器（俗稱支持：火狐3.5 +，Chrome的5+，Safari 5以上，歌劇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); 

} 

Answer 2

我寫了一篇文章，涵蓋了conversion of Photoshop Drop Shadow properties into a CSS3 box-shadow。如果您使用的是Sass/Compass，則可以使用photoshop-drop-shadow compass plugin。如果你想自己做數學，這不是非常困難，下面是一個用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) 

Answer 3

我寫了一個腳本，將層FX複製到剪貼板作爲CSS字符串以及標準的FX層複製。這有點粗糙，但它有效。 http://github.com/dfcreative/Photoshopr

Answer 4

我使用了一個名爲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) 
} 

Answer 5

這裏是一個很好的工具，它無需編碼並創建Photoshop的CSS框：http://www.layerstyles.org/