सीएसएस: छवि के चारों ओर सफेद चमक बनाएं

Question

मैं एक अज्ञात आकार की छवि की सीमा के रूप में एक सफेद चमक कैसे बना सकता हूं?

Answer 1

सरल CSS3 का उपयोग करें (IE <9 में समर्थित नहीं)

img
{
    box-shadow: 0px 0px 5px #fff;
}

यह आपके दस्तावेज़ में प्रत्येक छवि के चारों ओर एक सफेद चमक डालेगा, यह चुनने के लिए अधिक विशिष्ट चयनकर्ताओं का उपयोग करेगा कि आप किन छवियों को चमक के चारों ओर पसंद करेंगे। आप निश्चित रूप से रंग बदल सकते हैं :)

यदि आप उन उपयोगकर्ताओं के बारे में चिंतित हैं जिनके पास अपने ब्राउज़र के नवीनतम संस्करण नहीं हैं, तो इसका उपयोग करें:

img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}

IE के लिए आप एक चमक फ़िल्टर का उपयोग कर सकते हैं (यह निश्चित नहीं है कि कौन से ब्राउज़र इसका समर्थन करते हैं)

img
{
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

सेटिंग्स के साथ खेलने के लिए आप क्या सूट :)

Comments

मुझे लगता है कि यह केवल IE 9+ का समर्थन करता है, बस जोड़ें: <meta http-equiv="X-UA-Compatible" content="IE=9" />IE9 और IE10 में पेज को IE9 के रूप में रेंडर करने के लिए

— क्रिश्चियन मार्क

ध्यान दें कि फ़िल्टर में कई तत्वों में अप्रत्याशित व्यवहार है। इसे एक फ़ील्डसेट पर लागू करें और चकित हो जाएं। साथ ही, यह बाल तत्वों में लीक हो सकता है। और यह पृष्ठ के लिए खतरनाक पीली पट्टी के साथ एक ActiveX चेतावनी दिखाएगा। बस इससे बचें। IE के लिए एक फ्लैट प्रकाश ग्रे छाया जोड़ें और के साथ किया जा सकता है।

— gcb

पारदर्शी छवियों के साथ काम नहीं करता है। एक गोल पिंग लोगो की तरह।

— संतोष कुमार

@SantoshKumar, नहीं, यह नहीं है, क्योंकि बॉक्स-छाया संभवतः यह नहीं जान सकता है कि एक png के गैर-पारदर्शी पिक्सेल कहाँ हैं। यह केवल HTML तत्वों को प्रभावित करता है, <img> तत्व को ही, सामग्री को नहीं।

— काइल

@ काइल ड्रॉप-शैडो हालांकि कर सकते हैं :)

— ब्रैंडिटो जूल 6'18

Answer 2

@ तमीर; आप इसे css3 संपत्ति के साथ करते हैं।

img{
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2;
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2;
box-shadow: 0px 0px 3px 5px #f2e1f2; 
}

फिडेल की जांच करें http://jsfiddle.net/XUC5q/1/ और यहां से उत्पन्न कर सकते हैं http://css3generator.com/

यदि आपको IE के पुराने संस्करणों में काम करने की आवश्यकता है, तो आप उन ब्राउज़रों में बॉक्स-शैडो का अनुकरण करने के लिए CSS3 PIE का उपयोग कर सकते हैं और filterजैसा कि काइल ने कहा था , आप उसका उपयोग कर सकते हैं

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')

आप यहाँ से अपना फ़िल्टर उत्पन्न कर सकते हैं http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Comments

अब आपको moz और webkit उपसर्गों की आवश्यकता नहीं है, उन ब्राउज़रों के नवीनतम संस्करण box-shadow

— Kyle

@ काइल; मुझे पता है लेकिन यह मोज़िला बीटा से पहले पिछले संस्करण पर काम नहीं कर रहा है।

— संदीप

@ केली - और यदि आप पुराने संस्करणों के उपयोगकर्ताओं का समर्थन करना चाहते हैं? (वहाँ अभी भी कुछ बाहर हैं)

— स्पडली

@ काइल; हो सकता है कि आपको अपना जवाब अपडेट करना पड़े क्योंकि बहुत सारे लोग ऐसे हैं जिन्होंने वहाँ मोज़िला नहीं अपडेट किया।

— संदीप

Answer 3

एक जादू की तरह काम करता है!

.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

वोइला! बस! जाहिर है कि यह काम नहीं करेगा, लेकिन कौन परवाह करता है ...

Comments

नीचा दिखाया गया; -webkit- फ़िल्टर एक सीएसएस संपत्ति नहीं है, और किसी भी मामले में केवल वेबकैट ब्राउज़र का समर्थन करेगा - आप गैर-उपसर्गित संस्करण को जोड़ना बेहतर होगा, और शायद -moz-, -ms- और -o- उपसर्ग, मोज़िला, माइक्रोसॉफ्ट या ओपेरा (ओपेरा 12 में अभी भी प्रचलन में है ...)

— एलिग टेलर टेलर

Upvoted। एक गैर-मानक संपत्ति होने के नाते यह बेकार नहीं है। ऐसे मामले हैं जिनमें आपको वेबकिट के अलावा कुछ भी समर्थन करने की आवश्यकता नहीं है। इस जवाब ने मेरी मदद की, और बॉक्स-छाया की तुलना में -webkit- फ़िल्टर प्रभाव मेरे मामले में अधिक उपयुक्त दिखता है।

— एंटोन जेब्रा

यह सबसे अच्छा उत्तर है, क्योंकि यह सामग्री को छोड़ देगा और कंटेनर को नहीं

— smedasn

Answer 4

निर्भर करता है कि आपके लक्षित ब्राउज़र क्या हैं। नए लोगों में यह उतना ही सरल है :

   -moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
        box-shadow: 0 0 5px #fff;

पुराने ब्राउज़रों के लिए आपको इस उदाहरण के आधार पर वर्कअराउंड को लागू करना होगा, लेकिन आपको संभवतः अतिरिक्त मार्क-अप की आवश्यकता होगी।

Answer 5

पार्टी के लिए देर से यहाँ; हालाँकि बस थोड़ा अतिरिक्त मज़ा जोड़ना चाहते थे ..

box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;

आप छवि में एक अच्छी लग रही गद्देदार दे देंगे। पैडिंग आपको एक नकली सफेद सीमा (या जो भी सीमा आपने निर्धारित की है) देगी। आरजीबीए आपको केवल विशेष रंग पर एक अपारदर्शिता करने की अनुमति देता है; 0,0,0 काला होना। आप आसानी से किसी भी अन्य RGB रंग का उपयोग कर सकते हैं।

आशा है कि यह किसी की मदद करता है!

Answer 6

आप CSS3 का उपयोग उस तरह का प्रभाव पैदा करने के लिए कर सकते हैं, लेकिन तब आप इसे केवल उन आधुनिक ब्राउज़रों में देखने जा रहे हैं, जो बॉक्स शैडो का समर्थन करते हैं, जब तक कि आप CSS3PIE जैसे पॉलीफ़िल का उपयोग नहीं करते हैं । इसलिए, उदाहरण के लिए, आप ऐसा कुछ कर सकते हैं: http://jsfiddle.net/cany2/