किसी तत्व के केवल एक तरफ ड्रॉप शैडो कैसे बनाएं?

Question

क्या केवल तल पर छाया को छोड़ने का एक तरीका है? मैं एक दूसरे के बगल में 2 छवियों के साथ एक मेनू है। मुझे एक सही छाया नहीं चाहिए क्योंकि यह सही छवि को ओवरलैप करता है। मुझे इसके लिए छवियों का उपयोग करना पसंद नहीं है इसलिए केवल नीचे की तरफ इसे छोड़ने का एक तरीका है:

box-shadow-bottom: 10px #FFF; या इसी के समान?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

Comments

आपका स्वीकृत उत्तर संदर्भ box-shadow-bottomजो मौजूद नहीं है, और किसी के द्वारा समर्थित नहीं है। वैध बॉक्स-छाया तकनीकों के लिए nicolasgallagher.com/css-drop-shadows-without-images/demo देखें ।

— पॉल आयरिश

@ पाओल ... मेरे पास एक टाइपो था, उसका फिक्स था।

— हिस्टो

आपके CSS उदाहरण में टिप्पणियाँ भ्रामक हैं - filterIE8 और IE9 में भी काम करेंगी। -ms-filterइस मामले में कोई ज़रूरत नहीं है ।

— मथियास बिएनेंस

आप इस यथार्थवादी इनसेट सीएसएस छाया को अनुकूलित कर सकते हैं: stackoverflow.com/a/20596554/1491212

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

Answer 1

अद्यतन 4

अपडेट 3 की तरह ही लेकिन आधुनिक सीएसएस (= कम नियम) के साथ ताकि छद्म तत्व पर कोई विशेष स्थिति की आवश्यकता न हो।

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

अद्यतन 3

मेरे सभी पिछले उत्तर इस प्रभाव को बनाने के लिए अतिरिक्त मार्कअप का उपयोग कर रहे हैं, जिसकी आवश्यकता नहीं है। मुझे लगता है कि यह एक बहुत क्लीनर समाधान है ... छाया की सही स्थिति के साथ-साथ छाया की सही ताकत / अस्पष्टता प्राप्त करने के लिए केवल चाल ही मूल्यों के साथ खेल रही है। यहाँ छद्म तत्वों का उपयोग करते हुए एक नई पहेली है :

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

एचटीएमएल

<div id="box" class="box-shadow"></div>

सीएसएस

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

अद्यतन २

जाहिरा तौर पर, आप बॉक्स-शैडो सीएसएस के लिए एक अतिरिक्त पैरामीटर के साथ ऐसा कर सकते हैं जैसा कि बाकी सभी ने अभी-अभी बताया है। यहाँ डेमो है:

http://jsfiddle.net/K88H9/821/

सीएसएस

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

यह एक बेहतर समाधान होगा। अतिरिक्त पैरामीटर जो जोड़ा गया है वह इस प्रकार है:

चौथी लंबाई एक प्रसार दूरी है। सकारात्मक मान छाया आकृति को निर्दिष्ट त्रिज्या द्वारा सभी दिशाओं में विस्तारित करने का कारण बनता है। नकारात्मक मान छाया की स्थिति को अनुबंधित करते हैं।

अपडेट करें

JsFiddle पर डेमो देखें: http://jsfiddle.net/K88H9/4/

मैंने जो किया वह एक "शैडो एलिमेंट" था जो उस वास्तविक एलिमेंट के पीछे छिपा होगा जिसे आप एक शैडो रखना चाहते हैं। मैंने "छाया तत्व" की चौड़ाई को वास्तविक तत्व की तुलना में बिल्कुल कम चौड़ा किया, जो आपके द्वारा निर्दिष्ट छाया से 2 गुना अधिक है; तब मैंने इसे ठीक से संरेखित किया।

एचटीएमएल

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

सीएसएस

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

मूल उत्तर

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

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

बॉक्स छाया के बारे में अधिक जानकारी के लिए, इन्हें देखें:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

