Erstellen eines CSS3-Box-Schattens auf allen Seiten außer einem

Ich habe eine Navigationsleiste mit Registerkarten, in der die geöffnete Registerkarte einen Schatten haben soll, um sie von den anderen Registerkarten abzuheben. Ich möchte auch, dass im gesamten Registerkartenbereich ein einzelner Schatten (siehe untere horizontale Linie) nach oben zeigt, der die Unterseite aller Registerkarten mit Ausnahme der offenen schattiert.

Ich werde die CSS3- box-shadowEigenschaft verwenden, um dies zu tun, aber ich kann keinen Weg finden, nur die Teile zu schattieren, die ich möchte.

Normalerweise würde ich den unteren Schatten der geöffneten Registerkarte mit dem Inhaltsbereich (höher z-index) verdecken , aber in diesem Fall hat der Inhaltsbereich selbst einen Schatten, sodass er nur die Registerkarte abdeckt.

Registerkartenlayout

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

Schattenlinie.

Der Schatten würde von den horizontalen Linien nach außen und von den vertikalen Linien nach außen gehen.

                _______
               | |
_______________ | | _________________

Hier ist ein Live-Beispiel:

Hilfe da draußen, Genies?

Erstellen Sie in Ihrem Beispiel ein div in #content mit diesem Stil

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

und ändern Sie den # content-Stil (entfernen Sie die Auffüllungen) und fügen Sie Schatten hinzu

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

Hinzufügen von Schatten zu Registerkarten:

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

Schneiden Sie es mit Überlauf ab.

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>

Sie können mehrere CSS-Schatten ohne andere Divs verwenden, um den gewünschten Effekt zu erzielen, wobei keine Schatten um die Ecken zu sehen sind.

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>

Insgesamt ist es aber sehr unauffällig.

Eine weitere, eher kreative Möglichkeit, dieses Problem zu lösen, besteht darin, einem der Elemente Folgendes hinzuzufügen: nach oder: vor dem Pseudoelement. In meinem Fall sieht es so aus:

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

Sehen Sie sich den Screenshot an und machen Sie das Pseudoelement rot, um es besser sichtbar zu machen.

Persönlich gefällt mir die hier gefundene Lösung am besten: http://css3pie.com/demos/tabs/

Sie können einen Null- oder Schwebezustand mit einer Hintergrundfarbe festlegen, die immer noch den Schatten des darunter liegenden Inhalts überlagert. Ich bin mir nicht sicher, ob dies mit der obigen Methode möglich ist:

AKTUALISIEREN:

Eigentlich war ich falsch. Sie können dafür sorgen, dass die akzeptierte Lösung den oben gezeigten Schwebezustand unterstützt. Mach das:

Anstatt den positiven Verwandten auf dem a zu haben, setzen Sie ihn in die a.active-Klasse mit einem Z-Index, der höher ist als Ihr #content div unten (der den Schatten darauf hat), aber niedriger als der Z-Index auf Ihrem content_wrapper.

Beispielsweise:

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

dann mit deinem css:

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

Aktualisieren:

clip-path wird jetzt in allen gängigen Browsern unterstützt.

Ursprüngliche Antwort:

Wenn Sie bereit sind, experimentelle Technologie mit nur teilweiser Unterstützung zu verwenden , können Sie die clip-pathEigenschaft nutzen .

Dies erzeugt den gewünschten Effekt: einen Kastenschatten oben, links und rechts mit einem sauberen Ausschnitt am unteren Rand.

In Ihrem Fall würden Sie den Clip-Pfad verwenden: inset (px px px px); wobei die Pixelwerte von der fraglichen Kante berechnet werden (siehe unten).

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

Dadurch wird das betreffende Div unter folgender Adresse abgeschnitten:

• 8 Pixel über der Oberseite (um den Schatten einzuschließen)
• 8 Pixel außerhalb des rechten Randes (um den Schatten einzuschließen)
• 0 Pixel von unten (um den Schatten auszublenden)
• 8 Pixel außerhalb des linken Randes (um den Schatten einzuschließen)

Beachten Sie, dass zwischen den Pixelwerten keine Kommas erforderlich sind.

Die Größe des Div kann flexibel sein.

Sie können Schatten auch mit mehreren Kastenschatten verdecken.

Kastenschatten: 0 10px 0 #fff, 0 0 10px #ccc;

Wenn Sie zwei Bereiche hinzugefügt haben, an die Sie sich anschließen möchten, können Sie zwei verwenden, etwa:

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

auf einer Spanne und

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

übereinander. Könnte funktionieren!

Wenn sich die Schatten überlappen, können Sie sogar 3 Schatten verwenden - einen 1px nach links, einen 1px nach rechts und einen 1px nach oben, oder wie dick Sie sie möchten.

Ich habe eine Art Hack gemacht, nicht perfekt, aber es sieht okay aus:

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