मैं सिंटैक्स का उपयोग करके सीएसएस में box-shadow शैली के साथ खेल रहा हूं

box-shadow : offset-x | offset-y | blur-radius | spread-radius | color

विशेष रूप से offset-x=offset-y=0 के साथ। ऐसा करते समय मुझे चारों तरफ एक छाया मिलती है। मैं यह नहीं चाहता।

मैं इसे बॉक्स के केवल एक या दो तरफ छाया डालना चाहता हूं, क्या यह संभव है?

मान लें कि बॉक्स एक गैर-वर्ग आकार के चारों ओर है, बॉक्स में एक पारदर्शी पृष्ठभूमि है जिसके अंदर png या svg है जो एक गैर-आयताकार आकार को दर्शाता है। यह बॉक्स एक वेब-पेज पर ओवरले किया गया है। क्या पारदर्शी डिव-ब्लॉक के बजाय box-shadow को उस डिव-ब्लॉक के अंदर की सामग्री के समोच्च का पालन करना संभव है?

मेरा मतलब है, यह सिर्फ सादा बेवकूफ दिखता है:

छवि

संपादित करें: अनुरोध के अनुसार कुछ उदाहरण कोड:

<!DOCTYPE html>
<html>
<head>
<style> 

#example1 {
    background-color: transparent;
    padding: 10px;
    box-shadow: 6px 6px 21px -21px #CCC;
}
#example2 {
    background-color: transparent;
    padding: 10px;
    box-shadow: 0px 0px 21px #CCC;
}
</style>
</head>
<body>

<h2>box-shadow: 6px 6px 21px blur radius light-gray on lower right side:</h2>
<div id="example1">
<p>A light shadow on only two sides.</p>
</div>

<h2>box-shadow: 0px 0px 21px blur radius light-gray centered:</h2>
<div id="example2">
<p>This is what I want it to look like; a <u>centered</u> shadow but only cast on the right and the bottom, not on all four sides of the div block which has a <u>transparent</u> background.</p>
</div>

</body>
</html>
0
Profitus Maximus 11 जुलाई 2018, 10:59
अगर आप मदद चाहते हैं तो आपको अपना कोड जोड़ना होगा
 – 
לבני מלכה
11 जुलाई 2018, 11:17

6 जवाब

आप खोज रहे हैं drop-shadow< /ए> फिल्टर

.box {
 margin:50px;
 width:200px;
 height:200px;
 background:linear-gradient(to bottom right,red 50%, transparent 0);
 filter:drop-shadow(10px 0 5px #000);
}
<div class="box">
</div>
0
Temani Afif 11 जुलाई 2018, 11:19
दिलचस्प है, मैं रैखिक ग्रेडियेंट के साथ प्रयोग करूंगा, शायद मैं उन्हें वह कर सकता हूं जो मैं चाहता हूं। शायद कोई इनलाइन एसवीजी का उपयोग करके कस्टम छाया आकार प्रस्तुत कर सकता है जैसा कि एचटीएमएल 5 में परिभाषित किया गया है।
 – 
Profitus Maximus
11 जुलाई 2018, 11:46
एकमात्र चुनौती जो बनी हुई है वह है कि एसवीजी और अन्य तत्वों के रूप में डिव ब्लॉक के बाहर उस छाया प्रभाव को प्राप्त करना आम तौर पर डिव ब्लॉक के अंदर रहता है।
 – 
Profitus Maximus
11 जुलाई 2018, 11:55
क्या आपके पास कोई स्क्रीन है कि आप इसे कैसे बाहर करना चाहते हैं?
 – 
Temani Afif
11 जुलाई 2018, 11:57
मेरा प्रश्न थोड़ा सामान्य था इसलिए मेरे पास अभी दिखाने के लिए कोई स्क्रीन नहीं है। मैं भविष्य के बारे में अधिक सोच रहा था जब मुझे और अधिक उन्नत चीजें करने को मिलीं। अभी के लिए, मैं इसके नीचे आयताकार आकृतियों के एक गुच्छा को मिलाकर एक कस्टम आकार को एक उचित छाया बनाने की कोशिश कर रहा हूं।
 – 
Profitus Maximus
11 जुलाई 2018, 12:12
मैं बस इसे और अधिक उचित दिखाना चाहता हूं क्योंकि अभी मेरे पास नीचे बक्से का एक गुच्छा है और फ्रेम की सामग्री लोड होने से पहले वे दिखाई देते हैं जो बदसूरत दिखता है। अगर कम से कम मैं इन बक्सों से अत्यधिक छाया को हटाने का प्रबंधन करता हूं, तो यह उतना बदसूरत नहीं लगेगा।
 – 
Profitus Maximus
11 जुलाई 2018, 12:12

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

<!DOCTYPE html>
<html>
<head>
<style> 
.triangle-container{
        transform: rotate(-90deg); 
  }
   .triangle{
    fill: white;
    stroke: white;
    stroke-width: 1;
    filter: drop-shadow(-10px 5px 5px rgba(204,204,204,0.1));
    }
</style>
</head>
<body>
<div class="triangle-container">
	  <svg height="500" width="500">
		    <polygon points="250,100 100,400 400,400" class="triangle" />
		    Sorry, your browser does not support inline SVG.
	  </svg>
</div>
</body>
</html>
0
NayDwe 11 जुलाई 2018, 12:30

बॉक्स के केवल एक या दो पक्षों की छाया प्राप्त करने के लिए आपको नीचे दी गई box-shadow संपत्तियों को संशोधित करने की आवश्यकता है।

.box-shadow
{
  width: 150px;
  height: 150px;
  border: 1px solid #888;
  -webkit-box-shadow: 5px 5px 5px -2px #888;
          box-shadow: 5px 5px 5px -2px #888;
}
<div class="box-shadow"></div>
0
Rohit Verma 11 जुलाई 2018, 12:32
अच्छा लग रहा है, लेकिन कुछ और सूक्ष्म और पारदर्शी पृष्ठभूमि वाले बॉक्स के साथ प्रयास करें। इसे टेक्स्ट वाले पेज के ऊपर मढ़ा जाना चाहिए। मुझे केवल नीचे और दाहिनी ओर छाया चाहिए और शीर्ष पर कुछ भी नहीं, न ही बाईं ओर। उस छाया का नामोनिशान भी नहीं।
 – 
Profitus Maximus
11 जुलाई 2018, 11:36

आप ऐसा कर सकते हैं:

box-shadow: 10px 0 10px #333;
-1
Abdi 11 जुलाई 2018, 11:03

हां यह संभव है, कृपया यहां देखें https://css-tricks .com/almanac/properties/b/box-shadow/, आपको ऐसे उदाहरण मिलेंगे जो आपकी मदद करेंगे।

-2
Kristijan Kanalaš 11 जुलाई 2018, 11:04
लिंक में जानकारी आशाजनक लग रही थी, लेकिन जब मैंने उदाहरण के लिए कोशिश की, "बॉक्स-छाया: 6px 6px 21px -21px #CCC;", मुझे कोई छाया नहीं मिलती है।
 – 
Profitus Maximus
11 जुलाई 2018, 11:24
कृपया इस कोड को चलाएँ और स्वयं देखें jsfiddle.net/g3x91Ljr/3
 – 
Kristijan Kanalaš
11 जुलाई 2018, 11:33
आप इसे आजमा सकते हैं: jsfiddle.net/g3x91Ljr/8 मैं चाहता हूं कि नीचे की तरफ उच्च त्रिज्या धुंधली छाया हो और दाहिनी ओर लेकिन ऊपर और न ही बाईं ओर कुछ भी नहीं। Div ब्लॉक में पारदर्शी पृष्ठभूमि है।
 – 
Profitus Maximus
11 जुलाई 2018, 11:41
क्या यह काम करता है jsfiddle.net/g3x91Ljr/13 ? पहले दो मानों को 6px, 6px में बदलें यदि आप चाहते हैं कि वर्ग में नीचे और दाईं ओर छाया हो।
 – 
Kristijan Kanalaš
11 जुलाई 2018, 11:46
यह बेहतर दिखता है, लेकिन मैं छाया को केंद्रित करना पसंद करूंगा और ऑफसेट नहीं करूंगा। 6px 6px में बदलने से यह बाईं ओर और ऊपर की तरफ थोड़ा सा छाया देता है।
 – 
Profitus Maximus
11 जुलाई 2018, 11:51