Oh, die vielen Möglichkeiten, dreieckige Brotbänder zu machen!

Verschiedene Möglichkeiten, Dreiecksbrotkrumenstreifen zu machen

In diesem Artikel wird untersucht, wie eine Reihe von miteinander verbundenen Links erstellt werden, die den V-förmigen Formen und Kerben in jedem Block in der Schritt-für-Schritt-Breadcrumb-Navigation ähnlich erscheinen.

Dieser Stil ist im Webdesign üblich, wie z. B. mehrstufige Formulare und Website-Breadcrumb-Navigation. Wir nennen diese Stile "Banding", um das Verständnis einfach zu verstehen.

Wie viele Webelemente können wir diese Streifen auf verschiedene Weise erstellen! Ich habe eine Demo-Seite mit mehreren Methoden erstellt, z. B. CSS-Dreiecke, SVG-Hintergründe und CSS-Clip-Pfad-Eigenschaften.

HTML -Struktur

Die HTML -Struktur jeder Demonstration ist im Grunde dasselbe, einschließlich eines übergeordneten Elements<nav></nav> Der Link zu Elementen und als Kinderelemente.

<nav aria-label="breadcrumbs" role="navigation"> <a href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03c">Startseite</a>
  <a href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03ccategories/articles/">Blog</a>
  <a aria-current="page" href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03carticles/building-an-animated-sticky-header-with-custom-offset/">Artikel</a>
</nav>

Bitte beachten Sie, dass diese Elemente gemäß dem A11Y Style Guide den Barrierefreiheitsstandards entsprechen sollten. Beim Entwerfen von Komponenten ist es wichtig, die Zugänglichkeit zu berücksichtigen und die Zugänglichkeit zu Beginn einzuführen, ist der beste Weg, um das Problem „Vergessen Sie, Barrierefreiheit hinzufügen“ zu vermeiden.

Grundstil

Für diese Art von Stil müssen wir sicherstellen, dass die Elementgröße korrekt ist. Dazu werden wir die Schriftgröße .ribbon (wir nennen diese Elemente "Bänder") das Element definiert und dann die EM -Einheit auf dem untergeordneten Element (Link) verwenden.

 /* Definieren Sie die Schriftgröße des Verpackungselements*/
.Schleife {
  Schriftgröße: 15px;
}

/* Verwenden Sie EM -Einheiten, um die Größe des Streifenelements*/zu definieren
.Ribbon__Element {
  Schriftgröße: 1,5EM;
  Buchstabenabteilung: 0,01EM;
  Zeilenhöhe: 1.333EM;
  Polsterung: 0,667EM 0,667EM 0,667EM 1,333EM;
}

Diese Technik ist vorteilhaft, um die Dreiecksformgröße für jeden Streifen zu definieren, da wir die gleiche Größe verwenden, um das Dreieck zu berechnen. Da wir EM -Einheiten verwenden, um die Größe von gestreiften Elementen zu berechnen, können wir alle Elemente ändern, indem wir die Schriftgröße des Wrapper -Elements neu definieren.

Verwenden wir CSS -Netz für Layout, denn das können wir. Wir können dies mit einer breiteren Reihe von Browser-fähigen Ansätzen tun, aber dies hängt von Ihren Support-Anforderungen ab.

Wir werden vier Spalten definieren:

• Für Streifenelemente werden drei Säulen verwendet
• Eine Spalte wird verwendet, um das Abstandsproblem zu lösen. Wie es ist, wird die richtige Pfeilform außerhalb der Streifenbaugruppe platziert, die das ursprüngliche Layout durcheinander bringen kann.

 /* Verpackungselemente* Wir verwenden CSS -Netz, aber stellen Sie sicher, dass es Ihren Browser -Support -Anforderungen erfüllt.
 * Nehmen wir an, dass Autoprefixer für Anbieter -Präfixe und -attribute verwendet wird.
 */

.Schleife {
  Anzeige: Grid;
  Raster-Lack: 1PX;
  Grid-Template-Säulen: Wiederholung (automatische Fill, 1FR) 1EM; /* Füllen Sie automatisch drei Streifenelemente mit einer schmalen Säule, um das Größenproblem*//////
}

Wenn Sie Streckelemente vermeiden möchten, können Sie das Netz unterschiedlich definieren. Zum Beispiel können wir max-content verwenden, um die Spalten gemäß der Inhaltsgröße zu ändern. (Beachten Sie jedoch, dass max-content in einigen wichtigen Browsern noch nicht unterstützt wird.)

 /* Lassen Sie die Stripe -Spalte entsprechend der maximalen Inhaltsgröße*/einstellen
.Ribbon-auto {
  Grid-Template-Säulen: Wiederholung (3, Max-Inhalt) 1EM;
}

