गोल छवि (सीएसएस)

Question

के लिए छाया कैसे सेट करें मैं सीएसएस में छाया के लिए नया हूं, हम गोल छवि (मेरा मतलब है कि एक सर्कल छवि के लिए) छाया के लिए छाया सेट कर सकते हैं।

यदि यह संभव है, तो कृपया मुझे इसके लिए सीएसएस में एक कोड दें। पहले से धन्यवाद

Answer 1

CSS3 बॉक्स छाया तत्व की सामग्री नहीं, तत्व के लिए छाया लागू करती है। दूसरे शब्दों में यदि आपके पास एक छवि है (जो आयताकार है) लेकिन छवि स्वयं एक सर्कल का है, छाया आयताकार छवि तत्व पर लागू की जाएगी, न कि छवि का वास्तविक विषय।

अद्यतन:

बेशक

, आप हमेशा कैनवास तत्व छाया के साथ खेलने के लिए उपयोग कर सकते हैं। यहां एक सर्कल ड्राइंग और सर्कल लोड करने दोनों के jsFiddle example हैं, फिर दोनों के लिए छाया प्रभाव लागू करना।

Answer 2

वहाँ के लिए महान ट्यूटोरियल उदाहरण के साथ here

भी बॉक्स-छाया है,

border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 

बस कोने गोलाई आप चाहते हैं पिक्स समायोजित पार ब्राउज़र में कोनों गोलाई के लिए सरल css3 , या em एस का उपयोग करें

Answer 3

सीएसएस आपको छवियों के आकार में छाया जोड़ने की अनुमति नहीं देता है। सीएसएस में कोई सुराग नहीं है कि छवि कैसा दिखता है।

Answer 4

सीएसएस 3 में एक संपत्ति है जो आप वही करते हैं जो आप चाहते हैं। लेकिन, ज़ाहिर है, यह अभी तक सभी ब्राउज़रों द्वारा लागू नहीं है (आईई ...) वहाँ एक नज़र: http://css-tricks.com/snippets/css/css-box-shadow/

Answer 5

यह असंभव के बाद से सीएसएस (जैसे व्याख्या पारदर्शिता) छवि सामग्री के आकार पता नहीं है। आप CSS3 के साथ एक सर्कल बना सकते हैं और एक छाया दे सकते हैं, see this jsFiddle।

div { 
    background: red; 
    height: 100px; 
    width: 100px; 
    border-radius: 50px; 
    margin: 20px; 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
} 

Answer 6

यह बात मेरे लिए काम करती है। मैं छवि 32x32 के चारों ओर एक गोलाकार छाया चाहता था।

<a class="media-links" href=""> 
    <img class="media-imgs" src=""> 
</a> 

सीएसएस इस तरह है।

 img.media-imgs 
     { 
      -webkit-border-radius: 20px; 
     } 

     img.media-imgs:hover 
     { 
       -webkit-animation-name: greenPulse; 
       -webkit-animation-duration: 2s; 
       -webkit-animation-iteration-count: 1; 
       -webkit-box-shadow: 0 0 18px #91bd09; 
     } 

Answer 7

हां, बस सीमा-त्रिज्या जोड़ें: बॉक्स छवि छाया के साथ आपकी छवि में 50% :) मेरे आईएमजी टैग में काम करता है।

Answer 8

छाया सीएसएस में आकार से स्वतंत्र हैं, आप सर्कल बनाने के बाद सर्कल के लिए छाया संपत्ति का उपयोग कर सकते हैं। आप उस के लिए निम्नलिखित कोड का उपयोग कर सकते हैं, यह ठीक काम करना चाहिए

.circle{ 
    width:150px;height:150px; 
    border: solid 1px #555; 
    background-color: #eed; 
    box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -moz-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -o-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    border-radius:100px; 
}