Außerhalb Tabs

Ursprünglicher Autor: Chris Coyier
  • Übersetzung
Abgerundete Ecken werden nun trivial mit Randradius ausgeführt. Dank des Randradius können wir Blöcke nach Bedarf „beschneiden“, aber was ist, wenn wir die „äußere“ Ecke abrunden müssen? Das Problem lässt sich grafisch leichter erklären:

Dieses Bild zeigt, worum es geht.
Die oberen Ecken sind kein Problem, die unteren jedoch komplizierter. Unter der Katze erklären wir wie.


Reines html


In Website-Layouts können Sie auf fast jeden visuellen Effekt stoßen. Im schlimmsten Fall müssen Sie Bilder verwenden, um sie zu erreichen. Unsere Aufgabe ist es in diesem Fall wie immer nicht, sie zu verwenden (da sie schnell geladen, erschwinglich und leicht zu aktualisieren ist). Hier ist unser Markup:


Der Klassenname "active" gibt die aktive Registerkarte an.

Wie funktioniert das?


Der Grund, warum dies schwierig ist, ist, dass wir ein Formular benötigen, das über den Anfangsblock hinausgeht. Um dies ohne zusätzliches Markup zu erreichen, verwenden wir Pseudoelemente. Wenn Sie Ihr Gedächtnis über diese Elemente auffrischen müssen, können Sie dies tun, indem Sie diesen und diesen Artikel lesen . Direkt über CSS können wir der Seite zusätzliche stilisierte Elemente hinzufügen. Jedes Element kann mit Hilfe von Pseudo-Selektoren zwei zusätzliche Elemente erzeugen: Vorher und Nachher. Für jede Registerkarte werden vier verwendet. Dies ist möglich, weil jede Registerkarte aus zwei Elementen besteht: einem Listenelement und einem Anker.

Lassen Sie uns den Prozess Schritt für Schritt visualisieren, ohne den Code vorerst zu überprüfen.

1) Ausgangszustand
BildListenelemente sind normalerweise Blockelemente und der Anker ist ein Element in Kleinbuchstaben. Also kriegen wir so eine Rinde.

2) Wir bauen in einer Reihe
BildZuweisen von float: Links zu den Listenelementen richten wir sie in einer Reihe aus und kürzen die Breite des Ankers im Inneren. In der Tat - auf die Breite des Inhalts.

3) Wir bringen auf die gleiche Größe
BildListenelemente für sich haben keine Auffüllung oder Ränder (Rand oder Auffüllung), daher haben Listenelemente und darin verschachtelte Anker dieselbe Größe.

4) Betrachten Sie eine Registerkarte
BildWerfen wir einen Blick auf eine Registerkarte

5) Kreise
BildWir verwenden zwei der vier Pseudoelemente, um die Kreise links und rechts am unteren Rand der Registerkarte zu positionieren .

6) Rechtecke
BildMit den verbleibenden zwei Pseudoelementen erstellen wir kleinere Rechtecke.

7) Färben Sie die Registerkarte und den Inhalt ein
BildDie aktive Registerkarte und der aktive Inhalt haben eine gemeinsame Hintergrundfarbe.

8) Färben Sie die Pseudo-Elemente
BildRechtecke entsprechen der Farbe der aktiven Registerkarte, Kreise entsprechen der Hintergrundfarbe dahinter.

9) Überlappende Elemente
BildMit dem Z-Index stellen wir überlappende Rechtecke mit Kreisen bereit.

10) Kein Rahmen
BildDer Rahmen war nur in der Abbildung, in der Tat wird es irgendwo so aussehen.

11) Fertig stellen
BildWir wenden dasselbe Prinzip auf die äußeren Laschen an und runden die oberen Ecken mit dem Rahmenradius ab. Fertig

CSS


Und das ist ein riesiger CSS-Block, aber ich habe ihn ausführlich kommentiert, damit er verständlich ist.
.tabs li {
  /* Выстраиваем табы в полоску */
  float: left; 
  /* Что бы псевдоэлементы можно было абсолютно позиционировать в табах */
  position: relative;
}
.tabs a {
  /* Делаем якорь блочным элементом и укорачиваем до размера контента*/
  float: left;
  padding: 10px 40px;
  text-decoration: none;
  /* Цвета по умолчанию */
  color: black;
  background: #ddc385; 
  /* Скругляем верхние уголки */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.tabs .active {
  /* Активную вкладку помещаем поверх остальных */
  z-index: 3;
}
.tabs .active a {
  /* Цвета активной вкладке */
  background: white;
  color: black;
}
.tabs li:before, .tabs li:after,
.tabs li a:before, .tabs li a:after {
  /* Все псевдоэлементы абсолютно позиционированы относительно нижней грани*/
  position: absolute;
  bottom: 0;
}
/* Только первая, последная и активная вкладка создают псевдоэлементы, остальным они не нужны*/
.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before,
.tabs .active a:after, .tabs .active a:before {
  content: "";
}
.tabs .active:before, .tabs .active:after {
  background: white; 
  /* Прямоугольники под окружностями */
  z-index: 1;
}
/* Прямоугольники */
.tabs li:before, .tabs li:after {
  background: #ddc385;
  width: 10px;
  height: 10px;
}
.tabs li:before {
  left: -10px;
}
.tabs li:after {
  right: -10px;
}
/* Окружности */
.tabs li a:after, .tabs li a:before {
  width: 20px;
  height: 20px;
  /* Окружности … э … крууугггглыыыыыеееее */
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  background: #222;
  /* Окружности над прямоугольниками */
  z-index: 2;
}
.tabs .active a:after, .tabs .active a:before {
  background: #ddc385;
}
/* Первая и последняя вкладки обладают разными фоновыми цветами у внешних элементов*/
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
  background: #222;
}
.tabs li a:before {
  left: -20px;
}
.tabs li a:after {
  right: -20px;
}


Das ist alles!



Es funktioniert in allen modernen Browsern, einschließlich IE9 und höher. In älteren Browsern verschlechtert es sich (es gibt keine abgerundeten Ecken).

Verbesserung des milden Abbaus


Dieses Kapitel wurde von einem Übersetzer für diejenigen geschrieben, die dem Kunden nicht erklären konnten, dass das Fehlen abgerundeter Ecken im Internet Explorer keine persönliche Beleidigung für den Layouter darstellt. Lassen Sie uns den milden Abbau so weit wie möglich verbessern.



Zusätzliches CSS:



Für ie8 musste ich CSS in einen separaten Block stellen, der durch bedingte Kommentare hervorgehoben wurde, da ich keinen Hack finden konnte, der für ie8 funktionierte und für ie9 nicht funktionierte. Wenn jemand das weiß, bitte teilen.

Ich habe nicht die Notwendigkeit gesehen, auf Details einzugehen, aber wenn es notwendig ist, werde ich gerne alle Punkte erläutern, die Fragen aufwerfen könnten.

Ich hoffe, der Zusatz wird nützlich sein.

Jetzt auch beliebt: