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="http://m.miracleart.cn/link/3dc023ccc7e0bd23ce2d4427756fd03c">Startseite</a>
  <a href="http://m.miracleart.cn/link/3dc023ccc7e0bd23ce2d4427756fd03ccategories/articles/">Blog</a>
  <a aria-current="page" href="http://m.miracleart.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!