CSS-Tipps zur Implementierung der Chrome-Tab-Leiste

Dieses Mal schauen wir uns ein Navigationsleisten-Layout mit speziellen abgerundeten Ecken an, wie beispielsweise die Tab-Leiste von Google Chrome:

Wie erreicht man ein solches Layout? Hier sind einige Methoden

1. Pseudoelement-Spleißen

Angenommen, es gibt eine solche HTML-Struktur

<nav class="tab">
  <a class="tab-item">Svelte-API</a>
  <a class="tab-item active">Svelte-API</a>
  <a class="tab-item">Svelte-API</a>
  <a class="tab-item">Svelte-API</a>
</nav>

Die erste Methode, die in Betracht gezogen werden kann, besteht darin, zwei Pseudoelemente zum Spleißen zu verwenden

Die abgerundeten Ecken in der Mitte sind relativ einfach, aber wie erreicht man die umgekehrt abgerundeten Ecken auf der linken und rechten Seite? Tatsächlich kann man darüber nachdenken, welche Stile verwendet werden können, um einen Kreis zu erzielen. Hier denke ich an den Rahmenradius, der wie folgt erreicht werden kann

• Zeichnen Sie einen transparenten Kreis
• Fügen Sie dem Kreis einen ausreichend großen Rand oder Schatten hinzu
• Einen kleinen Teil abschneiden
• Beenden

Nachfolgend sehen Sie ein Beispiel

Der Code, um dies zu erreichen ist

.tab-item{
  Position: relativ;
  Hintergrundfarbe: rot;
  Polsterung: 10px 15px;
  Rahmenradius: 12px 12px 0 0;
  Cursor: Zeiger;
  Übergang: .2s;
}
.tab-item::vorher,.tab-item::nachher{
  Position: absolut;
  unten: 0;
  Inhalt: '';
  Breite: 20px;
  Höhe: 20px;
  Randradius: 100 %;
  box-shadow: 0 0 0 40px red;/*Die Verwendung von box-shadow hat keinen Einfluss auf die Größe*/
  Übergang: .2s;
}
.tab-item::before{
  links: -20px;
  Clip-Pfad: Einschub (50 % -10px 0 50 %);
}
.tab-item::nach{
  rechts: -20px;
  Clip-Pfad: Einschub (50 % 50 % 0 - 10 px);
}

Der endgültige Echtzeiteffekt ist wie folgt

Hier wird das Clipping mithilfe von Clip-Pfad erreicht. Beachten Sie, dass Sie etwas weiter nach innen clippen können, um Lücken in der Naht zu vermeiden. Um den Code zu vervollständigen, besuchen Sie chrome-tab (codepen.io)

Natürlich können die umgekehrt abgerundeten Ecken hier auch durch einen radialen Farbverlauf erreicht werden, lesen Sie also weiter.

2. Universeller Farbverlauf

CSS-Farbverläufe sind nahezu allmächtig und können beliebige Grafiken zeichnen. Hier können wir sie in zwei Rechtecke, zwei Kreise und zwei umgekehrt abgerundete Ecken aufteilen, also in zwei lineare Farbverläufe und vier radiale Farbverläufe, wie unten gezeigt.

Der Code, um dies zu erreichen ist

