केवल बाईं और दाईं ओर बॉक्स-छाया कैसे प्राप्त करें

Question

किसी भी हैक या छवियों के साथ केवल बाएं और दाएं (क्षैतिज) पक्षों पर बॉक्स-छाया प्राप्त करने का कोई तरीका। मै इस्तेमाल कर रहा हूँ:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

लेकिन यह चारों तरफ छाया देता है।

तत्वों के आसपास मेरी कोई सीमा नहीं है।

Answer 1

नोट: मेरा सुझाव है कि नीचे हामिश के जवाब की जाँच करें; यह यहाँ वर्णित समाधान में अपूर्ण "मास्किंग" को शामिल नहीं करता है।

---

आप कई बॉक्स-छाया के साथ पास हो सकते हैं; प्रत्येक पक्ष के लिए एक

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

संपादित करें

ऊपर और नीचे सामने के लिए 2 और बॉक्स-शैडो को जोड़ें, जो उस ब्लीड को बाहर निकालता है।

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

Comments

ठीक। धन्यवाद। धब्बा / त्रिज्या के कारण संभवत: ऊपर और नीचे थोड़ा सा शमाओ है, लेकिन मुझे लगता है कि इसके साथ रहना होगा।

— जावद

-1: छाया कोनों तक नहीं पहुंचती है, वे कुछ पिक्सेल पहले समाप्त कर देते हैं।

— फ्रांसिस्को कॉर्लेस मोरेल्स

मुझे विश्वास नहीं हो रहा है कि यह समाधान इतना उच्च दर्जा दिया गया है। यह ऊपर और नीचे (ठोस छाया को लागू करके) की ओर वस्तु का विस्तार करता है, इसलिए यह केवल तब उपयोगी होता है जब div एक समान पृष्ठभूमि पर होता है और इसके ऊपर और नीचे स्थान हो सकता है। बहुत सीमा और वास्तव में संदर्भ समाधान से बंधा हुआ है। हैमिश का समाधान बेहतर और सरल तरीका है।

— एजाज

एक बेहतर समाधान (2020) है। नीचे ल्यूक के जवाब को देखें: stackoverflow.com/a/62367058/760777

— RWC

Answer 2

मैं Deefour के समाधान में मौजूद छाया के ऊपर और नीचे के गोल से संतुष्ट नहीं था, इसलिए अपना खुद का बनाया।

inset box-shadow ऊपर और नीचे कट ऑफ के साथ एक अच्छा समान छाया बनाता है।

अपने तत्व के पक्षों पर इस प्रभाव का उपयोग करने के लिए, दो छद्म तत्व बनाएं :beforeऔर :afterमूल तत्व के किनारों पर बिल्कुल तैनात करें।

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

<div></div>

---

संपादित करें

आपके डिज़ाइन के आधार पर, आप उपयोग करने में सक्षम हो सकते हैं clip-path, जैसा कि @ ल्यूक के उत्तर में दिखाया गया है। हालाँकि, ध्यान दें कि कई मामलों में यह अभी भी ऊपर और नीचे की छाया में टैप करने का परिणाम है जैसा कि आप इस उदाहरण में देख सकते हैं:

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

<div></div>

Comments

बहुत चालाक। अपनी :afterजरूरतों पर top: 0भी ध्यान दें ।

— स्प्रिंटस्टार

मुझे display: inline-blockआपके उदाहरण के लिए छद्म वर्गों को काम करने के लिए जोड़ना था । सभी सभी में: अच्छा समाधान। +1

— मॉर्फियस

मुझे लगता है कि यह वास्तव में सही उत्तर होना चाहिए क्योंकि समाधान वास्तव में "बाएं और दाएं पक्षों पर बॉक्स-छाया" में परिणाम प्रदान करता है। उत्तर के रूप में चिह्नित उत्तर अभी भी ऊपर और नीचे छाया में परिणाम देता है।

— ल्यूक

मुझे लगता है कि यह स्वीकृत उत्तर होना चाहिए था। क्योंकि @Deefour द्वारा किया गया काम उस तरफ से अच्छा है जो ऊपर और नीचे के कोनों को खाली छोड़ देता है। दूसरी तरफ, यह पार्टिसुअर सॉल्यूशन एकदम सही है।

— ऋषभ शाह

@ हमीश हाँ, यही मैंने अब के लिए किया है :-) दया, इस दृष्टिकोण की एक आकर्षक विशेषता यह है कि यह (आमतौर पर) notकिसी भी सहायक <div>तत्वों की आवश्यकता होती है। :-)

— Frerich Raabe

Answer 3

यह कोशिश करो, यह मेरे लिए काम कर रहा है:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

Comments

जब दो divs है तो कोनों में बॉर्डर नहीं है।

— फ्रांसिस्को कॉर्लेस मोरेल्स

Answer 4

शास्त्रीय दृष्टिकोण: नकारात्मक प्रसार

सीएसएस बॉक्स-छाया 4 मापदंडों का उपयोग करता है: एच-छाया, वी-छाया, धुंधला, प्रसार:

box-shadow: 10px 0 8px -8px black;

V-छाया (verical छाया) 0 पर सेट है।

कलंक पैरामीटर ग्रेडिएंट प्रभाव कहते हैं, लेकिन यह भी लंबवत बॉर्डर (एक हम से छुटकारा पाने के लिए चाहते हैं) पर एक छोटे से छाया कहते हैं।

नेगेटिव फैल गया सभी सीमाओं पर छाया कम हो जाती है: आप इसके साथ खेल सकते हैं ताकि बहुत कम ऊर्ध्वाधर छाया को हटाने की कोशिश करें बिना किसी पक्ष को प्रभावित किए (यह छोटे छाया के लिए आसान है, 5 से 10px।)

यहाँ एक बेला उदाहरण है।

---

दूसरा दृष्टिकोण: पक्ष में पूर्ण विभाजन

अपने तत्व में एक खाली div जोड़ें, और इसे पूर्ण स्थिति के साथ शैली दें ताकि यह तत्व सामग्री को प्रभावित न करे।

यहाँ बेला बाएं छाया का एक उदाहरण के साथ।

<div id="container">
  <div class="shadow"></div>
</div>

.shadow{
    position:absolute;
    height: 100%;
    width: 4px;
    left:0px;
    top:0px;
    box-shadow: -4px 0 3px black;
}

---

तीसरा: मास्किंग छाया

यदि आपके पास एक निश्चित पृष्ठभूमि है, तो आप साइड-शैडो इफ़ेक्ट को दो मास्किंग शैडो के साथ छिपा सकते हैं, जिसमें बैकग्राउंड का कलर समान हो और ब्लर = 0, उदाहरण:

box-shadow: 
    0 -6px white,          // Top Masking Shadow
    0 6px white,           // Bottom Masking Shadow
    7px 0 4px -3px black,  // Left-shadow
    -7px 0 4px -3px black; // Right-shadow

मैंने काली छाया में फिर से एक नकारात्मक प्रसार (-3px) जोड़ा है, इसलिए यह कोनों से आगे नहीं बढ़ता है।

इधर की बेला ।

Answer 5

यह सभी ब्राउज़रों के लिए ठीक काम करता है:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;

Comments

यह थोड़ा सा भी काम नहीं करता है। हो सकता है कि प्रारूप बदल गया हो, लेकिन यह कहता है कि छाया को 7 पिक्सेल छोड़ दें, 0 पिक्सेल नीचे, बाहरी 10 पिक्सेल धुंधला करें और धुंधला 0 पिक्सेल बढ़ाएँ। इसे तोड़कर: बाईं ओर एक 17 पिक्सेल का धुंधला, ऊपर और नीचे का 10 पिक्सेल का धुंधला और दाईं ओर का 3 पिक्सेल का धुंधला। जो मुझे मिलता है।

— जॉन ktejik

Answer 6

डेमो

आपको कई का उपयोग करना चाहिए box-shadow;। इनसेट प्रॉपर्टी इसे अच्छा और अंदर दिखाती है

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}

Answer 7

एक और तरीका है: overflow-y:hiddenपैडिंग वाले पैरेंट पर।

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/

Answer 8

clip-pathअब (2020) सबसे अच्छा तरीका है जो मैंने तत्वों के विशिष्ट पक्षों पर बॉक्स-छाया प्राप्त करने के लिए पाया है, खासकर जब आवश्यक प्रभाव एक विशेष किनारों पर "क्लीन कट" छाया है , जैसे:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px -15px);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

... जैसा कि एक साज़िश का विरोध / कम / इस तरह की छाया को पतला करने के लिए:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

---

बस निम्नलिखित सीएसएस को प्रश्न में तत्व पर लागू करें:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

कहाँ पे:

• Apx ऊपरी किनारे के लिए छाया दृश्यता निर्धारित करता है
• Bpx सही
• Cpx तल
• Dpx बाएं

किसी भी किनारों के लिए 0 का मान दर्ज करें जहां छाया छिपी होनी चाहिए और एक नकारात्मक मूल्य (धब्बा त्रिज्या + प्रसार मूल्यों का संयुक्त परिणाम Xpx + Ypx) - किसी भी किनारों पर जहां छाया प्रदर्शित की जानी चाहिए।

Comments

