Diverses fa?ons de faire des bandes de miettes de pain triangulaire

Cet article explore comment créer une série de liens interconnectés qui apparaissent similaires aux formes et encoches en forme de V dans chaque bloc vu dans la navigation au fil d'ancienne étape par étape.

Ce style est courant dans la conception Web, tels que les formulaires en plusieurs étapes et la navigation au fil du site Web. Nous appelons ces styles "Banding" pour faciliter la compréhension.

Comme de nombreux éléments Web, nous pouvons créer ces rayures de différentes manières! J'ai créé une page de démonstration avec plusieurs méthodes, telles que l'utilisation des triangles CSS, des arrière-plans SVG et des propriétés CSS Clip-Path.

Structure HTML

La structure HTML de chaque démonstration est fondamentalement la même, y compris un élément parent<nav></nav> Le lien avec les éléments et les éléments enfants.

<nav aria-label="breadcrumbs" role="navigation"> <a href="http://ipnx.cn/link/3dc023ccc7e0bd23ce2d4427756fd03c">Page d'accueil</a>
  <a href="http://ipnx.cn/link/3dc023ccc7e0bd23ce2d4427756fd03ccategories/articles/">bloguer</a>
  <a aria-current="page" href="http://ipnx.cn/link/3dc023ccc7e0bd23ce2d4427756fd03carticles/building-an-animated-sticky-header-with-custom-offset/">article</a>
</nav>

Veuillez noter que, selon le guide de style A11Y, ces éléments doivent être conformes aux normes d'accessibilité. Lors de la conception de composants, il est important de considérer l'accessibilité et d'introduire l'accessibilité au départ est le meilleur moyen d'éviter le problème ?oublier d'ajouter l'accessibilité?.

Style de base

Pour ce type de style, nous devons nous assurer que la taille de l'élément est correcte. Pour ce faire, nous définirons la taille de la police .ribbon (nous appelons ces éléments "bandes") envelopper l'élément, puis utilisons l'unité EM sur l'élément enfant (lien).

 / * Définissez la taille de la police de l'élément d'emballage * /
.Ribbon {
  taille de police: 15px;
}

/ * Utilisez des unités EM pour définir la taille de l'élément de bande * /
.Ribbon__Element {
  taille de police: 1.5EM;
  Espacement des lettres: 0,01EM;
  hauteur de ligne: 1.333em;
  rembourrage: 0,667EM 0,667EM 0,667EM 1.333EM;
}

Cette technique est bénéfique pour définir la taille de la forme du triangle pour chaque bande, car nous utiliserons la même taille pour calculer le triangle. Puisque nous utilisons des unités EM pour calculer la taille des éléments rayés, nous pouvons redimensionner tous les éléments en redéfinissant la taille de la police de l'élément de wrapper.

Utilisons la grille CSS pour la mise en page, car nous pouvons le faire. Nous pouvons le faire en utilisant une gamme plus large d'approches compatibles avec le navigateur, mais cela dépend de vos besoins de support.

Nous définirons quatre colonnes:

• Trois colonnes sont utilisées pour les éléments de rayures
• Une colonne est utilisée pour résoudre le problème d'espacement. En l'état, la forme de la flèche droite sera placée à l'extérieur de l'assemblage de la bande, ce qui peut gacher la disposition d'origine.

 / * éléments d'emballage * Nous utilisons la grille CSS, mais assurez-vous qu'elle répond aux exigences de support de votre navigateur.
 * Supposons que l'autopréfixer soit utilisé pour les préfixes et attributs des fournisseurs.
 * /

.Ribbon {
  Affichage: grille;
  grille-gap: 1px;
  Grid-Template-Colonnes: répéter (remplissage automatique, 1FR) 1EM; / * Remplissez automatiquement trois éléments de rayures avec une colonne étroite pour résoudre le problème de taille * /
}

Si vous souhaitez éviter d'étirer des éléments de bande, vous pouvez définir le maillage différemment. Par exemple, nous pouvons utiliser max-content pour redimensionner les colonnes en fonction de la taille du contenu. (Cependant, notez que max-content n'est pas encore pris en charge dans certains navigateurs majeurs.)

 / * Adoptez la colonne de bande ajusté en fonction de la taille maximale du contenu * /
.Ribbon - Auto {
  Grid-Template-Colonnes: répéter (3, contenu max) 1EM;
}

Je crois qu'il existe de nombreuses fa?ons différentes de mettre en place. J'aime cette approche car elle définit l'écart exact entre les éléments rayés sans calculs complexes.

