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


115

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?


23
@the_drow Re: CSS3, ich betrachte Designmerkmale wie Schlagschatten, abgerundete Ecken usw. gerne als Belohnung für Benutzer, die moderne Browser verwenden.
Blutmilch

3
WOW das ist genau das was ich brauchte, froh, dass es schon eine Frage gibt. Ich möchte dies auch auf einen Tab anwenden, genau wie Sie es gezeigt haben, wow wow wow: D
Jorge Israel Peña

Eine weitere großartige Möglichkeit, dieses Problem zu lösen, ist die Verwendung von Pseudoelementen. Weitere Informationen finden Sie in meiner Antwort.
Silver Ringvee

Details zur Pseudo-Element-Lösung finden Sie hier: stackoverflow.com/a/38372215/4769218
Silver

Ich weiß, dass dies eine alte Frage ist, aber ist die Größe der Registerkarten bekannt? Oder sind sie flexibel? Ich kann mir vorstellen, dass die Höhe eingestellt sein könnte, aber nicht die Breite?
Luke

Antworten:


72

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

In dieser Lösung fehlt etwas. Wenn Sie seinen Code bearbeiten und die empfohlenen Stile anwenden, wird immer noch ein Schatten über der Registerkarte "Ausgewählt" angezeigt. Scheint, als gäbe es einen Überlauf: versteckt fehlt?
Bob Spryn

1
Ja. Sie würden einen Überlauf benötigen: versteckt auf dem Navi, damit es funktioniert.
Bob Spryn

1
Der in gezeigte 'Linienschatten' #content_over_shadowsollte eigentlich im #contentStil sein.
AppleGrew

Nun, diese Lösung war 2009 richtig, aber jetzt ist es nicht mehr. Die richtige Antwort lautet stackoverflow.com/a/9800481/835753
Guilherme Ferreira

Eine Lösung mit Pseudoelement
Silver

25

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>


3
Hier ist auch ein Beispiel für das Abschneiden mit Überlauf starikovs.com/2011/11/09/css3-one-side-shadow .
Starikovs

Diese Methode funktioniert nur, wenn es die Unterseite ist, auf der Sie den Schatten nicht wollen
andrhamm

Funktioniert super! Die Eltern Div kann auf die richtige gesetzt werdenz-index
Rvanlaak

Ich verwende derzeit diese Lösung. Ich habe einige Probleme mit untergeordneten Elementen, die überlaufen müssen (als Facebook-ähnliche Schaltfläche).
Loenix

1
Nicht sehr nützlich für die meisten reaktionsschnellen Designs, da Sie die Höhe der Elemente einstellen müssen
Jonathan Tonge

13

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.


1
Dies wäre eine großartige Lösung, aber wie Sie sagen, sind die Ecken wackelig. jsfiddle.net/mahemoff/ZStTr
Mahemoff

1
Arbeitete wie ein Zauber für meine Schattenbedürfnisse mit abgerundeten Ecken. Vielen Dank!
Bruno Ely

9

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.

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


7

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:

schattierte Registerkarte mit Schwebezustand

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

7

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.


Leider gibt es eine Lücke, in der sich die beiden Schatten überlappen.
Sbaechler

@sbaechler kannst du das näher erläutern? Wo überlappen sich die Schatten?
Luke

4

Sie können Schatten auch mit mehreren Kastenschatten verdecken.

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


1

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.


0

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);
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.