सभी तरफ एक CSS3 बॉक्स-शैडो बनाना लेकिन एक

Question

मुझे एक टैब्ड नेविगेशन बार मिला है जहां मैं चाहता हूं कि दूसरे टैब से अलग सेट करने के लिए एक खुला टैब हो। मुझे पूरे टैब सेक्शन में एक सिंगल शैडो (नीचे क्षैतिज रेखा देखना) भी पसंद होगा, जो ओपन टैब को छोड़कर सभी टैब के निचले हिस्से को छायांकित करता है।

मैं इसे करने के लिए CSS3 की box-shadowसंपत्ति का उपयोग करने जा रहा हूं , लेकिन मैं केवल उन हिस्सों को शेड करने का तरीका नहीं खोज सकता जो मुझे चाहिए।

आम तौर पर मैं सामग्री क्षेत्र (उच्च z-index) के साथ खुले टैब की निचली छाया को कवर करता हूं , लेकिन इस मामले में सामग्री क्षेत्र में स्वयं एक छाया होती है जिससे कि टैब को कवर करने में बस हवा लगेगी।

टैब लेआउट

     _______ _______ _______
    | | | | | |
____ | _______ | __ | | __ | _______ | ______

छाया लकीर।

छाया क्षैतिज रेखाओं से और ऊर्ध्वाधर रेखाओं से बाहर की ओर जाएगी।

                _______
               | |
_______________ | | _________________

यहाँ एक जीवंत उदाहरण है:

कोई मदद वहाँ, प्रतिभाशाली?

Comments

पुन :: CSS3, मैं ड्रॉप शैडो, गोल कोनों, आदि जैसे डिज़ाइन सुविधाओं पर विचार करना पसंद करता हूँ, उन उपयोगकर्ताओं के लिए एक इनाम है जो आधुनिक ब्राउज़रों का उपयोग करते हैं।

— ब्लौडरमिल्क

वाह यह ठीक वही है जो मुझे चाहिए था, खुशी से एक सवाल पहले से ही मौजूद है। मैं भी इसे एक टैब पर लागू करना चाहता हूं जैसे आपने दिखाया था, वाह वाह वाह: डी

— जॉर्ज इज़राइल पेना

इस समस्या को हल करने का एक और शानदार तरीका छद्म तत्वों का उपयोग करना है, अधिक विवरण के लिए मेरा जवाब देखें।

— सिल्वर रिंगवे

यहां छद्म तत्व-समाधान के लिए विवरण देखें: stackoverflow.com/a/38372215/4769218

— सिल्वर रिंगवे

मुझे पता है कि यह एक पुराना सवाल है, लेकिन क्या टैब का आकार ज्ञात है? या वे लचीले हैं? मैं कल्पना कर सकता हूं कि ऊंचाई निर्धारित की जा सकती है, लेकिन चौड़ाई नहीं?

— ल्यूक

Answer 1

अपने नमूने में इस शैली के साथ # कॉन्टेंट के अंदर एक div बनाएं

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

और #content स्टाइल बदलें (गद्दी हटाएं) और छाया जोड़ें

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

टैब में छाया जोड़ें:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

Comments

इस समाधान से कुछ गायब है। उनके कोड को संपादित करना और अनुशंसित शैलियों को लागू करना, आप अभी भी 'चयनित' टैब पर एक छाया के साथ समाप्त होते हैं। लगता है जैसे वहाँ एक अतिप्रवाह है: लापता लापता?

— बॉब स्प्रीन सेप

हां। आपको एक अतिप्रवाह की आवश्यकता होगी: यह काम करने के लिए नौसेना पर छिपा हुआ है।

— बॉब स्प्रीन सेप

दिखाया गया 'रेखा छाया' #content_over_shadowवास्तव में #content'शैली' में होना चाहिए ।

— AppleGrew

वैसे यह घोल 2009 में सही था, लेकिन अब ऐसा नहीं है। सही उत्तर है stackoverflow.com/a/9800481/835753

— Guilherme Ferreira

छद्म तत्व के साथ एक समाधान: stackoverflow.com/a/38372215/4769218

— सिल्वर रिंगवे

Answer 2

इसे अतिप्रवाह के साथ काटें।