L'accessibilité est plus que d'ajouter des attributs Aria. Il comprend également le contraste et la lisibilité des couleurs, ainsi que l'ajout d'états de survol et de mise au point. Si vous n'aimez pas les styles de contour, vous pouvez utiliser d'autres propriétés CSS telles que Box-Shadow.

 / * Utilisez la couleur actuelle du lien, mais ajoutez le soulignement sur plané * /
.Ribbon__Element: volant,
.Ribbon__Element: actif {
  Couleur: hériter;
  Décoration du texte: soulignement;
}

/ * Effacer le style de contour par défaut et utiliser l'ombre de la bo?te embarquée pour indiquer l'état de mise au point * /
.Ribbon__Element: focus {
  Box-Shadow: encadré 0 -3px 0 0 # 343435;
  Aper?u: aucun;
}

Créer des formes de triangle uniques

Nous avons plusieurs options lors de la définition du triangle à la fin de chaque bande. Nous pouvons:

1. Créer des triangles avec des pseudo-éléments et des frontières
2. Utilisation de l'image d'arrière-plan SVG sur Pseudo-Element
3. En utilisant des images SVG en ligne
4. Créer un chemin à polygon()

Discutons dans chacun.

Méthode 1: Méthode de la bordure

Tout d'abord, nous devons régler la largeur et la hauteur de l'élément à zéro afin qu'il n'interfère pas avec les pseudo-éléments que nous utilisons pour dessiner le triangle. Nous devons ensuite dessiner le triangle en utilisant la bordure, en particulier, définir une bordure gauche solide qui correspond à la couleur d'arrière-plan, afin qu'elle se mélange avec le reste de la bande. Ensuite, définissons les bordures supérieure et inférieure et letons-le sur transparent. L'astuce ici est de calculer la taille de la bordure.

La taille du contenu de notre élément de rayures est une valeur élevée en ligne plus le rembourrage supérieur et inférieur:

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

Cela signifie que nos bordures supérieures et inférieures devraient avoir la moitié de la taille de cela. La seule chose qui reste est de positionner absolument l'élément sur le bon c?té du composant.

 / * Flèche gauche * /
.Ribbon - alpha .Ribbon__Element: avant {
  / * Rendre la taille du contenu zéro * /
  contenu: '';
  hauteur: 0;
  Largeur: 0;

  / * Utiliser les frontières pour faire en sorte que les pseudo-éléments fassent la taille de la bande * / /
  Border-Bottom: 1.333em solide transparent;
  Border-Left: 0.667em solide #FFF;
  Border-top: 1.333em solide transparent;

  / * Positionnez l'élément absolument à gauche de l'élément de bande * /
  Position: absolue;
  en haut: 0;
  en bas: 0;
  à gauche: 0;
}

/ * Flèche droite * /
.Ribbon - alpha .Ribbon__Element: après {
  / * Rendre la taille du contenu zéro * /
  contenu: '';
  hauteur: 0;
  Largeur: 0;

  / * Utiliser les frontières pour faire en sorte que les pseudo-éléments fassent la taille de la bande * / /
  Border-Bottom: 1.333em solide transparent;
  Border-Left: 0,667em solide;
  Border-top: 1.333em solide transparent;

  / * Positionnez l'élément absolument à droite de l'élément de bande et poussez-le à l'extérieur * /
  Position: absolue;
  en haut: 0;
  à droite: 0;
  en bas: 0;
  -Webkit-Transform: Translatex (0.667EM);
  transformée: tradlatex (0,667EM);
}

étant donné que le triangle droit doit correspondre à la couleur d'arrière-plan de la bande, n'oubliez pas d'ajouter la bonne couleur de bordure aux pseudo-éléments de chaque bande.

 / * Flèche droite du premier élément * /
.Ribbon - alpha .Ribbon__Element: nth-child (1): après {
  Border-Left-Color: # 11D295;
}

/ * Flèche droite du deuxième élément * /
.Ribbon - alpha .Ribbon__Element: nth-child (2): après {
  Border-Left-Color: # EF3675;
}

/ * Flèche droite du troisième élément * /
.Ribbon - alpha .Ribbon__Element: nth-child (3): après {
  Border-Left-Color: # 4CD4E9;
}

C'est ?a!

Méthode 2: Méthode d'image d'arrière-plan

Nous pouvons également créer des triangles à l'aide d'images d'arrière-plan. Cela nécessite de créer des images qui correspondent à la conception, ce qui est un peu lourd, mais qui est toujours tout à fait possible. Nous utiliserons SVG ici car il sera fluide à n'importe quelle résolution.

