एक div के तीन किनारों पर सीएसएस बॉक्स-छाया?

Question

मैं एक div के तीन किनारों (शीर्ष तरफ को छोड़कर) पर बॉक्स-छाया रखना चाहता हूं। ऐसा कैसे किया जा सकता था?

Answer 1

यहां आपके लिए JS Fiddle है, यह केवल काम करने के लिए एक एकल div का उपयोग करता है।

#shadowBox { 
    background-color: #ddd; 
    margin: 0px auto; 
    padding: 10px; 
    width: 220px; 
    box-shadow: 0px 8px 10px gray, 
     -10px 8px 15px gray, 10px 8px 15px gray; 
} 

आप नीचे, नीचे बाईं ओर और नीचे दाईं ओर एक छाया सेट करते हैं। मुलायम छाया के साथ यह थोड़ा मुश्किल हो जाता है लेकिन यह करने योग्य है। मध्य छाया के धुंध त्रिज्या को कम करने के लिए इसे केवल अनुमान लगाने की आवश्यकता है, ताकि यह साइड छाया के साथ ओवरलैप होने पर निर्बाध और बहुत अंधेरा न लगे।

Answer 2

यहाँ @Vigrond

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15); 

Answer 3

ने सुझाव दिया कि आप एक ठोस पृष्ठभूमि रंग है, तो आप background-color और z-index का एक संयोजन का उपयोग करके ऐसा कर सकते हैं नकारात्मक Y मान का एक उदाहरण है। यह चाल box-shadow और उसके पिछले भाई की स्थिति के साथ तत्व देना है, फिर पिछले भाई को पृष्ठभूमि रंग दें और इसे z-index पर सेट करें ताकि यह box-shadow के साथ तत्व के शीर्ष पर खड़ा हो, जिससे इसकी शीर्ष छाया शामिल हो।

आप एक डेमो देख सकते हैं: http://codepen.io/thdoan/pen/vNvpKv

अगर कोई तत्काल पिछले भाई के साथ काम करने है, तो आप भी एक छद्म तत्व इस तरह के :before या :after के रूप में उपयोग कर सकते हैं: http://codepen.io/thdoan/pen/ojJEMj

Answer 4

आप देख रहे हैं

.shadow1 { 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.shadow2 { 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
} 
.shadow3 { 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
} 
.shadow4 { 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
} 
.shadow5 { 
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 
} 

स्रोत:: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

गूगल सामग्री डिजाइन छाया की तरह कुछ के लिए

Answer 5

हार्ड कोनों के साथ पारदर्शी छाया के लिए (यानी। कोई कलंक त्रिज्या) मैं इस प्रयोग किया है:

.shadow-no-top { 
    position: relative; 
    box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2); 
} 
.shadow-no-top:before { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: -5px; 
    right: -5px; 
    bottom: -5px; 
    background-color: rgba(0,0,0,.2); 
} 

यह बाएँ और दाएँ भागों के लिए एक छाया का उपयोग करता है और कहते हैं: नीचे छाया के रूप में छद्म सामग्री के बाद। यह ओवरलैप से बचाता है जो छाया को गहरा या गायब कोनों बनाता है।

हालांकि, इस तत्व को ठोस होने की पृष्ठभूमि की आवश्यकता होती है।