CSS में PNG इमेज के लिए ड्रॉप शैड

Question

मेरी एक पीएनजी इमेज है, जिसमें फ्री फॉर्म (नॉन स्क्वायर) है।

मुझे इस छवि पर ड्रॉप-शैडो इफ़ेक्ट लागू करने की आवश्यकता है।

मानक दृष्टिकोण ...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... इस छवि के लिए छाया प्रदर्शित करता है, जैसे यह एक वर्ग है। इसलिए, मुझे अपनी छवि और चौकोर छाया दिखाई देता है, जो छवि में प्रदर्शित ऑब्जेक्ट के रूप का अनुसरण नहीं करता है।

क्या इसे ठीक से करने का कोई तरीका है?

Answer 1

पार्टी के लिए थोड़ा देर से, लेकिन हाँ, ड्रॉपडाउन-फिल्टर (वेबकिट के लिए), एसवीजी (फ़ायरफ़ॉक्स के लिए) और आईई के लिए डीएक्स फ़िल्टर के संयोजन का उपयोग करके अल्फा मास्क वाले पीएनजी के चारों ओर "सही" गतिशील ड्रॉप छाया बनाना पूरी तरह से संभव है।

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

सही ड्रॉप-शैडो और बॉक्स-शैडो के बीच कुछ तुलना और तकनीक पर एक लेख जो मैंने अभी वर्णित किया है ।

आशा है कि ये आपकी मदद करेगा!

Comments

पार्टी के लिए और भी देर से, लेकिन क्रॉस-प्लेटफॉर्म सीएसएस filterसंपत्ति के लिए +1 ... हालांकि, मुझे नहीं लगता कि HTML एसवीजी टैग की आवश्यकता है, अल्फा चैनल के साथ कोई भी पीएनजी चाल चलेगा

— गिलोय

डडली मंजिला सही है। एसवीजी के बिना, फ़ायरफ़ॉक्स में छाया दिखाई नहीं देती है। @AntonAL इस उत्तर को स्वीकार कर सकता है।

— जाव्समो

DX फिल्टर अब IE पर काम नहीं करता है ... क्या IE के लिए कोई नया समाधान है? msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

— tb11

इन दिनों फ़ायरफ़ॉक्स समर्थन करता है filter: drop-shadow(x y blur color); इसलिए SVG ट्रिक अब आवश्यक नहीं होनी चाहिए।

— Raptor007

क्या हम सभी इस बात से सहमत नहीं हैं कि IE को वर्षों पहले कचरे के ढेर में फेंक दिया जाना चाहिए था? एज थोड़ा बेहतर है, लेकिन पवित्र गाय एम $ क्या आपने आईई के साथ सॉफ़्टवेयर विकास को अंधेरे युग में वापस सेट किया है? क्या एक घृणा है।

— रयाननर्ड

Answer 2

हाँ, यह filter: dropShadow(x y blur? spread? color?)सीएसएस या इनलाइन में उपयोग करना संभव है :

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

Comments

कोई IE समर्थन ... :(

— CF

IE को समय के साथ मिलना चाहिए: पी

— ब्रायंट जैक्सन

-वेबकिट-फिल्टर अब आवश्यक नहीं है

— ब्रेट डोनाल्ड

2019: IE क्या है? : पी

— badReiko

Answer 3

यदि आपके पास> 100 छवियां हैं, जिनके लिए आप ड्रॉप शैडो चाहते हैं, तो मैं कमांड-लाइन प्रोग्राम ImageMagick का उपयोग करने का सुझाव दूंगा । इसके साथ, आप केवल एक कमांड टाइप करके 100 इमेज के लिए शेप्ड ड्रॉप शैडो लगा सकते हैं! उदाहरण के लिए:

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

उपरोक्त (शेल) कमांड वर्तमान निर्देशिका में प्रत्येक .png फ़ाइल लेता है, एक ड्रॉप शैडो को लागू करता है, और परिणाम को छाया / निर्देशिका में सहेजता है। यदि आपको ड्रॉप शैडो उत्पन्न नहीं पसंद है, तो आप मापदंडों को बहुत कम कर सकते हैं; छाया के लिए प्रलेखन को देखकर शुरू करें , और सामान्य उपयोग के निर्देशों में बहुत सी चीजों के शांत उदाहरण हैं जो छवियों के लिए किए जा सकते हैं।

यदि आप भविष्य में ड्रॉप शैडो के बारे में अपना मन बदलते हैं - यह विभिन्न मापदंडों के साथ नई छवियां उत्पन्न करने के लिए सिर्फ एक कमांड है :-)