.tab-item{
  Polsterung: 10px 35px;
  Hintergrundbild: 
    radial-gradient(Kreis bei 0 0, transparent 15px, blau 0),
    radial-gradient(Kreis bei 0 0, transparent 15px, blau 0),
    radial-gradient(Kreis bei 0 0, grün 12px, transparent 0,
    radial-gradient(Kreis bei 12px 0, grün 12px, transparent 0,
    linearer Farbverlauf (rot, rot),
    linearer Farbverlauf (rot, rot);
  Hintergrundwiederholung: keine Wiederholung;
  Hintergrundposition: 15px oben, rechts 15px oben 0, links unten, rechts unten, Mitte unten, Mitte, unten;
  Hintergrundgröße: 30px 30px, 30px 30px, 12px 12px, 12px 12px, calc(100 % – 30px) calc(100 % – 12px), calc(100 % – 54px) 100 %;
}

Obwohl es implementiert ist, ist es sehr langwierig. Nach sorgfältiger Beobachtung stellt sich heraus, dass die beiden Kreise durch Kacheln realisiert werden können. Die beiden umgekehrten Filets können als Halbkreis betrachtet werden, der auch gekachelt werden kann, wie unten gezeigt

Auf diese Weise sind nur zwei radiale Gradienten erforderlich, um dies zu erreichen. Der Code lautet wie folgt

.tab-item{
  Position: relativ;
  Polsterung: 10px 35px;
  Cursor: Zeiger;
  Hintergrundbild: radialer Farbverlauf (Kreis bei 15px 0, transparent 15px, blau 0),
    radial-gradient(Kreis bei 27px 12px, grün 12px, transparent 0),
    linearer Farbverlauf (rot, rot),
    linearer Farbverlauf (rot, rot);
  Hintergrundgröße: 100 % 15 Pixel, calc (100 % – 54 Pixel), calc (100 % – 30 Pixel) calc (100 % – 12 Pixel), calc (100 % – 54 Pixel) 100 %;
  Hintergrundposition: -15px unten, links oben, Mitte unten, Mitte unten;
  Hintergrundwiederholung: Wiederholung-x, Wiederholung-x, keine Wiederholung, keine Wiederholung;
}

Der endgültige Echtzeiteffekt ist wie folgt (oben ist das schematische Diagramm)

Den vollständigen Code finden Sie unter chrome-tab-gradient (codepen.io).

3. Adaptives SVG

Obwohl Farbverläufe vielseitig sind, erfordern sie viel Code und stellen hohe Anforderungen an Ihre Geduld. Für dieses Beispiel ist SVG auch eine gute Lösung.

Das abgerundete Rechteck in der Mitte ist einfacher, verwenden Sie einfach rect

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>   
	<rect rx="12" Breite='100%' Höhe='100%' Füllung="#3A8EFF"/>
</svg>

Die umgekehrt abgerundeten Ecken auf beiden Seiten können direkt mithilfe eines Pfads erstellt werden (der von verschiedenen Grafikprogrammen generiert werden kann).

<svg Breite="100" Höhe="100" Ansichtsbox="0 0 100 100" Füllung="keine" xmlns="http://www.w3.org/2000/svg">
	<Pfad Füllregel="evenodd" Clipregel="evenodd" d="M0 100C55.2285 100 100 55.2285 100 0V100H0Z" Füllregel="#3A8EFF"/>
</svg>

<svg Breite="100" Höhe="100" Ansichtsbox="0 0 100 100" Füllung="keine" xmlns="http://www.w3.org/2000/svg">
	<Pfad Füllregel="evenodd" Clipregel="evenodd" d="M100 100C44.7715 100 0 55.2285 0 0V100H100Z" Füllregel="#3A8EFF"/>
</svg>

Verwenden Sie dann diese drei SVG-Codes als Hintergrund. Sie können sie mit „background-size“ und „background-position“ anpassen und steuern.

.tab-item{
  Position: relativ;
  Polsterung: 10px 35px;
	Rand: 0 -15px;
  Cursor: Zeiger;
  Übergang: .2s;
  Hintergrundbild: URL("data:image/svg+xml,%3Csvg Breite='100' Höhe='100' Ansichtsfeld='0 0 100 100' Füllung='keine' xmlns='http://www.w3.org/2000/svg'%3E%3CPfad Füllregel='evenodd' Clipregel='evenodd' d='M100 100C44.772 100 0 55.228 0 0v100h100z' Füllung='%23F8EAE7'/%3E%3C/svg%3E"),
    URL ("data:image/svg+xml,%3Csvg Breite='100' Höhe='100' Ansichtsfeld='0 0 100 100' Füllung='keine' xmlns='http://www.w3.org/2000/svg'%3E%3CPfad Füllregel='evenodd' Clipregel='evenodd' d='M0 100c55.228 0 100-44.772 100-100v100H0z' Füllung='%23F8EAE7'/%3E%3C/svg%3E"),
    url("Daten:Bild/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='12' Breite='100%' Höhe='100%' Füllung='%23F8EAE7'/></svg>");
  Hintergrundgröße: 12px 12px, 12px 12px, calc(100 % - 24px) calc(100 % + 12px);
  Hintergrundposition: rechts unten, links unten, Mitte oben;
  Hintergrundwiederholung: keine Wiederholung;
}

Der Echtzeiteffekt ist wie folgt

Den vollständigen Code finden Sie unter chrome-tab-svg (codepen.io).

Darüber hinaus fragen sich manche vielleicht, warum hier drei SVG-Segmente verwendet werden. Kann ich nicht 1 SVG verwenden, um 3 Pfade aufzunehmen? **Die Antwort ist nein. Es gibt keine Möglichkeit, die Positionierung in SVG flexibel zu nutzen. Wenn Sie es beispielsweise in der unteren rechten Ecke platzieren möchten, kann SVG nur 100 % anstelle von calc (100 % - 12px) verwenden, ganz zu schweigen davon, dass CSS auch Positionierungsattribute wie „rechts unten“ hat, sodass mehrere CSS-Hintergründe verwendet werden müssen, um dies zu erreichen.

4. Bildrand

Die oben genannten Methoden sind immer noch zu kompliziert. Können wir das Bild „zuschneiden“? Natürlich ist das möglich, aber es bedarf auch bestimmter Fähigkeiten, um eine Anpassung zu erreichen. Um dies zu erreichen, kann hier ein CSS3-Rahmenbild verwendet werden. Informationen zu Rahmenbildern finden Sie in diesem Artikel: JELLY | Richtige Verwendung von Rahmenbildern (jd.com).

Bereiten Sie einfach ein Bild wie dieses vor, SVG oder PNG reichen aus

svg ist wie folgt

<svg Breite="67" Höhe="33" Ansichtsbox="0 0 67 33" Füllung="keine" xmlns="http://www.w3.org/2000/svg">
  <Pfad Füllregel="evenodd" Clipregel="evenodd" d="M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c-8.284 0-15-6.716-15-15v-6c0-6.627-5.373-12-12-12H27z" Füllregel="#F8EAE7"/>
</svg>

Dann schneiden Sie es einfach entsprechend der Rahmenbildspezifikation aus

Der Code wird wie folgt implementiert. Denken Sie daran, einen Rahmen hinzuzufügen

.tab-item{
  Position: relativ;
  Polsterung: 0,8px;
  Rand: 0 -15px;
  Cursor: Zeiger;
  Rahmenbreite: 12px 27px 15px;
  Rahmenstil: durchgezogen;
  Grenze: URL ("Daten: Bild/SVG+XML,%3CSVG Width = '67 'Height = '33' Viewbox = '0 67 33' fill = 'none' xmlns = 'http: //www.w3.org/2000/svg'vor & supminaliertes Jahr 7 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15H67C-8,284 0-15-6.716-15-15V-6C0-6.627-5.373-12-12-12H27Z 'FILL ='%23F8EEA7 'ISG 3E%3e%3C/SVGG 3E.
}

Der Echtzeiteffekt ist wie folgt

Den vollständigen Code finden Sie unter chrome-tab-border-image (codepen.io).

Obwohl die Codeimplementierung relativ einfach ist, ist die Inhaltsgröße aufgrund der Notwendigkeit, Ränder hinzuzufügen, schwer zu steuern.

5. Maske

Die bisherigen Methoden zur Verwendung von Hintergrundbildern haben tatsächlich ein Problem. Die Farben befinden sich alle im Hintergrundbild und sind fast festgelegt, was eine Änderung umständlich macht. Mithilfe einer Maske kann dieses Problem also leicht gelöst werden.

Mit dem vorherigen Hintergrund (Farbverlauf oder SVG ist in Ordnung) müssen Sie nur den Hintergrund stapelweise in -webkit-mask ändern, wie folgt

Am Beispiel von SVG lautet der Ersatz wie folgt

.tab-item{
  Position: relativ;
  Polsterung: 10px 35px;
  Cursor: Zeiger;
  Hintergrund: #F8EAE7;
  -webkit-mask-image: URL("data:image/svg+xml,%3Csvg Breite='100' Höhe='100' Ansichtsfeld='0 0 100 100' Füllung='keine' xmlns='http://www.w3.org/2000/svg'%3E%3CPfad Füllregel='evenodd' Clipregel='evenodd' d='M100 100C44.772 100 0 55.228 0 0v100h100z' Füllung='%23F8EAE7'/%3E%3C/svg%3E"),
    URL ("data:image/svg+xml,%3Csvg Breite='100' Höhe='100' Ansichtsfeld='0 0 100 100' Füllung='keine' xmlns='http://www.w3.org/2000/svg'%3E%3CPfad Füllregel='evenodd' Clipregel='evenodd' d='M0 100c55.228 0 100-44.772 100-100v100H0z' Füllung='%23F8EAE7'/%3E%3C/svg%3E"),
    url("Daten:Bild/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='12' Breite='100%' Höhe='100%' Füllung='%23F8EAE7'/></svg>");
  -Webkit-Maskengröße: 12px 12px, 12px 12px, berechnet (100 % – 24px) berechnet (100 % + 12px);
  -webkit-mask-position: rechts unten, links unten, oben in der Mitte;
  -webkit-mask-repeat: keine Wiederholung;
}

Jetzt ist es einfach, die Hintergrundfarbe zu steuern. Wenn Sie die Hintergrundfarbe ändern müssen, ändern Sie sie einfach direkt.

.tab-item:hover{
  Hintergrund: #F2D0CA;
}

Den vollständigen Code finden Sie unter chrome-tab-mask (codepen.io).

Wenn Sie gerne **Bilder ausschneiden**, können Sie außerdem auch „mask-border“ verwenden. Dies ist grundsätzlich dasselbe wie das obige „border-image“, verfügt jedoch über einen Maskierungseffekt.

Oder verwenden Sie dieses Bild zum Ausschneiden

Die Code-Implementierung ist

.tab-item{
  /*…*/
  -Webkit-Maske-Box-Image: URL ("Daten: Bild/SVG+XML,%3CSVG Width = '67 'Höhe = '33' Viewbox = '0 67 33' fill = 'none' xmlns = 'http: //ww.w.w3.org/2000/2000/svg'%3E & sup; 27 0C-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15H67C-8,284 0-15-6.716-15-15V-6c0-6.627-5.373-12-12-12H27Z 'FILD 2 2 2 23F8EAGR.
} 

Den vollständigen Code finden Sie unter chrome-tab-mask-border (codepen.io).

Derzeit noch im Entwurf, gibt es eine alternative Eigenschaft -webkit-mask-box-image, die verwendet werden kann

VI. Zusammenfassung und Erläuterung

Oben wurden fünf verschiedene Layoutmethoden vorgestellt. Im Folgenden sind die wichtigsten Punkte der Implementierung zusammengefasst:

1. Durch die Kombination von Rahmenradius und Clip-Pfad können konkav abgerundete Ecken erzielt werden
2. Farbverläufe sind universell. Wiederholte Inhalte sollten möglichst durch Hintergrundwiederholung vervollständigt werden.
3. Mit dem Rect in SVG kann ein adaptives abgerundetes Rechteck realisiert werden, das auch als Hintergrund verwendet werden kann.
4. Sie können mehrere SVGs als mehrere Hintergründe verwenden und die Größe und Position jedes einzelnen bestimmen.
5. Um einen adaptiven Effekt zu erzielen, müssen Sie auf die Einstellung der Rahmenbreite achten.
6. Maske kann direkt Farbverlauf oder SVG als Maskenebene verwenden, wodurch die Hintergrundfarbe bequemer geändert werden kann
7. mask-border ist ähnlich wie border-image, wird aber derzeit nur vom -webkit- Kernel unterstützt

Dies ist das Ende dieses Artikels über die Techniken zur Implementierung der Chrome-Tableiste mit CSS. Weitere relevante CSS-Inhalte zur Chrome-Tableiste finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!