परिवर्तित फ़ोटोशॉप ड्रॉप छाया शैडो

Question

अगर मैं एक फ़ोटोशॉप ड्रॉप छाया है निम्न सेटिंग के साथ

मिश्रण मोड - rgb (0,0,0)/ पारदर्शिता - 25%/ कोण - 135 डिग्री/ दूरी 4px/ फैले - 0%/ आकार - 4px

मैं अपने CSS3 बॉक्स छाया सेट कर सकते हैं, तो यह मेरी फ़ोटोशॉप डिजाइन का प्रतिनिधित्व करता है?

Answer 1

यह CSS वर्ग पारदर्शिता के बिना एक नियम में एकत्र विभिन्न वेब ब्राउज़र के लिए है (ज्ञात समर्थन: Firefox 3.5+, क्रोम 5 +, सफारी 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); 

} 

Answer 2

मैं conversion of Photoshop Drop Shadow properties into a CSS3 box-shadow को कवर एक लेख लिखा था। यदि आप सास/कम्पास का उपयोग कर रहे हैं तो आप photoshop-drop-shadow compass plugin का उपयोग कर सकते हैं। यदि आप स्वयं गणित करना चाहते हैं, तो यह बहुत मुश्किल नहीं है, नीचे जावास्क्रिप्ट में लिखा गया एक साधारण उदाहरण है। दो मुश्किल भाग कोण को एक्स और वाई ऑफसेट में परिवर्तित कर रहे हैं और फैलाव प्रतिशत को फैल-त्रिज्या में परिवर्तित कर रहे हैं।

// 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 के मानक नकल के साथ एक सीएसएस स्ट्रिंग के रूप में क्लिपबोर्ड एक स्क्रिप्ट है कि प्रतियां परत FX लिखा था। यह थोड़ा कच्चा है, लेकिन यह काम करता है। http://github.com/dfcreative/Photoshopr

Answer 4

मैं एक उपकरण PSD कहा जाता है का उपयोग कर रहा CSS3 के लिए, आप बस से फ़ोटोशॉप मान जोड़ने के लिए की जरूरत है और आप इस लिंक का उपयोग 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

यहाँ एक अच्छा साधन है जो कोई कोडिंग की आवश्यकता है काम हो गया और फ़ोटोशॉप सीएसएस बक्से बनाता है: http://www.layerstyles.org/