Ich glaube, es gibt viele verschiedene Möglichkeiten zum Layout. Ich mag diesen Ansatz, weil er die genaue Lücke zwischen gestreiften Elementen ohne komplexe Berechnungen definiert.

Barrierefreiheit ist mehr als nur das Hinzufügen von Aria -Attributen. Es umfasst auch Farbkontrast und Lesbarkeit sowie Hinzufügen von Schwebe- und Fokuszuständen. Wenn Sie keine Umrissstile mögen, können Sie andere CSS-Eigenschaften wie Box-Shadow verwenden.

 /* Verwenden Sie die aktuelle Linkfarbe, fügen Sie aber unterstrichen
.Ribbon__Element: schwebe,
.Ribbon__Element: aktiv {
  Farbe: Erbe;
  Textdekoration: Unterstreichung;
}

/* Löschen Sie den Standard -Umrissstil und verwenden Sie den eingebetteten Box -Schatten, um den Fokuszustand anzugeben*/
.Ribbon__Element: Fokus {
  Box -Shadow: Einschub 0 -3px 0 0 #343435;
  Umriss: Keine;
}

Erstellen Sie einzigartige Dreiecksformen

Wir haben mehrere Optionen, wenn wir das Dreieck am Ende jedes Streifens definieren. Wir können:

1. Erstellen Sie Dreiecke mit Pseudoelementen und Grenzen
2. Verwenden von SVG-Hintergrundbild auf Pseudoelement
3. Verwenden von Inline -SVG -Bildern
4. Erstellen Sie Clip-Pfad mit polygon() -Funktion

Lassen Sie uns in jeden einzeln graben.

Methode 1: Grenzmethode

Erstens sollten wir die Breite und Höhe des Elements auf Null setzen, damit es die Pseudoelemente, mit denen wir das Dreieck zeichnen, nicht beeinträchtigt. Wir sollten dann das Dreieck mit dem Rand zeichnen, insbesondere einen festen linken Rand, der der Hintergrundfarbe entspricht, damit er sich mit dem Rest des Streifens verbindet. Lassen Sie uns als nächstes die oberen und unteren Grenzen definieren und transparent einstellen. Der Trick hier ist, die Größe des Randes zu berechnen.

Die Inhaltsgröße unseres Stripe -Elements ist Zeilen -Hochwerte sowie obere und untere Polsterung:

 <code>1.333em 0.667em 0.667em = 2.667em</code>

Dies bedeutet, dass unsere oberen und unteren Grenzen halb so groß sind. Das einzige, was noch übrig ist, ist, das Element absolut auf die richtige Seite der Komponente zu positionieren.

 /* Links Pfeil*/
