CSS3 बॉक्स-छाया: इनसेट केवल एक या दो पक्ष कर सकते हैं? बॉर्डर-टॉप की तरह?

80

मैं css3 में साइड विशिष्ट आंतरिक छाया के लिए समर्थन के बारे में सोच रहा हूं।

मुझे पता है कि यह समर्थित ब्राउज़रों पर बहुत अच्छा काम करता है।

div { box-shadow:inset 0px 1px 5px black; }

मैं बस इस बात के लिए उत्सुक हूं कि क्या कुछ हासिल करने का कोई तरीका है: 

div { box-shadow-top:inset 0px 1px 5px black; }
css 
— ndmweb
स्रोत
केवल बाएँ और दाएँ पक्षों पर बॉक्स-छाया प्राप्त करने के लिए संभव डुप्लिकेट , जिसमें अधिक विस्तृत उत्तर और स्पष्टीकरण हैं।
— ब्रिचिन्स

जवाबों:

147

इसी से मेरा काम बना है:

box-shadow: inset 1px 4px 9px -6px;

उदाहरण: http://jsfiddle.net/23Egu/

— nischtname
स्रोत
9
अब तक सबसे सुरुचिपूर्ण समाधान।
— enyo
बहुत बढ़िया! मैंने हमेशा के लिए इसके साथ संघर्ष किया है, लेकिन यह एकल पंक्ति अब तक की सबसे सेक्सी वन साइड बॉर्डर लाती है। धन्यवाद दोस्त!
— सिल्ली
12
ध्यान देने योग्य बात यह है कि आप इसे box-shadow: inset 1px -4px 9px -6px;नीचे छाया के लिए बदल सकते हैं ।
— जस्टिन रसेल
7
बायीं ओर की छाया: box-shadow: inset 4px 1px 9px -6px; दाईं ओर की परछाई:box-shadow: inset -4px 1px 9px -6px;
— ब्रायनब्रून
हम्म तो हम सब कर रहे हैं कि हम बड़े प्रसार मूल्य का उपयोग कर रहे हैं और फिर इसे नकारात्मक धब्बा का उपयोग करके नकारा जा रहा है। चतुर
— समीउल्लाह खान
11

मुझे नहीं लगता कि आपकी वास्तव में ज़रूरत है box-shadow-topक्योंकि अगर आप offsetx0 पर सेट होते हैं और offsetyकिसी भी सकारात्मक मूल्य के लिए केवल शेष छाया शीर्ष पर है।

यदि आप शीर्ष पर छाया और नीचे छाया चाहते हैं तो आप बस दो div का उपयोग कर सकते हैं:

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

यदि आप रंगों के rgbaबजाय किनारों पर छाया से छुटकारा पाना चाहते हैं hexऔर बड़ा सेट करना चाहते हैं offsety:

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

इस तरह से आप छाया को अधिक अस्पष्टता प्रदान करते हैं ताकि पक्ष छिपे रहें और अधिक ऑफसेट के साथ आपको कम अस्पष्टता प्राप्त हो

पूरा उदाहरण:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>
— सेलेर
स्रोत
और छाया जितना आप चाहते हैं उससे अधिक फैल जाएगा। और पक्ष भी बदल गए हैं। निश्चित रूप से इसकी तुलना में एक अलग परिणाम box-shadow-topदेगा। संपादित करें, लेकिन यह है कि मैं आमतौर पर यह भी =)
— रुडी
@ रूडी, यदि आप रंगों के rgbaबजाय किनारों पर छाया से छुटकारा पाना चाहते हैं hexऔर बड़ा सेट करना चाहते हैं offsety: बॉक्स-शैडो: 0 5px 5px rgba (0,0,0, .5) इस तरह से आप छाया को अधिक अस्पष्टता देते हैं ताकि किनारे छिपे रहें। और अधिक ऑफसेट के साथ आपको कम अस्पष्टता मिलती है
— सेलेर
3
FYI करें, दो नेस्टेड डिव होने के बजाय एक ही समय में एक टॉप और बॉटम शैडो हासिल करने के लिए आप इसे एक डिव के साथ कर सकते हैं:box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;
— जेक विल्सन
10

माता-पिता के बक्से पर इस तरह से नियमित रूप से छाया के साथ तत्वों का उपयोग :beforeऔर afterकटौती overflow:hidden: http://dabblet.com/gist/2585482

सीएसएस

