Erstellen eines CSS3 box-shadow auf allen Seiten, aber ein

Question

Ich habe eine Tabbed-Navigationsleiste, wo ich die offene Lasche einen Schatten haben möchte sie von den anderen Registerkarten auseinander zu setzen. Ich möchte auch den ganzen Abschnitt Registerkarte einen einzigen Schatten haben (siehe untere horizontale Linie) steigen, die Beschattung die Unterseite aller Registerkarten mit Ausnahme des offenen.

Ich werde CSS3 der box-shadow Eigenschaft verwenden, es zu tun, aber ich kann nicht einen Weg, um Schatten heraus nur die Teile, die ich will.

Normalerweise würde ich den Boden Schatten des offenen Tab mit dem Inhaltsbereich (höherer z-index) überdecken, aber in diesem Fall ist der Inhalt selbst einen Schatten, so dass nur die Registerkarte aufzuzuwickeln würde abdecken.

Tab Layout

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

Schattenlinie.

Schatten würden von den horizontalen Linien nach oben und nach außen von den vertikalen Linien.

                _______
               |       |
_______________|       |_________________

Hier ist ein anschauliches Beispiel:

Jede Hilfe gibt, Genies?

Answer 1

In Ihrer Probe erstellen div innerhalb #content mit diesem Stil

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

und Änderung #content Stil (entfernen Polsterungen) und fügen Schatten

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

Schatten hinzufügen 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 */
}

Answer 2

es mit Überlauf abschneiden.

<style type="text/css">
    div div {box-shadow:0 0 5px #000; height:20px}
    div {overflow:hidden;height:25px; padding:5px 5px 0 5px}

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

Answer 3

Sie können mehrere CSS Schatten nutzen, ohne andere divs gewünschten Effekt zu erzielen, mit dem Vorbehalt, von der keine Schatten um die Ecken.

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

Insgesamt aber seine sehr unaufdringlich.

Answer 4

Persönlich mag ich die Lösung hier am besten gefunden: http://css3pie.com/demos/tabs/

Es ermöglicht Ihnen, mit einer Hintergrundfarbe einen Null-Zustand oder einen Hover-Zustand zu haben, die immer noch den Schatten unten überlagern sich aus dem Inhalt hat. Nicht sicher, das ist möglich mit dem Verfahren, das oben:

UPDATE:

Eigentlich war ich falsch. Sie können die akzeptierte Lösung machen den Hover-Zustand unterstützen oben gezeigt. Tun Sie dies:

Statt auf den ein die positive relativen zu haben, legt sie auf der a.active-Klasse mit einem Z-Index, der unterhalb höher ist als Ihre #content div ist (die den Schatten auf ihn), aber niedriger als die z- Index auf content_wrapper.

Zum Beispiel:

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

Answer 5

Eine weitere, eher kreativ, Weg zur Lösung dieses Problems ist das Hinzufügen von: nach oder: vor Pseudo-Element zu einem der Elemente. In meinem Fall sieht es wie folgt aus:

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

Sehen Sie den Screenshot, das Pseudo-Element rot machte es besser sichtbar zu machen.

machen

Answer 6

Sie können mehrere Box Schatten Schatten mit als auch verschleiern.

box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;

Answer 7

Wenn Sie zwei Felder hinzugefügt auf Haken dann könnte man zwei verwenden, so etwas wie:

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

auf einer Spanne und

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

auf einem anderen. Funktionieren kann!

Wenn die Schatten überlappen Sie sogar 3 Schatten verwenden könnten -. 1px man nach links, nach rechts und einem 1px, oder aber dicken 1px Sie wollen

Answer 8

Wenn Sie bereit sind, mit experimenteller Technologie zu verwenden, nur teilweise Unterstützung , könnten Sie die clip-path Eigenschaft .

Damit wird die gewünschte Wirkung:. Einen Kasten Schatten auf der oberen, linken und rechten Seite mit einem sauberen Cut-off am unteren Rand

In Ihrem Fall würden Sie Clip-Pfad verwenden: Inset (px px px px); wobei die Pixelwerte von der Kante in Frage berechnet (siehe unten).

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

Das wird die div in Frage Clip an:

• 8 Pixel über dem oberen (einschließlich der Schatten)
• 8 Pixel außerhalb des rechten Randes (einschließlich der Schatten)
• 0 Pixel vom Boden (den Schatten zu verstecken)
• 8 Pixel außerhalb des linken Randes (einschließlich der Schatten)

Beachten Sie, dass keine Kommas zwischen Pixelwerten erforderlich sind.

Die Größe des div kann flexibel sein.

Answer 9

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

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