div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}

<div><div>tab</div></div>

Comments

यहाँ यह भी एक उदाहरण के साथ यह अतिप्रवाह Starikovs.com/2011/11/09/css3-one-side-shadow के साथ काट रहा है ।

— Starikovs

यह विधि केवल तभी काम करेगी जब यह नीचे की तरफ हो, जिस पर आप छाया नहीं चाहते हैं

— andrhamm

बहुत अच्छा काम करता है! माता-पिता को सही पर रखा जा सकता हैz-index

— रवनलाक

मैं वर्तमान में इस समाधान का उपयोग कर रहा हूं, मुझे बाल तत्व के साथ कुछ परेशानियां हो रही हैं जिन्हें अतिप्रवाह करने की आवश्यकता है (जैसे कि बटन की तरह फेसबुक)।

— लूनिक्स

अधिकांश उत्तरदायी डिजाइनों के लिए बहुत उपयोगी नहीं है क्योंकि आपको तत्वों की ऊंचाई निर्धारित करनी है

— जोनाथन स्पंज

Answer 3

आप इच्छित प्रभाव पाने के लिए बिना किसी अन्य divs के बिना कई सीएसएस छाया का उपयोग कर सकते हैं, कोनों के आसपास कोई छाया नहीं।

div.shadow {
    -webkit-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    -moz-box-shadow:    0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    box-shadow:         0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
    height: 25px
}

 <div style="height: 25px"><div class="shadow">tab</div></div>

कुल मिलाकर हालांकि यह बहुत ही अनपेक्षित है।

Comments

यह एक महान समाधान होगा, लेकिन जैसा कि आप कहते हैं, कोनों में जीत है। jsfiddle.net/mahemoff/ZStTr

— mahemoff

गोल कोनों के साथ मेरी इनसेट छाया जरूरतों के लिए एक आकर्षण की तरह काम किया। धन्यवाद!

— ब्रूनो एली

Answer 4

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

#magik_megamenu>li:hover>a:after {
    height: 5px;
    width: 100%;
    background: white;
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
}

स्क्रीनशॉट देखें, इसे अधिक दृश्यमान बनाने के लिए छद्म तत्व को लाल कर दिया।

Answer 5

व्यक्तिगत रूप से मुझे यहां पाया गया समाधान सबसे अच्छा लगता है: http://css3pie.com/demos/tabs/

यह आपको एक शून्य राज्य या एक पृष्ठभूमि रंग के साथ एक मंडराना राज्य की अनुमति देता है जिसमें अभी भी ओवरलेइंग सामग्री के नीचे छाया है। सुनिश्चित नहीं है कि उपरोक्त विधि से संभव है:

अपडेट करें:

दरअसल मैं गलत था। आप ऊपर दिखाए गए हॉवर स्थिति को स्वीकृत समाधान का समर्थन कर सकते हैं। यह करो:

A पर धनात्मक सापेक्ष होने के बजाय a.active वर्ग को z-index के साथ रखें जो आपके #content div से नीचे है (जिस पर छाया है) से अधिक है, लेकिन आपके z- इंडेक्स से कम है content_wrapper।

उदाहरण के लिए:

<nav class="ppMod_Header clearfix">
    <h1 class="ppMod_PrimaryNavigation-Logo"><a class="ppStyle_Image_Logo" href="/">My company name</a></h1>
    <ul class="ppList_PrimaryNavigation ppStyle_NoListStyle clearfix">
        <li><a href="/benefits">Benefits</a></li>
        <li><a class="ppStyle_Active" href="/features">Features</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/company">Company</a></li>
    </ul>
</nav>
<div id="ppPage-Body">
    <div id="ppPage-BodyWrap">
        content goes here
    </div>
</div>

फिर अपने सीएसएस के साथ:

#ppPage-Body
    box-shadow: 0 0 12px rgba(0,0,0,.75)
    position: relative /* IMPORTANT PART */

#ppPage-BodyWrap
    background: #F4F4F4
    position: relative /* IMPORTANT PART */
    z-index: 4 /* IMPORTANT PART */


.ppList_PrimaryNavigation li a:hover
    background: #656565
    -webkit-border-radius: 6px 6px 0 0
    -moz-border-radius: 6px 6px 0 0
    border-radius: 6px 6px 0 0