.Ribbon-Alpha .Ribbon__Element: Vor {{
  /* Machen Sie die Inhaltsgröße Null*/////
  Inhalt: '';
  Höhe: 0;
  Breite: 0;

  /* Verwenden Sie Grenzen, um Pseudo-Elemente zu machen, die Streifengröße besitzen*/
  Grenzboden: 1,333EM Solid transparent;
  Border-Links: 0,667EM Solid #FFF;
  Grenztop: 1,333EM Solid transparent;

  /* Positionieren Sie das Element absolut links vom Streifenelement*/
  Position: absolut;
  Top: 0;
  unten: 0;
  links: 0;
}

/* Rechts Pfeil*/
.Ribbon-Alpha .Ribbon__Element: Nach {{
  /* Machen Sie die Inhaltsgröße Null*/////
  Inhalt: '';
  Höhe: 0;
  Breite: 0;

  /* Verwenden Sie Grenzen, um Pseudo-Elemente zu machen, die Streifengröße besitzen*/
  Grenzboden: 1,333EM Solid transparent;
  Grenze links: 0,667EM Fest;
  Grenztop: 1,333EM Solid transparent;

  /* Positionieren Sie das Element absolut rechts vom Streifenelement und drücken Sie es nach draußen*/
  Position: absolut;
  Top: 0;
  Rechts: 0;
  unten: 0;
  -Webkit-Transformation: Translatex (0,667EM);
  Transformation: Translatex (0,667EM);
}

Da das richtige Dreieck mit der Hintergrundfarbe des Streifens übereinstimmen sollte, denken Sie daran, den Pseudoelementen jedes Streifens die richtige Randfarbe hinzuzufügen.

 /* Rechts Pfeil des ersten Elements*/
.Ribbon-Alpha .Ribbon__Element: n-Kind (1): Nach {{{
  Border-Links-Farben: #11d295;
}

/* Rechts Pfeil des zweiten Elements*/
.Ribbon-Alpha .Ribbon__Element: n-Kind (2): Nach {{{
  Border-Links-Farben: #EF3675;
}

/* Rechts Pfeil des dritten Elements*/
.Ribbon-Alpha. Ribbon__Element: n-Kind (3): Nach {{{
  Border-Links-Farben: #4cd4e9;
}

Das war's!

Methode 2: Hintergrundbildmethode

Wir können auch Dreiecke mit Hintergrundbildern erstellen. Dies erfordert das Erstellen von Bildern, die dem Design entsprechen, das etwas umständlich ist, aber nach wie vor möglich ist. Wir werden SVG hier verwenden, weil es bei jeder Lösung glatt ist.

Im Gegensatz zur Grenzdreiecksmethode möchten wir die Höhe des Pseudoelements bis zur Höhe des Streifenelements (oder 100%) übereinstimmen. Die Breite der Komponente sollte mit der linken Grenzbreite des Grenzdreiecks übereinstimmen, was in unserem Fall 0,666666EM beträgt. Dann sollten wir ein weißes Dreieck als Hintergrundbild auf dem linken Dreieck und dann ein Farbdreiecksbild auf dem rechten Dreieck verwenden. Auch hier verwenden wir die absolute Positionierung, um das Dreieck auf der richtigen Seite des Streifenelements zu platzieren.

 /* Links Pfeil*/
.Ribbon-Beta .Ribbon__Element: Vor {{
  /* Pfeilgröße definieren*/
  Inhalt: '';
  Höhe: 100%;
  Breite: 0,666666EM;

  /* Definieren Sie das Hintergrundbild, das die Hintergrundfarbe entspricht*/
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSI jzmzmij48cgf0AcbkpsjtnsaxnsayMcAXMGGTNDB6iiBMAWXSLXJ1BGU9IMV2ZW5VZGQIIIRHRYYW5ZZM9YBT0iBWF0CMML4KDAGLTGLTGMCAYNSYNSSYNSSKILZILZILZILZILZILZILZILZSKILZSKILZSKILZSKILZSKILZSKILZSKILZSKILZSKILZSKILZSKILZISKILZ4L3N2ZZ4 =);
  Hintergrundposition: Mitte links;
  Hintergrundrepeat: No-Repeat;
  Hintergrundgröße: 100%;

  /* Positionieren Sie das Element absolut links vom Streifenelement*/
  Position: absolut;
  unten: 0;
  Top: 0;
  links: 0;
}

/* Rechts Pfeil*/
.Ribbon-Beta .Ribbon__Element: Nach {{
  /* Pfeilgröße definieren*/
  Inhalt: '';
  Höhe: 100%;
  Breite: 0,667EM;

  /* Hintergrundbildeigenschaften definieren*//
  Hintergrundposition: Mitte links;
  Hintergrundrepeat: No-Repeat;
  Hintergrundgröße: 100%;

  /* Positionieren Sie das Element absolut rechts vom Streifenelement und drücken Sie es nach draußen*/
  Position: absolut;
  Top: 0;
  Rechts: 0;
  unten: 0;
  -Webkit-Transformation: Translatex (0,667EM);
  Transformation: Translatex (0,667EM);
}

/* Definieren Sie das Hintergrundbild, das der Hintergrundfarbe des ersten Elements entspricht*/
.Ribbon-Beta .Ribbon__Element: N-Child (1): Nach {{{
  Hintergrundbild: URL (Daten: Bild/SVG xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjMTFkMjk1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cmml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

/* Definieren Sie das Hintergrundbild, das der Hintergrundfarbe des zweiten Elements entspricht*/
.Ribbon-Beta .Ribbon__Element: N-Kind (2): Nach {{{
  Hintergrundbild: URL (Daten: Bild/SVG xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjZWYzNjc1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cmml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

/* Definieren Sie das Hintergrundbild, das der Hintergrundfarbe des dritten Elements entspricht*/
.Ribbon-Beta .Ribbon__Element: N-Child (3): Nach {{{
  Hintergrundbild: URL (Daten: Bild/SVG xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SjtnsaxnsaymcaxMGGTNDB6iiBMAWXSPSIJNGNGGU5iiBMAWXSLXJ1BGU9IMV2ZW5VZGQIIHRYYW5zzM9YBT0iBWF0CML4KDAGLTGLTGMCAYNSAYNSKILZSKILZ48L3N2ZZ4 =);
}

Das war's!

Der Rest ähnelt dem Originaltext, mit der Ausnahme, dass die Anweisungen eingestellt und ersetzt werden, sodass der Originaltext unverändert bleibt. Aufgrund von Platzbeschränkungen werde ich es hier nicht wiederholen. Weitere Informationen finden Sie im Originaltext, um den verbleibenden Teil weiter zu untersuchen.

Das obige ist der detaillierte Inhalt vonOh, die vielen Möglichkeiten, dreieckige Brotbänder zu machen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!