आशा है कि ये आपकी मदद करेगा।

Comments

धुंधली छाया को प्राप्त करने के लिए आपको जरूरी नहीं है कि एक खाली div को जोड़ा जाए। घोषणा में वह तीसरा मूल्य: box-shadow: 0 2px 4px #000000एक धब्बा मूल्य है। यहाँ देखें http://jsfiddle.net/K88H9/7/ । लेकिन आप देखेंगे कि तत्व के बाईं और दाईं ओर थोड़ा सा धब्बा है, जहां हिस्टो के समाधान में नहीं है।

कोई बॉक्स-शैडो-तल संपत्ति नहीं है और इस प्रभाव को निश्चित रूप से एक अतिरिक्त तत्व की आवश्यकता नहीं है। छी।

— ली वेरो

box-shadow-bottom, जबकि रचनात्मक, वास्तव में मौजूद नहीं है।

— miketaylr

सर्द लोग ... यह

— हिस्टेरो

@gryzzly ... मैंने अपना उत्तर संपादित किया, मैंने अपना टाइपो नहीं देखा जब तक कि सभी ने इसे इंगित नहीं किया। उसके लिए माफ़ करना।

— हिस्टो

Answer 2

छाया को छोटा करने के लिए बस फैल पैरामीटर का उपयोग करें:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

लाइव डेमो: http://dabblet.com/gist/a8f8ba527f5cff607327

पक्षों पर किसी भी छाया को न देखने के लिए, प्रसार त्रिज्या (4 वीं पैरामीटर) का पूर्ण मान धब्बा त्रिज्या (3 डी पैरामीटर) के समान होना चाहिए।

Comments

यह वास्तव में काम नहीं करता है। पहली नज़र में ऐसा प्रतीत होता है जैसे कि छाया केवल तल पर है, लेकिन वास्तव में यह अभी भी पक्षों को फैलाता है। एवरबॉडी के उदाहरण काफी गहरे नीले रंग के बॉक्स के साथ हैं ... बॉक्स को सफ़ेद बनाते हैं और आप सभी छाया देखेंगे।

— क्रिस एल

@ क्रिस एम: सिर्फ प्रसार पैरामीटर वृद्धि: 4 उदाहरण के साथ की कोशिश करो box-shadow:0 8px 4px -6pxऔर आप केवल नीचे छाया देखेंगे!

— T30

एक बार फिर से, बॉक्स को इस फिडेल के रूप में बनाइए और आप अभी भी सभी तरफ से छाया को देखेंगे और यह भी कि अब यह नीचे की तरफ नहीं है। पक्षों से छुटकारा पाने के लिए आप प्रसार पैरामीटर पर जाने के लिए कितने तैयार हैं? इसके अलावा, शायद 151 प्रतिनिधि वाले किसी व्यक्ति के लिए 7k प्रतिनिधि वाले किसी व्यक्ति के उत्तर को संपादित न करने के लिए सबसे अच्छा है। इसे एक टिप्पणी में छोड़ दें।

— क्रिस एल

@ T30 निश्चित रूप से आप आगे भी फैला हुआ पैरामीटर को कम करके पक्षों से छुटकारा पा सकते हैं। लेकिन अब आपकी छाया आपके बॉक्स की चौड़ाई के करीब नहीं है। आपके पास 72px छाया के साथ 84px बॉक्स है।

— क्रिस एल

अद्यतन उत्तर। लेकिन मूल रूप से, प्रसार त्रिज्या को कम करने और वाई ऑफ़सेट को समायोजित करने की कमी है, बहुत कुछ नहीं कर सकता है। शायद छाया के बजाय एक ढाल का उपयोग करें? इसके अलावा, मुझे कोई आपत्ति नहीं है कि लोग मेरे पोस्ट को एडिट कर रहे हैं, लेकिन मैं कुछ एंग्रीश जैसी भाषा में लिखे वाक्यों को जोड़ने के लिए मेरे पोस्ट को एडिट करने वाले लोगों की सराहना नहीं करता। मैं एक देशी अंग्रेजी वक्ता नहीं हूं और मैं चुनौतियों को समझता हूं, लेकिन अगर मैं किसी और के पद को संपादित कर रहा था, तो मुझे कम से कम डबल-चेक करने के लिए पर्याप्त जिम्मेदारी महसूस होगी कि मैंने किस तरह के अर्थों को जोड़ा और व्याकरण नहीं है शर्मनाक तरीके से गलत

