पारदर्शी पृष्ठभूमि पीएनजी छवि पर एक सीएसएस छाया बनाने के लिए संभव है?

Question

कोई भी जानता है कि पारदर्शी पृष्ठभूमि पीएनजी छवि पर अभी तक एक सीएसएस आधारित ड्रॉप छाया बनाने के लिए संभव है?

शायद CSS3, jquery या आखिरी सर्वर पक्ष के साथ?

मैं क्या हासिल करने के लिए कोशिश कर रहा हूँ के प्रभाव के बाद उदाहरण:

सुंदर यकीन है कि अगर यह संभव है यह पार ब्राउज़र लेकिन अगर यह अच्छी तरह से खराब हो लागू करने के लिए तैयार नहीं होगी?

आप इनपुट, खुले तकनीक चर्चा जोड़ने के लिए स्वतंत्र महसूस ..

Answer 1

यदि आप छवि को कैनवास संदर्भ में लोड करते हैं तो आप यह कर सकते हैं।

अच्छा स्वच्छ यहाँ स्रोत:

http://philip.html5.org/demos/canvas/shadows/various.html

Answer 2

सीएसएस पता नहीं क्या छवि के आकार है, इसलिए रूपरेखा निर्धारित नहीं कर सकता और यह करने के लिए एक छाया लागू नहीं कर सकते है।

आप जेड-इंडेक्स, दिशात्मक ऑफसेट और कुछ अस्पष्टता का उपयोग करके छवि की एक काला प्रतिलिपि बना सकते हैं और इसे पीछे रख सकते हैं। यह इसके बारे में।

Answer 3

नहीं, यह संभव नहीं है। यहां तक ​​कि जब पृष्ठभूमि पारदर्शी होती है, तब भी आपकी छवि एक आयत है और छाया चारों ओर सीमा पर लागू की जाएगी।

आप क्या कर सकते हैं पीएनजी में सीधे ग्राफिकल छाया डालना। यह पारदर्शी पृष्ठभूमि पर बहुत अच्छा काम करता है।

Answer 4

मुझे पता है कि जीडी PHP लाइब्रेरी का उपयोग करना संभव है। इस ट्यूटोरियल की जाँच करें:

http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/

मुझे लगता है कि होता है कि एक PHP समाधान का उपयोग किया जाएगा ब्राउज़रों में सबसे संगत।

Answer 5

हाँ! CSS3 में एक पारदर्शी .png पर छाया करना संभव है! मुझे इसे एक परियोजना में जरूरी था जो आईई 10 में जंक की तरह दिख रहा था। बॉक्स-छाया का उपयोग करने के बजाय, फ़िल्टर का उपयोग करें: ड्रॉप-छाया()। वाक्यविन्यास काफी समान है। link

अंतिम समाधान यह है (जैसा भी मामला लिंक टूट जाता है में):

.filter-drop-shadow { 
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
}