chuyển đổi photoshop thả bóng vào hộp CSS3 shadow

Question

Nếu tôi có một cái bóng photoshop thả với các cài đặt sau

Blend Mode - rgb (0,0,0)/ Opacity - 25%/ Angle - 135 độ/ cách 4px/ Spread - 0%/ Kích - 4px

Làm thế nào tôi có thể thiết lập CSS3 hộp bóng của tôi vì vậy nó đại diện thiết kế photoshop của tôi?

Answer 1

lớp CSS này là dành cho trình duyệt web khác nhau thu thập trong một quy tắc mà không minh bạch (được gọi hỗ trợ: 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'); 
} 

... và lớp CSS này có hỗ trợ minh bạch:

.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

Tôi đã viết một bài viết bao gồm conversion of Photoshop Drop Shadow properties into a CSS3 box-shadow. Nếu bạn đang sử dụng Sass/Compass, bạn có thể sử dụng photoshop-drop-shadow compass plugin. Nếu bạn muốn tự mình làm toán, nó không quá khó, dưới đây là một ví dụ đơn giản được viết bằng JavaScript. Hai phần khó khăn đang chuyển đổi góc thành X và Y bù đắp và chuyển đổi tỷ lệ phần trăm lây lan thành bán kính lan rộng.

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

Tôi đã viết kịch bản sao chép FX lớp vào khay nhớ tạm làm chuỗi CSS cùng với bản sao chuẩn của FX lớp. Đó là một chút thô, nhưng nó hoạt động. http://github.com/dfcreative/Photoshopr

Answer 4

Tôi đang sử dụng một công cụ gọi là psd để CSS3, bạn chỉ cần thêm giá trị từ photoshop và bạn đã hoàn tất sử dụng liên kết này 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

Đây là một công cụ tốt đẹp mà không cần mã hóa và tạo hộp css photoshop: http://www.layerstyles.org/