— लीउ वेरो

Answer 3

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

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

ध्यान दें कि काली छाया अंतिम होनी चाहिए, और इसे कोनों से परे विस्तार से रोकने के लिए एक नकारात्मक प्रसार (-3px) है।

यहां फिडल (मास्किंग छाया का रंग बदलना यह देखने के लिए कि यह वास्तव में कैसे काम करता है)।

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

Comments

transparentमास्किंग छाया के लिए रंग का उपयोग करना बेहतर होगा , नहीं?

— एंजेल जोसेफ पिस्कोला

@AngelJosephPiscola: चतुर संकेत .. जवाब में लागू किया गया, धन्यवाद!

— T30

@ T30 भयानक, लेकिन ध्यान दें कि पारदर्शी मास्क के साथ आपको एक निश्चित रंग पृष्ठभूमि की आवश्यकता नहीं होनी चाहिए;)

— एंजेल जोसेफ पिस्कोला

मैंने इसे बेहतर तरीके से परीक्षण किया, और पारदर्शी छाया काम नहीं करती है , इसलिए मैंने पिछले संपादन

— T30

Answer 4

मुझे लगता है कि यह आप के बाद क्या है?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

Comments

इसे प्यार करें जब लोग बस समझ में नहीं आते हैं। हां, वह पहली छाया (सफेद) के प्रसार के साथ खिलवाड़ कर रहा है जो वास्तविक छाया (काला) के मार्जिन को कवर करेगा। यह एक आदर्श यूनिडायरेक्शनल छाया प्राप्त करने का एकमात्र एकमात्र तरीका है। विशेष रूप से उपयोगी है जब आपको मेनू के 2 भागों पर समान छाया की आवश्यकता होती है।

— ज़ेनो पोपोविसी

Answer 5

चश्मा पढ़ना हमेशा बेहतर होता है । कोई box-shadow-bottomसंपत्ति नहीं है, और जैसा कि ली बताते हैं कि आपको हमेशा उपसर्गों के बाद सबसे पहले उप-उपसर्गित संपत्ति को नीचे रखना चाहिए।

तो यह:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

Comments

पक्षों से छाया है

— shinzou

Answer 6

कैसे के बारे में बस एक युक्त div का उपयोग करने के लिए जो अतिप्रवाह में छिपा हुआ है और नीचे कुछ पैडिंग है? यह बहुत सरल समाधान की तरह लगता है।

यह कहने के लिए क्षमा करें कि मैंने खुद इसके बारे में नहीं सोचा था लेकिन इसे कहीं और देखा ।

बॉक्स-छाया और अतिप्रवाह प्राप्त करने वाले तत्व को लपेटने के लिए एक तत्व का उपयोग करना: आवरण पर छिपा हुआ आप अतिरिक्त बॉक्स-छाया को गायब कर सकते हैं और अभी भी एक उपयोग करने योग्य सीमा है। यह उस समस्या को भी ठीक करता है जहां तत्व छोटा है जैसा कि फैला हुआ है।

ऐशे ही:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

सामग्री यहाँ जाती है

फिर भी एक चतुर समाधान जब इसे शुद्ध सीएसएस में किया जाना है!

जैसा कि जोर्गेन एवेन्स ने कहा है ।

Comments

समाधान के लिए +1। के अतिरिक्त padding-bottom(चलो 5px कहते हैं), आप भी margin-bottomजोड़ा स्थान के लिए क्षतिपूर्ति करने के लिए -5 -5 की एक नकारात्मक सेट कर सकते हैं ।

