मैं एक तत्व के एक तरफ बॉक्स-छाया कैसे जोड़ सकता हूं?

Question

मुझे कुछ blockतत्व पर एक बॉक्स-छाया बनाने की आवश्यकता है , लेकिन केवल (उदाहरण के लिए) इसके दाईं ओर। जिस तरह से मैं करता हूं वह आंतरिक तत्व box-shadowको एक बाहरी के साथ लपेटने के लिए है padding-rightऔर overflow:hidden;इसलिए छाया के तीन अन्य पक्ष दिखाई नहीं देते हैं।

क्या इसे हासिल करने का कोई बेहतर तरीका है? पसंद है box-shadow-right?

संपादित करें : मेरा इरादा केवल छाया के ऊर्ध्वाधर भाग का निर्माण करना है। बिल्कुल वैसा ही जैसा कि repeat-yनियम का background:url(shadow.png) 100% 0% repeat-yहोता है।

Comments

बॉक्स-छाया के संदर्भ में सीएसएस के सीमित साधनों पर विचार करना मुझे लगता है कि आपका दृष्टिकोण पहले से ही काफी अच्छा है। यह बहुत अव्यवस्थित नहीं है और शब्दार्थ के संदर्भ में इसका काफी छोटा प्रभाव है: सिर्फ एक अर्थहीन विभाजन।

— बाज़

यहाँ एक अच्छा सीएसएस साइड-शैडो है: stackoverflow.com/a/20596554/1491212

— आर्मल लारिसर

Answer 1

हां, आप बॉक्स-शैडो नियम की छाया प्रसार संपत्ति का उपयोग कर सकते हैं:

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

चौथी संपत्ति वहाँ -2pxछाया प्रसार है, आप इसका उपयोग छाया के प्रसार को बदलने के लिए कर सकते हैं, जिससे यह प्रतीत होता है कि छाया केवल एक तरफ है।

यह शैडो पोजिशनिंग नियमों का उपयोग करके 10pxइसे सही (क्षैतिज ऑफ़सेट) पर भेजता है और 0pxइसे तत्व (वर्टिकल ऑफ़सेट) के अंतर्गत रखता है।

5px धब्बा त्रिज्या है :)

आपके लिए यहां उदाहरण ।

Comments

कुछ ऐसा इंगित करने के लिए धन्यवाद, जो मुझे नहीं पता था, लेकिन मेरे इरादे केवल छाया के ऊर्ध्वाधर भाग को बनाने के लिए थे । बिल्कुल वही जो पृष्ठभूमि: url (shadow.png) 100% 0% रिपीट-वाई करेगा।

— tillda

@ टिल्डा आपको इसे उत्तर के रूप में चिह्नित करना चाहिए ताकि यह समाधान खोजने वाले अन्य लोगों के लिए शीर्ष पर दिखाई दे। मैंने टिप्पणियों को पढ़ने की स्टाइल की इस पद्धति को लगभग खारिज कर दिया और उत्तर को स्वीकार कर लिया।

— डेविन जी रोड

यह बहुत अच्छा काम करता है यदि आप कोनों पर ध्यान देने के लिए छाया का इरादा नहीं रखते हैं। मैं स्वयं इस समाधान के साथ आया था, लेकिन ज्यादातर मामलों में (एक तरफ छाया के लिए) यह तत्व की तुलना में छाया का छोटा होना गलत है, इस प्रकार भ्रम को तोड़ना (यदि ऐसा इरादा था) तो कहा गया है कि तत्व है " उठाया "या" 3 डी "।

— स्टीवन लू

@ Mr.Alien इसके लिए धन्यवाद, मैंने box-shadowनियमों को मानकीकृत करने के लिए सिर्फ उपसर्ग हटा दिया था।

— काइल

लेकिन इस छाया में कोई धब्बा नहीं है, और धब्बा सहित यह अन्य भागों से बाहर आता है। और यदि आप प्रसार को कम करके खाते हैं, तो यह समय से पहले समाप्त हो जाता है जिस तरफ आप वास्तव में चाहते हैं। UGHHHHH

— मुहम्मद उमर

Answer 2

मेरा स्व-निर्मित समाधान जो संपादित करना आसान है:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

सीएसएस:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

डेमो:
http://jsfiddle.net/jDyQt/103

Comments

किसी भी तरह सबसे सीधे आगे लगता है - बस कंटेनर div मुझे किसी तरह दुखी कर रहा है;)

— BananaAcid

यही एकमात्र वास्तविक समाधान है। स्वीकृत उत्तर में छाया के ऊपर और नीचे अभी भी अलग-अलग स्थिति में धुंधला है।

— जेल ब्लौव