Contrairement à la méthode du triangle frontalier, nous voulons correspondre à la hauteur de la pseudo-élément à la hauteur de l'élément de bande (ou 100%). La largeur du composant doit correspondre à la largeur de limite gauche du triangle frontalier, qui dans notre cas est de 0,666666em. Ensuite, nous devons utiliser un triangle blanc comme image d'arrière-plan sur le triangle gauche, puis une image de triangle couleur sur le triangle droit. Encore une fois, nous utilisons un positionnement absolu pour placer le triangle du bon c?té de l'élément de bande.

 / * Flèche gauche * /
.Ribbon - Beta .Ribbon__Element: avant {
  / * Définir la taille de la flèche * /
  contenu: '';
  hauteur: 100%;
  Largeur: 0,666666EM;

  / * Définir l'image d'arrière-plan qui correspond à la couleur d'arrière-plan * /
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSI JZMZMIJ48CGF0ACBKPSJTNSAXNSAYMCAXMGGTNDB6IIBMAWXSLXJ1BGU9IMV2ZW5VZGQIIHYYW5ZZM9YBT0IBWF0CMML4KDAGLTEGLTEGMCAYNSAYNSKILZ48L3N2ZZ4 =);
  Position d'arrière-plan: centre à gauche;
  République de fond: sans répétition;
  taille arrière: 100%;

  / * Positionnez l'élément absolument à gauche de l'élément de bande * /
  Position: absolue;
  en bas: 0;
  en haut: 0;
  à gauche: 0;
}

/ * Flèche droite * /
.Ribbon - Beta .Ribbon__Element: After {
  / * Définir la taille de la flèche * /
  contenu: '';
  hauteur: 100%;
  Largeur: 0,667EM;

  / * Définir les propriétés de l'image d'arrière-plan * /
  Position d'arrière-plan: centre à gauche;
  République de fond: sans répétition;
  taille arrière: 100%;

  / * Positionnez l'élément absolument à droite de l'élément de bande et poussez-le à l'extérieur * /
  Position: absolue;
  en haut: 0;
  à droite: 0;
  en bas: 0;
  -Webkit-Transform: Translatex (0.667EM);
  transformée: tradlatex (0,667EM);
}

/ * Définir l'image d'arrière-plan qui correspond à la couleur d'arrière-plan du premier élément * /
.Ribbon - Beta .Ribbon__Element: Nth-Child (1): après {
  Image d'arrière-plan: URL (données: image / SVG xml; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkp Sjtnsaxnsaymcaxmggtndb6iibMawxspsijmtfkmjk1iiBMawxslxj1bgu9Imv2zw5vzgqiihryyw5zzm9ybt0ibwf0cmml4kdagltegltegmcaynsaynskilz48l3n2zz4 =);
}

/ * Définissez l'image d'arrière-plan qui correspond à la couleur d'arrière-plan du deuxième élément * /
.Ribbon - Beta .Ribbon__Element: Nth-Child (2): après {
  Image d'arrière-plan: URL (données: image / SVG xml; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkp SjtnsaxnsaymCaxmggtndb6iiBMawxspsijzwyznjc1iiBMAWXSlXJ1BGU9IMV2ZW5VZGQIIhryyw5zzM9yBT0IBWF0CMML4KDAGLTEGLTEGMCAYNSAYNSKILZ48L3N2ZZ4 =);
}

/ * Définissez l'image d'arrière-plan qui correspond à la couleur d'arrière-plan du troisième élément * /
.Ribbon - Beta .Ribbon__Element: Nth-Child (3): après {
  Image d'arrière-plan: URL (données: image / SVG xml; base64, phn2zybozwlnahq9ijqwiib2awv3qm94psiwidagmtagndaiihdpzhropsixmcigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3znij48cgf0acbkp SjtnsaxnsaymCaxmggtndb6iiBMAWXSPSIJNGNKGU5IIBMAWXSLXJ1BGU9IMV2ZW5VZGQIIHSYYW5ZZM9YBT0IBWF0CMML4KDAGLTEGLTEGMCAYNSAYNSKILZ48L3N2ZZ4 =);
}

C'est ?a!

Les autres sont similaires au texte d'origine, sauf que les instructions sont ajustées et remplacées, laissant le texte d'origine inchangé. En raison des limitations de l'espace, je ne le répéterai pas ici. Veuillez vous référer au texte d'origine pour continuer à étudier la partie restante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!