— फैबियो.संग

Answer 7

आप clip-pathसभी ओवरफ्लो करने वाले किनारों को क्लिप (छिपाने) के लिए भी उपयोग कर सकते हैं, लेकिन जिसे आप दिखाना चाहते हैं:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

देखें क्लिप पथ (MDN) । बहस करने के लिए polygonकर रहे हैं ऊपरी-बाएं बिंदु, ऊपरी-दाएं बिंदु, निचले दाएं बिंदु, और निचले बाएं बिंदु। नीचे के किनारे 200%(या जो भी नंबर से बड़ा हो 100%) को सेट करके आप अपने ओवरफ्लो को केवल निचले किनारे तक सीमित कर देते हैं।

Comments

तो ... मूल शब्दों में, क्लिप-पथ अतिप्रवाह है: स्टेरॉयड पर छिपी हुई संपत्ति। यह साफ है। ;)

— क्रेग

Answer 8

मुझे एक छाया की भी आवश्यकता थी, लेकिन केवल एक छवि के तहत और थोड़ा बाएं और दाएं में सेट। यह मेरे लिए काम किया:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

यह जिस तत्व पर लागू होता है, वह एक पेज-वाइड इमेज (980px x 300px) है।

यदि यह सेटिंग के साथ फ़िडलिंग करते समय मदद करता है, तो वे निम्नानुसार चलते हैं:

क्षैतिज छाया, ऊर्ध्वाधर छाया, धुंधली दूरी, प्रसार (यानी छाया आकार), और रंग।

Answer 9

छाया को देखना बेहतर है:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

यह कोड वर्तमान में स्टैकओवरफ़्लो वेब पर उपयोग कर रहा है।

Answer 10

यह कोड पेन (मेरे द्वारा नहीं) ऐसा करने का एक सुपर सरल तरीका प्रदर्शित करता है और अन्य पक्षों द्वारा खुद को काफी अच्छी तरह से:

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

https://codepen.io/zeckdude/pen/oxywmm

Answer 11

यदि आपकी पृष्ठभूमि ठोस है (या आप इसे सीएसएस का उपयोग करके पुन: पेश कर सकते हैं), तो आप इस तरह रैखिक ढाल का उपयोग कर सकते हैं:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

यह तत्व के तल पर एक 5px ढाल उत्पन्न करेगा, काले रंग से 30% अस्पष्टता से पूरी तरह से पारदर्शी होगा। बाकी तत्व में सफेद पृष्ठभूमि है। बेशक, रैखिक ढाल के अंतिम 2 रंग स्टॉप को बदलते हुए, आप पृष्ठभूमि को पूरी तरह से पारदर्शी बना सकते हैं।

Answer 12

आप तल पर बस एक ढाल भी कर सकते हैं - यह मेरे लिए सहायक था क्योंकि मैं चाहता था कि छाया एक तत्व पर थी जो पहले से ही अर्ध-पारदर्शी थी, इसलिए मुझे किसी भी कतरन के बारे में चिंता करने की ज़रूरत नहीं थी:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

बस "नीचे" और "ऊंचाई" गुण मिलान करें और अपने rgba मूल्यों को सेट करें जो भी आप चाहते हैं कि वे छाया के शीर्ष / तल पर हों।

Answer 13

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

सामान्य वाक्यविन्यास:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

उदाहरण: हम लाल रंग के साथ केवल एक निचला बॉक्स छाया बनाना चाहते हैं,

ऐसा करने के लिए हमें सभी पक्षों के विकल्पों को सेट करना होगा, जहाँ हमें नीचे के बक्सों के छाया विकल्पों को सेट करना है और अन्य सभी को इस प्रकार खाली करना है:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

Answer 14

सफेद के बजाय किसी और के उत्तर को पारदर्शी पक्षों पर अपडेट करें ताकि यह अन्य रंग की पृष्ठभूमि पर भी काम करे।

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

Answer 15

भीतरी छाया

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>