Biri hariç her tarafta bir CSS3 kutu gölgesi oluşturma

Açık sekmenin diğer sekmelerden ayırmak için bir gölgeye sahip olmasını istediğim sekmeli bir gezinme çubuğum var. Ayrıca, tüm sekme bölümünün tek bir gölgeye sahip olmasını (alt yatay çizgiye bakın), açık olan dışındaki tüm sekmelerin altını gölgelendirmesini istiyorum.

Bunu yapmak için CSS3'ün box-shadowözelliğini kullanacağım, ancak yalnızca istediğim kısımları gölgelendirmenin bir yolunu bulamıyorum.

Normalde, açık sekmenin alt gölgesini içerik alanıyla (daha yüksek z-index) örterdim , ancak bu durumda içerik alanının kendisinin bir gölgesi vardır, böylece yalnızca sekmeyi örtecek şekilde sarılır.

Sekme düzeni

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

Gölge çizgisi.

Gölge, yatay çizgilerden yukarı ve dikey çizgilerin dışına çıkar.

                _______
               | |
_______________ | | _________________

İşte canlı bir örnek:

Herhangi bir yardım var mı, dahiler?

Örneğinizde bu stille #content içinde bir div oluşturun

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

ve # içerik stilini değiştirin (dolguları kaldırın) ve gölge ekleyin

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

sekmelere gölge ekleyin:

#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 */
}

Taşma ile kesin.

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>

İstenilen efekti elde etmek için başka div'ler olmadan birden fazla CSS gölgesi kullanabilirsiniz, köşelerde gölgelerin olmaması uyarısı.

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>

Genel olarak, çok da rahatsız edici olmasa da.

Bu problemi çözmenin oldukça yaratıcı bir yolu da, öğelerden birine sözde öğeden sonra veya: öncesinde eklemektir. Benim durumumda şöyle görünüyor:

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

Ekran görüntüsüne bakın, sözde öğeyi daha görünür hale getirmek için kırmızı yaptı.

Şahsen ben burada bulunan çözümü en çok beğendim: http://css3pie.com/demos/tabs/

Arka plan rengine sahip sıfır durumuna veya üzerine gelme durumuna sahip olmanıza olanak tanır ve altta kalan içeriğin gölgesi hala üzerindedir. Yukarıdaki yöntemle bunun mümkün olduğundan emin değilim:

GÜNCELLEME:

Aslında yanılmışım. Kabul edilen çözümün yukarıda gösterilen fareyle üzerine gelme durumunu desteklemesini sağlayabilirsiniz. Bunu yap:

Pozitif akraba a üzerinde sahip olmak yerine, onu, aşağıdaki #content div değerinizden daha yüksek (üzerinde gölge vardır), ancak konumunuzdaki z-endeksinden daha düşük bir z-endeksi ile a.active sınıfına koyun. content_wrapper.

Örneğin:

<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>

sonra css ile:

#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 */

Güncelleme:

clip-path artık tüm büyük tarayıcılarda desteklenmektedir.

Orijinal Cevap:

Yalnızca kısmi destekle deneysel teknolojiyi kullanmak istiyorsanız, özelliği kullanabilirsiniz.clip-path .

Bu istenen etkiyi yaratacaktır: üstte, solda ve sağda bir kutu gölgesi ve alt kenarda temiz bir kesik.

Sizin durumunuzda clip-path'i kullanırsınız: inset (px px px px); piksel değerlerinin söz konusu kenardan hesaplandığı yer (aşağıya bakın).

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

Bu, söz konusu div'i şuradan keser:

• Üstte 8 piksel (gölgeyi dahil etmek için)
• Sağ kenarın dışında 8 piksel (gölgeyi dahil etmek için)
• Alttan 0 piksel (gölgeyi gizlemek için)
• Sol kenarın dışında 8 piksel (gölgeyi dahil etmek için)

Piksel değerleri arasında virgül gerekmediğini unutmayın.

Div'in boyutu esnek olabilir.

Birden fazla kutu gölgesi kullanarak da gölgeyi kapatabilirsiniz.

kutu gölgesi: 0 10px 0 #fff, 0 0 10px #ccc;

Bağlanmak için iki açıklık eklediyseniz, iki tane kullanabilirsiniz, örneğin:

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

bir aralıkta ve

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

diğerinde. Çalışabilir!

Gölgeler üst üste biniyorsa, 3 gölge bile kullanabilirsiniz - biri sola 1 piksel, sağa 1 piksel ve yukarı 1 piksel veya istediğiniz kalınlıkta.

Bir çeşit hack yaptım, mükemmel değil, ama iyi görünüyor:

<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>

SCSS

 .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);
}