Comments

जबकि यह एक समाधान है, यह सवाल का जवाब नहीं देता है!

— leo

पूछने वाला ब्राउज़र को छाया प्रदान करने का प्रयास कर रहा है, सर्वर पर स्क्रिप्ट निष्पादित नहीं करता है जो छाया बना सकता है। यह उपयोगी जानकारी है लेकिन समान समस्या स्थान नहीं है।

— SG1

यह काम करने के लिए नोटों के जोड़े: 1. आपको इस कमांड को चलाने से पहले छाया निर्देशिका बनाने की आवश्यकता है (जैसे कि साथ mkdir shadow) 2. $iउद्धृत किया जाना चाहिए (जैसा कि "$i") या यह तब तक चोक होगा जब किसी छवि के फ़ाइल नाम में स्थान हो:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i".png; done

— एंड्रयू मासेरेट

3. परिणामी फाइलों का नाम दिया जाएगा filename.png.png। यहाँ एक पूरी तरह से काम कर रहा संस्करण है:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i"; done

— एंड्रयू मासेरेट

@AndrewMacheret: अच्छे बिंदु - हालांकि ध्यान दें कि इसका मतलब पूरी तरह से काम करने वाले कार्यक्रम के बजाय क्या किया जा सकता है, इसका एक उदाहरण है! मैंने डबल .Png प्रत्यय और उद्धरण तय किए हैं; निर्देशिका बात मुझे लगता है कि बस रास्ते में मिल जाएगा ...

— psmears

Answer 4

img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

मेरे लिए यह बहुत अच्छा रहा। IE में एक बात पर ध्यान देने के लिए आपको पूर्ण रंग (# 222222) तीन वर्णों की आवश्यकता नहीं है।

Answer 5

जैसा कि डुडले ने अपने उत्तर में उल्लेख किया है यह वेबकिट के लिए ड्रॉप-शैडो सीएसएस फिल्टर, फ़ायरफ़ॉक्स के लिए एसवीजी और इंटरनेट एक्सप्लोरर 9- के लिए डायरेक्टएक्स फ़िल्टर के साथ संभव है।

अतिरिक्त अनुरोध को समाप्त करते हुए, एसवीजी को इनलाइन करने के लिए एक कदम आगे है:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Comments

यह अच्छी तरह से काम करता है .. अगर मैं HTML टैग के अंदर एसवीजी को परिभाषित करता हूं तो बेहतर है। (फ़ायरफ़ॉक्स)

— ओकी एरी रिनाल्डी

Answer 6

यदि यह एक ब्लॉक है, तो आप वर्ग में त्रिज्या के साथ सीमा जोड़ें। क्योंकि डिफ़ॉल्ट छाया ब्लॉक बॉर्डर पर लागू होगी, भले ही आपकी छवि गोल कोने में हो।

border-radius: 4px;

अपनी छवि के कोने के अनुसार इसकी सीमा त्रिज्या बदलें। उममीद है कि इससे मदद मिलेगी।

Answer 7

बस इसे जोड़ें:

-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff); 

उदाहरण:

<img class="home-tab-item-img" src="img/search.png"> 

.home-tab-item-img{
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
     filter: drop-shadow(5px 5px 5px #fff); 
}

Answer 8

यहाँ इसके लिए तैयार होवर हॉवर एनीमेशन कोड स्निपेट है:

http://codepen.io/widhi_allan/pen/ltaCq

-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));

Comments

वेबकिट के अलावा?

— mmm

Answer 9

जब मैंने इसे मूल रूप से पोस्ट किया तो यह संभव नहीं था इसलिए यह समाधान है। अब मैं केवल अन्य उत्तरों का उपयोग करने का सुझाव देता हूं।

छवि की रूपरेखा प्राप्त करने का कोई तरीका नहीं है, लेकिन आप इसे केंद्र में छवि के पीछे एक div के साथ नकली कर सकते हैं।

अगर मेरी चाल काम नहीं करती है, तो आपको छवि को काटना होगा और छोटी छवियों में से हर एक के लिए करना होगा। (जितनी अधिक छवियां उतनी ही सटीक दिखेंगी छाया) लेकिन अधिकांश छवियों के लिए यह ठीक एक आईएमजी के साथ ठीक लगती है।