.ppList_PrimaryNavigation li a.ppStyle_Active
    background: #f4f4f4
    color: #222
    -webkit-border-radius: 6px 6px 0 0
    -moz-border-radius: 6px 6px 0 0
    border-radius: 6px 6px 0 0
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.75)
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.75)
    box-shadow: 0 0 12px rgba(0,0,0,0.75)
    position: relative /* IMPORTANT PART */
    z-index: 3 /* IMPORTANT PART */

Answer 6

अपडेट करें:

clip-path अब सभी प्रमुख ब्राउज़रों में समर्थित है।

---

मूल उत्तर:

यदि आप केवल आंशिक समर्थन के साथ प्रयोगात्मक प्रौद्योगिकी का उपयोग करने के लिए तैयार हैं , तो आप clip-pathसंपत्ति का उपयोग कर सकते हैं ।

यह वांछित प्रभाव पैदा करेगा: ऊपरी किनारे पर एक बॉक्स छाया, नीचे और दाएं किनारे पर नीचे की तरफ एक साफ कट-ऑफ।

आपके मामले में आप क्लिप-पथ का उपयोग करेंगे: इनसेट (px px px px); जहाँ पिक्सेल मानों की गणना किनारे से प्रश्न में की जाती है (नीचे देखें)।

#container {
    box-shadow: 0 0 8px 2px #888;
    clip-path: inset(-8px -8px 0px -8px);
}

यह प्रश्न में div क्लिप जाएगा:

• शीर्ष पर 8 पिक्सेल (छाया को शामिल करने के लिए)
• दाहिने किनारे के बाहर 8 पिक्सेल (छाया को शामिल करने के लिए)
• नीचे से 0 पिक्सेल (छाया को छिपाने के लिए)
• बाएं किनारे के बाहर 8 पिक्सेल (छाया को शामिल करने के लिए)

ध्यान दें कि पिक्सेल मानों के बीच कोई अल्पविराम आवश्यक नहीं है।

Div का आकार लचीला हो सकता है।

Comments

दुर्भाग्य से एक अंतर है जहां दो छायाएं ओवरलैप होती हैं।

— सबबॉलर

@sbaechler क्या आप विस्तृत कर सकते हैं? छाया कहाँ से ओवरलैप करते हैं?

— ल्यूक

Answer 7

आप कई बॉक्स छाया का उपयोग करके छाया को भी कवर कर सकते हैं।

बॉक्स-छाया: 0 10px 0 #fff, 0 0 10px #ccc;

Answer 8

यदि आपने हुक करने के लिए दो स्पैन जोड़े हैं तो आप दो का उपयोग कर सकते हैं, जैसे कुछ:

box-shadow: -1px -1px 1px #000;

एक समय पर और

box-shadow: 1px -1px 1px #000;

किसी दूसरे पर। शायद काम कर जाये!

यदि छाया ओवरलैप करता है, तो आप 3 छाया का उपयोग भी कर सकते हैं - एक 1px बाईं ओर, एक 1px दाईं ओर और एक 1px ऊपर, या फिर जितना आप चाहते हैं उतना मोटा।

Answer 9

मैंने एक तरह का हैक किया, न कि सही, लेकिन यह ठीक लग रहा है:

<ul class="tabs">
<li class="tab active"> Tab 1 </li>
<li class="tab"> Tab 2 </li>
<li class="tab"> Tab 3 </li>
</ul>

<div class="tab-content">Content of tab goes here</div>

एससीएसएस

 .tabs { list-style-type: none; display:flex;align-items: flex-end;
  .tab {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid $vivosBorderGrey2;
    background-color:$vivosBorderGrey2;
    color: $vivosWhite;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom: 0;
    margin-right: 2px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: 0.2s;
    &.active {
      padding-bottom: 10px;
      background-color: #ffffff;
      border-color: #eee;
      color: $vivosMedGrey;
      border-bottom-color: transparent;
      box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.1);
    }
    &:hover {padding-bottom: 10px;
    }
   } 

.tabContent {
  border: 1px solid #eee;
  padding:10px;
  margin-top: -1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}