यह Microsoft Edge या Internet Explorer 11 में मेरे लिए काम नहीं करता था। ज़ूम स्तर के आधार पर, दूसरी तरफ अभी भी थोड़ा सा छाया था। अन्य ब्राउज़र हालांकि ठीक थे।

— सैम

पर जवाब stackoverflow.com/a/24220224/238753 इस रूप में, लेकिन ब्राउज़र संगतता मुद्दों है कि इस सवाल का जवाब है बिना एक ही काम किया

— सैम

Answer 3

अप करने के लिए दो पक्षों पर क्लिप प्रभाव प्राप्त करने के लिए आप पृष्ठभूमि ग्रेडिएंट के साथ छद्म तत्वों का उपयोग कर सकते हैं।

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

उन तत्वों के बाईं और दाईं ओर एक अच्छा छाया-जैसा प्रभाव जोड़ देगा जो सामान्य रूप से एक दस्तावेज़ बनाते हैं।

Comments

सही समाधान, क्योंकि यह मार्कअप को बंद किए बिना केवल एक तत्व के एक तरफ एक छाया प्रभाव जोड़ता है।

— लिक्विनाट

नकारात्मक प्रसार विधि की तुलना में यह कोनों पर सिकुड़ने का लाभ नहीं है।

— केविन क्रिस्टोफर हेनरी

@BananaAcid मैंने किसी ऐसे व्यक्ति के लिए एक डेमो बनाया, जिसे इसकी आवश्यकता है: jsfiddle.net/jDyQt/1198

— zeckdude

अच्छा है, यह पूरी तरह से क्रोम, सफारी, फ़ायरफ़ॉक्स, IE11 और एज में मेरे लिए कोई साइड इफेक्ट के साथ काम नहीं किया

— सैम

Answer 4

छाया को जोड़ने के लिए छद्म तत्व से पहले :: बाद या :: का उपयोग करें। इसे 1 पीएक्स बनाएं और इसे जिस तरफ चाहें, उतनी स्थिति में रखें। नीचे शीर्ष का उदाहरण है।

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

Comments

यह एक अभी भी किनारे पर फैल गया है, लेकिन हो सकता है कि कुछ लोग चाहते हैं

— सैम

Answer 5

यहाँ मेरा उदाहरण है:

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

<div class="box">
</div>

Answer 6

यहाँ एक छोटा सा हैक है जो मैंने किया था।

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1.<div class="one_side_shadow"></div> उस तत्व के नीचे एक राइट बनाएं जिसे मैं एक-साइड बॉक्स छाया बनाना चाहता हूं (इस मामले में मैं id="element"नीचे से आने के लिए एक तरफा इनसेट छाया चाहता हूं )

2. फिर मैंने box-shadowछाया को एक तरफ करने के लिए एक नकारात्मक ऊर्ध्वाधर ऑफसेट का उपयोग करके एक नियमित बनाया ।

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

Answer 7

यह एक सरल तरीका हो सकता है

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

इसे किसी भी विभाग को सौंप दें

Answer 8

यहाँ प्रत्येक पक्ष, या काम करने वाले स्निपेट को प्रदर्शित करने के लिए एक कोडपेन है:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

Answer 9

इस साइट ने मेरी मदद की: https://gist.github.com/ocean90/1268328 (ध्यान दें कि उस साइट पर बाईं और दाईं ओर इस पोस्ट की तारीख उलट दी गई है ... लेकिन वे उम्मीद के मुताबिक काम करती हैं)। उन्हें नीचे दिए गए कोड में सुधारा गया है।

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

Answer 10

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

Answer 11

मैं जो भी करता हूं वह छाया के लिए एक ऊर्ध्वाधर ब्लॉक बनाता है, और इसे उस स्थान के बगल में रखता है जहां मेरा ब्लॉक तत्व होना चाहिए। दो ब्लॉक फिर दूसरे ब्लॉक में लिपटे हुए हैं:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

jsFiddle उदाहरण यहां ।

Answer 12

ठीक है, यहाँ एक और अधिक कोशिश है। छद्म तत्वों का उपयोग करना और उन पर छाया-पेटी छिद्र का उपयोग करना।

एचटीएमएल:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

सास:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ

Answer 13

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

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

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

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

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

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

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

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

कहाँ पे:

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

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

Comments

@ टिल्डा, एक दशक पुराने सवाल को काटते हुए - बस सोच रहा था कि क्या मैंने आपकी एक बार की आवश्यकता (विशेष रूप से कट-ऑफ शैडो इफ़ेक्ट) की सही व्याख्या की है - मैं इसे प्राप्त करने की कोशिश कर रहा था और आपके प्रश्न में आया। प्रक्रिया।

— ल्यूक