/**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;    
}

#element:before , #element:after{
  content: "\0020";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

एचटीएमएल

<div id="element"></div>
— जकोब कोसोरोबा
स्रोत
यह वह तकनीक है जिसने मेरे लिए काम किया। मेरे मामले में, # सेलेमेंट स्क्रॉल करने योग्य था, इसलिए मुझे इसे काम करने के लिए चिपचिपा होने के लिए स्थिति को बदलना पड़ा।
— मिहाई राउडुकेनू
5

आप ज्यादातर मामलों में एक काम के लिए एक पृष्ठभूमि ढाल का उपयोग कर सकते हैं:

SCSS (कम्पास के साथ) उदाहरण:

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
— उमर जलालजादा
स्रोत
1
कभी-कभी हमें सिर्फ पीछे हटने की जरूरत होती है और हम जो पूरा करने की कोशिश कर रहे हैं उसके बारे में सोचते हैं। और यह अक्सर वही होता है जो हम एकतरफा आंतरिक बॉक्स छाया के साथ करते हैं। प्रतिभाशाली। अगर मैं कर सकता तो मैं दो बार बढ़ा देता!
— random_user_name
जब मैंने पहली बार इस टिप्पणी को देखा, तो मुझे लगा कि यह हमेशा काम करने के लिए जटिल लगता है, लेकिन यह पूरी तरह से काम करता है। धन्यवाद!!
— एलेक्स
4 
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

यह सिर्फ प्यारा काम करता है :)

यहाँ एक कोडपेन है जो इसे दिखाता है: http://codepen.io/poopsplat/pen/cGBLy

— पूपसप्लेट
स्रोत
3

एक ही छाया के लिए लेकिन केवल शीर्ष पर:

box-shadow: inset 0px 6px 5px -5px black;

छाया को एक दिशा में रखने के लिए आपको "स्प्रेड" पैरामीटर के साथ "ब्लर" पैरामीटर को नकारना होगा और फिर इसी मान द्वारा "एच-पॉस" और / या "वी-पॉस" मापदंडों को समायोजित करना होगा। यह विपरीत सीमा या ट्रिपल बॉर्डर के साथ काम नहीं करता है। आपको एक और परिभाषा जोड़ना होगा।

यहाँ और अधिक उदाहरण: http://codepen.io/GBMan/pen/rVXgqP

— GBMan
स्रोत
1

नहीं, सीधे तौर पर नहीं, लेकिन आप उन हिस्सों को काट सकते हैं जिन्हें आप इसे एक डिव में डालकर नहीं चाहते हैं overflow: hidden:

http://jsfiddle.net/Vehdg/

— मार्क कहन
स्रोत
1

मुझे सिर्फ यह समस्या थी। मुझे जो समाधान मिला वह कई बॉक्स-शैडो (प्रत्येक पक्ष के लिए एक है कि आप अपनी छाया चाहते हैं) के साथ था। यहाँ परिभाषा है:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

यहाँ यह सोचने का तरीका है:

  • सबसे पहले, प्रसार 0 करें (यह सभी पक्षों पर प्रभाव को निष्क्रिय कर देगा)
  • एच-ऑफसेट (यदि आप इसे सकारात्मक होने के लिए सेट करते हैं, तो यह बाईं तरफ डाली जाएगी, यदि आप इसे नकारात्मक सेट करते हैं, तो दाईं ओर)
  • v- ऑफसेट (यदि आप इसे सकारात्मक होने के लिए सेट करते हैं, तो यह शीर्ष पर डाली जाएगी, यदि आप इसे नकारात्मक सेट करते हैं, तो नीचे की तरफ

यहाँ आप तीन तरफ से मेरे केस को बॉक्स-शैडो के साथ देख सकते हैं (लेफ्ट, टॉप, राइट और बॉटम एक ही रंग के साथ है, जैसा कि मैं चाहता था कि इफ़ेक्ट बनाने के लिए बैकग्राउंड - लेफ्ट साइड और राईट सभी तरह से बॉटम तक जाए ) https://codepen.io/cponofrei/pen/eMMyQX

— क्रिस्टी ओनोफ्रेई
स्रोत
0

आप अपनी div को overflow:hiddenसीमाओं के साथ-साथ छाया तत्वों को जोड़कर एकल-पक्षीय, आंतरिक छाया को पूरा कर सकते हैं।

एक डिवीजन के ऊपर और नीचे की सीमाओं पर एक आंतरिक छाया सेट करें:

एचटीएमएल 

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</div>

सीएसएस

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
— जेसन जॉर्ज
स्रोत
कई लोग यह तर्क देंगे कि इस तरह से अतिरिक्त मार्कअप जोड़ना शब्दार्थ नहीं है और यह बुरा अभ्यास है। यह insetबॉक्स-शैडो सीएसएस के मूल्यों का उपयोग करके रचनात्मक प्राप्त करके प्राप्त किया जा सकता है । याद रखें कि आप बॉक्स-शैडो को एक ही तत्व पर स्टैक कर सकते हैं। तो ऊपर लिखे कमेंट में @Jakobud की तरह कोई भी इस्तेमाल कर सकता है: box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black; एक और तरीका ,, कि अनावश्यक मार्कअप को जोड़ने की तुलना में केवल थोड़ा कम आक्रामक है, का उपयोग करना :beforeऔर :afterचयनकर्ताओं को करना है। लेकिन ऐसा क्यों करें यदि आप मूल तत्व को सीधे चुन और स्टाइल करके कर सकते हैं।
— ओरियन
0

box-shadowसभी चार पक्षों के लिए है। आप इसे (अभी तक?) नहीं बदल सकते। में 4 आकार box-shadowपरिभाषा हैं OffsetX, offsetY, Blurऔर Spread।

— रूडी
स्रोत
1
स्प्रेड और ब्लर समान नहीं हैं। प्रत्येक के लिए अलग-अलग मान हैं। तो तकनीकी रूप से देखते हैं 6. Inset/Outset, OffsetX, OffsetY, BlurRadius, SpreadRadiusऔर Color। जैसा कि अन्य ने बताया है, आप एक तरफ इस तरह से निर्दिष्ट कर सकते हैंbox-shadow: inset 0 8px 6px -6px black;
— ओरिआन
1
सच। मैंने सभी 4 आकारों को प्रतिबिंबित करने के लिए उत्तर बदल दिया है ।
— रुडी
0

मल्टीपल बॉक्स शैडो ने मेरे लिए ट्रिक बनाई।

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

— शॉन
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.