यह सबसे अच्छा जवाब है। यह और भी सरल है। आप छाया को सीधे अपनी छवि पर लागू कर सकते हैं। एक जादू की तरह काम करता है। उदाहरण: img.shadowed {बॉक्स-छाया: 0 0 15px rgba (0,0,0,0.75); क्लिप-पथ: इनसेट (0px -15px 0px -15px); }

— आरडब्ल्यूसी

यहां तक ​​कि आपके उदाहरण में आप छाया में ऊपर और नीचे के कोने देख सकते हैं। फिर भी, कुछ उपयोग मामलों के लिए अच्छा हो सकता है।

— हमीश

@ हमीश, क्या आप इसका clip-pathउदाहरण देख रहे हैं ? 2 कोड स्निपेट हैं। पहला उपयोग करता है clip-pathऔर पूरी तरह से बिना किसी "टॉप और बॉटम कॉर्नर" में कर्विंग के साथ पूरी तरह से साफ-सुथरा होता है - आपके समाधान की तरह (लेकिन बहुत कम सीएसएस के साथ)। दूसरा कोड-स्निपेट केवल तुलना के लिए एक उदाहरण है - कई समाधानों के परिणामस्वरूप एक बॉक्सिंग-छाया होता है जो अक्सर वह नहीं होता है जिसे लोग प्राप्त करना चाहते हैं।

— ल्यूक

यदि आप एक मजबूत छाया चाहते हैं तो आप box-shadowसंपत्ति को कुछ इस तरह बदल सकते हैं 0 0 10px 5px rgba(0,0,0,0.75);। जोड़ा spreadमूल्य और कम नोट करें blur-radius।

— ल्यूक

@ काम करने के लिए मैंने अपना पहला स्निपेट प्रदर्शित किया है।

— ल्यूक

Answer 9

box-shadow: 0 5px 5px 0 #000;

यह मेरी तरफ से काम करता है। आशा है, यह आपकी मदद करता है।

Answer 10

नीस इनवेस्ट शो पर लेफ्ट और राइट साइड्स फॉर डिवेस, इमेजेज या इनरन कंटेंट

छवियों, या किसी अन्य सामग्री पर दाएं और बाएं पक्षों में एक अच्छी इनसेट छाया के लिए, इसे इस तरह से उपयोग करें

*** z- इंडेक्स: -1 इनसेट्स के साथ इमेज या इनर ऑब्जेक्ट दिखाते समय एक अच्छा ट्रिक करता है

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>

Answer 11

कुछ स्थितियों में आप छाया को दूसरे कंटेनर से छिपा सकते हैं। जैसे, यदि छाया के साथ DIV के ऊपर और नीचे एक DIV है, तो आप position: relative; z-index: 1;आसपास के DIV पर उपयोग कर सकते हैं ।

Answer 12

केवल क्षैतिज के लिए, आप इसके पैरेंट डिव पर अतिप्रवाह का उपयोग करके बॉक्स-शैडो को ट्रिक कर सकते हैं:

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.parent{
  overflow:hidden;
}
.box-shadow{
  box-shadow: box-shadow: 0 5px 5px 0 #000;
}

Answer 13

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

Answer 14

आप छाया को "मिटाने" के लिए 1 डिव के अंदर उपयोग कर सकते हैं:

.yourdiv{
    position:relative;
    width:400px;
    height:400px;
    left:10px;
    top:40px;
    background-color:white;
    box-shadow: 0px 0px 1px 0.5px #5F5F5F;

}
.erase{
    position:absolute;
    width:100%;
    top:50%;
    height:105%;
    transform:translate(0%,-50%);
    background-color:white;
}

आप "ऊंचाई:%;" के साथ खेल सकते हैं। और "चौड़ाई:%?" आप क्या छाया चाहते हैं मिटाने के लिए।

Answer 15

यहाँ जो भी कारण दिए गए उत्तर सिर्फ मेरे मामले में काम नहीं करेंगे। इसलिए, मैं रचनात्मक हो गया। यहाँ आप सभी के लिए एक नया समाधान प्रस्तुत किया linear-gradient()गया है box-shadow।

p {
  padding: 1rem;
  background-color: #b55;
  color: white;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}

<p>Testing</p>

हालाँकि, मैं इस बात पर बहस नहीं करना चाहता, लेकिन यह वास्तव में एक "बॉक्स" नहीं है जिसे आप (हम) बनाने की कोशिश कर रहे हैं, इसलिए मुझे लगता है कि यह कहा जा सकता है कि box-shadowइससे कोई मतलब नहीं था।

Answer 16

मैंने बूटस्ट्रैप छाया-sm को केवल दाईं ओर कॉपी करने की कोशिश की, यहां मेरा कोड है:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}