तुम क्या करने की जरूरत है अपने img के चारों ओर एक रैप div डाल की तरह है

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

फिर आप एक खाली डिवाइडर को लपेटें (यह छाया के रूप में काम करेगा)

<div id="imgWrap">
    <div id="shadow"> </div>
    <img id="img" scr="imgLocation">
</div>

और फिर आपको सीएम के पीछे छाया को सीएसएस के साथ प्रकट करना होगा:

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

अब imgWrap को मूल img की स्थिति में लाएँ ... img की छाया को केंद्र में रखने के लिए आप बॉक्स-शैडो के पहले दो मानों के साथ गड़बड़ कर सकते हैं जिससे वे ऋणात्मक हो सकते हैं .... या आप img और छाया div को बिल्कुल अलग कर सकते हैं img शीर्ष और बाएँ मान बनाना = 0 और छाया div मान = क्रमशः img चौड़ाई और ऊँचाई का आधा।

यदि यह भयावह दिखता है, तो अपने img को काटें और पुनः प्रयास करें।

(यदि आप केवल आउटलाइन पर img के पीछे की छाया नहीं चाहते हैं, तो आपको अपना img अपारदर्शी बनाने की आवश्यकता है और ऐसा कार्य करना चाहिए जैसे कि यह पारदर्शी था जो कि कठिन नहीं है और आप टिप्पणी कर सकते हैं और मैं बाद में समझाऊंगा)

Comments

जब मैंने उत्तर दिया कि यह संभव नहीं है तो मुझे लगता है कि अब यह है। भविष्य यहाँ है!

— Xitcod13

Answer 10

मेरे मामले में यह आधुनिक मोबाइल ब्राउज़रों पर काम करना था, जिसमें विभिन्न आकारों और पारदर्शिता में पीएनजी छवि थी। मैंने इमेज के डुप्लिकेट का उपयोग करके ड्रॉप शैडो बनाया। इसका मतलब है कि मेरे पास imgएक ही छवि के दो तत्व हैं, एक दूसरे के ऊपर (उपयोग करते हुए position: absolute), और एक के पीछे निम्नलिखित नियम हैं:

.image-shadow {
  filter: blur(10px) brightness(-100);
  -webkit-filter: blur(10px) brightness(-100);
  opacity: .5;
}

इसमें नीचे की छवि को काला करने के लिए चमक फ़िल्टर शामिल है, और धुंधली प्रभाव ड्रॉप छाया आमतौर पर डालने के लिए एक धब्बा फ़िल्टर होता है। इसे नरम करने के लिए 50% की अपारदर्शिता लागू की जाती है।

यह क्रॉस ब्राउज़र का उपयोग करके mozऔर msझंडे लगाए जा सकते हैं ।

उदाहरण: https://jsfiddle.net/5mLssm7o/

Answer 11

एक प्रस्तावित विशेषता है जिसका उपयोग आप मनमाने ढंग से ड्रॉप शैडो के लिए कर सकते हैं। आप इसे यहाँ देख सकते हैं, लियो वेरौ के सौजन्य से:

http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom

हालांकि ब्राउज़र समर्थन न्यूनतम है।

Answer 12

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

Comments

जवाब के लिए धन्यवाद। लेकिन, संपादक में छवि जोड़ने से भविष्य में समस्याएं होंगी, जब मेरे पास> 100 छवियां होंगी और छाया को थोड़ा मोड़ना चाहिए। टी वह मेरी समस्या का सबसे अच्छा समाधान है - jQuery के साथ सवाल में प्रत्येक छवि के नीचे अतिरिक्त छाया छवि को जोड़ना है।

— एंटोनियल जूल

Answer 13

एक चाल जिसका मैं अक्सर उपयोग करता हूं जब मुझे बस "थोड़ी" छाया की आवश्यकता होती है (पढ़ें: समोच्च को सुपर-सटीक नहीं होना चाहिए) छवि के नीचे 100% -बैक-टू -100% -transparent भरने के साथ एक डीआईवाई दे रहा है। DIV के लिए CSS कुछ इस तरह दिखता है:

.shadow320x320{    
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

यह 320x320 DIV पर एक गोलाकार काला फीका-आउट 'डॉट' बनाएगा। यदि आप DIV की ऊँचाई या चौड़ाई को मापते हैं तो आपको एक समान अंडाकार मिलता है। बोतलों या अन्य सिलेंडर जैसी आकृतियों के तहत छाया बनाने के लिए बहुत अच्छा है।

यहां सीएसएस ग्रेडिएंट बनाने के लिए एक पूर्ण अविश्वसनीय, सुपर-उत्कृष्ट उपकरण है:

http://www.colorzilla.com/gradient-editor/

ps: जब आप इसका उपयोग करते हैं तो एक शिष्टाचार विज्ञापन पर क्लिक करें। (और, नहीं, मैं इसके साथ संबद्ध नहीं हूं। लेकिन शिष्टाचार क्लिक करना एक आदत बन जाना चाहिए, विशेष रूप से उपकरण के लिए जो आप अक्सर उपयोग करते हैं ... बस Sayin ... क्योंकि हम सभी नेट पर काम कर रहे हैं ... )

Comments

मैं इसे बहुत अच्छा देख सकता था जब थोड़ा संशोधित किया गया

— BeachInCalifornia.com

"सौजन्य विज्ञापन-क्लिक"? सच में, विज्ञापनदाताओं को 'नेट' के लिए अच्छी बात कैसे सूझ रही है? हम में से कई हैं खुद को विज्ञापनदाताओं के, या उनके द्वारा भुगतान कर रहे हैं उत्पादों आप कभी नहीं खरीद करने जा रहे हैं करने के लिए एक बहुत अप्रिय बात है के लिए विज्ञापनों के लिए विज्ञापनदाताओं के लिए शुल्क ट्रिगर तो। यदि आप किसी विज्ञापन में रुचि रखते हैं, तो इसे हर तरह से क्लिक करें, लेकिन ऐसा न करें!

— एलेस्टेयर

ओह, अपनी नैतिक ऊँची जमीन, एलेस्टेयर से दूर हो जाओ। वास्तविक दुनिया कुछ अलग दिखती है। "विज्ञापनदाताओं को रोकना"? वास्तव में? LOL - मुझे एक ब्रेक दो, यार। मैं लगभग 30 वर्षों से विज्ञापन और विपणन में हूँ। अजीब शिष्टाचार क्लिक करने के लिए आपके द्वारा मुफ़्त में उपयोग की जाने वाली साइटों का समर्थन करने के अलावा अन्य कोई प्रभाव नहीं है। यदि आप पुरस्कारों की मुद्रास्फीति आदि के बारे में चिंतित हैं, तो पूरे उद्योग में तेजी से एकाधिकार वाले रुझानों के बारे में चिंता करें। यह विचित्र विज्ञापन पुरस्कार है, न कि विचित्र शिष्टाचार क्लिक।

— 1

यह एफएफ और आईई पर भयानक दिखता है

— बैरीपिकर

Answer 14

आप इसे सभी ब्राउज़रों में मज़बूती से नहीं कर सकते। Microsoft अब IE10 + के रूप में DX फिल्टर का समर्थन नहीं करता है, इसलिए यहां कोई भी समाधान पूरी तरह से काम नहीं करता है:

https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

एकमात्र संपत्ति जो सभी ब्राउज़रों में मज़बूती से काम करती है box-shadow , और यह सिर्फ सीमा को आपके तत्व पर रखती है (जैसे एक div), जिसके परिणामस्वरूप एक चौकोर सीमा होती है:

बॉक्स-छाया: क्षैतिजऑफसेट वर्टिकलऑफ़सेट ब्लरडिस्टेंस फैलता हैडिस्टेंस रंग इनसेट;

जैसे

box-shadow: -2px 6px 12px 6px #CCCED0;

यदि आपके पास एक ऐसी छवि है जो 'वर्गाकार' है, लेकिन समान गोल कोनों के साथ, ड्रॉप शैडो के साथ काम करता है border-radius , , तो आप हमेशा अपनी छवि के गोल कोनों को अपने div में अनुकरण कर सकते हैं।

यहाँ के लिए Microsoft दस्तावेज़ है box-shadow:

https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx

Comments

मैं सीधे-सीधे जवाब की सराहना करता हूं। ऊपर दिए गए उदाहरणों में से कोई भी मेरे लिए काम नहीं करता है।

— बैरीपिकर

Answer 15

शायद आप इसकी तलाश में हैं। http://lineandpixel.com/blog/png-shadow

img { png-shadow: 5px 5px 5px #222; }

Comments

यह डुडले स्टोरी के उत्तर का एक बुरा संस्करण है

— चार्ल्स गुडविन