(Bessere) Tabs mit abgerundeten Außenrändern

Eine gut aussehende Tab-Steuerung hat normalerweise eine Funktion, die ich bisher immer nur mit Bildern reproduzieren konnte: Ränder, die sich unten an jedem Tab nach *außen* biegen. In diesem Artikel möchte ich zeigen, wie Sie die CSS-Pseudo-Elemente :before und :after verwenden können, um diesen Effekt ohne Bilder zu erzielen. Beginnen wir zunächst mit einem einfachen Markup.

Das Markup

<ul class="tabrow">
   <li>Lorem</li>
   <li>Ipsum</li>
   <li class="selected">Sit amet</li>
   <li>Consectetur adipisicing</li>
</ul>

Das ist so ziemlich das Grundlegendste, was man haben kann. Nicht viele Elemente, mit denen man arbeiten kann, aber es wird genügen.

Erste Schritte

Um zu beginnen, entfernen wir zunächst das Standard-Styling von <ul> und <li> und bringen diese Elemente in eine Reihe.

.tabrow {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 24px;
}
.tabrow li {
  margin: 0 10px;
  padding: 0 10px;
  border: 1px solid #AAA;
  background: #ECECEC;
  display: inline-block;
}

Tab auswählen

Der ausgewählte Tab sollte natürlich deutlich sichtbar sein.

.tabrow li.selected {
  background: #FFF;
  color: #000;
}

Zum Grundlegenden kommen

Jede Tab-Steuerung benötigt eine klar definierte untere Kante. Sie wird jetzt nicht viel bewirken, aber später hilft sie, den Effekt desselected Tabs, der oben liegt, zu betonen.

.tabrow {
  position: relative;
}
.tabrow:after {
  position: absolute;
  content: "";
  width: 100%;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #AAA;
  z-index: 1;
}

Hier haben wir unser erstes :after Pseudo-Element eingeführt. Grundsätzlich fügt :after ein weiteres Kindelement zu einem Element hinzu. Es ist nicht im DOM (deshalb wird es als *Pseudo*-Element bezeichnet), also kein echtes Kindelement, aber es ist vollständig gestaltbar, solange man etwas content hinzufügt, in diesem Fall ein einzelnes Leerzeichen.

Meiner Meinung nach sind die Begriffe :before und :after etwas verwirrend, da die Pseudoelemente nicht tatsächlich vor oder nach dem Element hinzugefügt werden, auf das sie angewendet werden, sondern als Kindelemente eingefügt werden. Deshalb können Sie :before und :after auch nicht auf Elemente anwenden, die keine Kindelemente enthalten können ("no content"-Elemente) wie z. B. <input>.

In diesem Fall verwenden wir das Pseudoelement, um einen unteren Rand zu erstellen, der die Positionierung der Tabs nicht beeinflusst. Wir hätten einfach einen unteren Rand auf das <ul> setzen können, aber das hätte den nächsten Schritt etwas kniffliger gemacht.

Darüber hinaus

Nun ist ein wesentlicher Teil einer überzeugend aussehenden Tab-Steuerung, dass der ausgewählte Tab *vor* dem Rand liegt, während die anderen hinter dem Rand verschwinden. Um dies zu erreichen, ändern wir seinen unteren Rand und verwenden etwas z-index-Magie.

.tabrow:before {
  z-index: 1;
}
.tabrow li {
    position: relative;
  z-index: 0;
}
.tabrow li.selected {
  z-index: 2;
  border-bottom-color: #FFF;
}

Um die Biegungen herum

Jetzt ist es an der Zeit, den schwer fassbaren nach außen gebogenen Rand hinzuzufügen, und dafür verwenden wir :before und :after. Nehmen wir diesen Schritt Schritt für Schritt und positionieren zunächst einfach alles.

.tabrow li:before,
.tabrow li:after {
  position: absolute;
  bottom: -1px;
  width: 6px;
  height: 6px;
  content: " ";
}
.tabrow li:before {
  left: -6px;
}
.tabrow li:after {
  right: -6px;
}
.tabrow li:after, .tabrow li:before {
  border: 1px solid #AAA;
}

Sei nicht so ein Quadrat

Sie sehen wahrscheinlich, worauf das hinausläuft. Entfernen wir die unerwünschten Ränder und fügen einige abgerundete Ecken hinzu.

.tabrow li {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.tabrow li:before {
  border-bottom-right-radius: 6px;
  border-width: 0 1px 1px 0;
}
.tabrow li:after {
  border-bottom-left-radius: 6px;
  border-width: 0 0 1px 1px;
}

Ecken abschneiden

Irgendetwas stimmt mit diesem Ergebnis nicht ganz. Sehen wir es uns genau an. Wie Sie sehen, sind sowohl die ursprüngliche gerade Ecke als auch die abgerundete Ecke sichtbar. Wir müssen die gerade Ecke irgendwie loswerden. Dazu decken wir sie mit einem Schatten ab. Um zu veranschaulichen, was passiert, lassen wir den Schatten etwas hervorstechen.

.tabrow li:before {
  box-shadow: 2px 2px 0 red;
}
.tabrow li:after {
  box-shadow: -2px 2px 0 red;
}

Fast fertig

Wie Sie sehen, verdecken die roten Schatten vollständig die quadratischen Ecken, die wir ausblenden möchten. Wenn wir dem Schatten die richtigen Farben geben, ist die Illusion perfekt.

.tabrow li:before {
  box-shadow: 2px 2px 0 #ECECEC;
}
.tabrow li:after {
  box-shadow: -2px 2px 0 #ECECEC;
}
.tabrow li.selected:before {
  box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
  box-shadow: -2px 2px 0 #FFF;
}

Stilvolle Details

Alles, was jetzt noch zu tun ist, ist, ein paar Verläufe und Schatten hinzuzufügen, um das Ganze noch etwas aufzupeppen.

.tabrow li {
  background: linear-gradient(to bottom, #ECECEC 50%, #D1D1D1 100%);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
  text-shadow: 0 1px #FFF;
  margin: 0 -5px;
  padding: 0 20px;
}

Wenn Sie sich fragen, wie es mit der Browserkompatibilität aussieht, ist es genau wie erwartet: alles außer IE. Es ist sehr gut möglich, dass es in IE10 funktioniert, aber ich hatte noch keine Gelegenheit, mit einer Vorschauversion zu testen. Da IE8 und IE9 :before und :after unterstützen, aber nicht border-radius, müssen Sie dafür ein separates Stylesheet erstellen, wenn Sie deren Nutzern ein schönes visuelles Erlebnis bieten möchten.

Demo ansehen   Dateien herunterladen

Anmerkung der Redaktion: Ich habe der Demo im Beispielanker-Links innerhalb der Tabs hinzugefügt, da ich denke, dass es am wahrscheinlichsten ist, dass Tab-Navigationen wie diese Ankerlinks haben. Wahrscheinlich hätten sie ein href-Attribut, das über id zum entsprechenden Inhalt verlinkt, und dieses Verhalten würde durch JavaScript gesteuert. Die Tatsache, dass dieses Tutorial die Ankerlinks für die zusätzlichen Pseudoelemente nicht benötigt, ist ein weiterer Beweis dafür, dass es besser ist als meine ursprüngliche Version.

Update: Allan Watkins hat mir eine Variante davon geschickt, die nach unten zeigt

Siehe den Pen Nach unten zeigende Rund-Außen-Tabs von Chris Coyier (@chriscoyier) auf CodePen.