Comment utiliser CSS pour créer de belles barres d'étape

Avec la popularité croissante des sites Web modernes, de nombreux sites Web nécessitent des opérations en plusieurs étapes, telles que des pages d'inscription, des pages de paiement, etc. Dans de telles circonstances, afin d'offrir aux utilisateurs une meilleure expérience de fonctionnement, l'introduction de marchepieds est devenue un choix courant. La barre d'étapes peut non seulement transmettre la progression actuelle à l'utilisateur, mais également fournir à l'utilisateur la fonction de visualiser les opérations historiques et de revenir facilement et rapidement aux étapes précédentes. Par conséquent, les barres d’étape sont particulièrement nécessaires lors de la conception de pages complexes.

Cet article expliquera comment utiliser CSS pour créer une belle barre d'étapes et détaillera les techniques et les étapes impliquées.

Conception et implémentation d'une barre d'étapes

Pour créer une barre d'étapes CSS, vous devez suivre les étapes suivantes :

Étape 1 : Écriture du code HTML

Dans cette étape, vous devez écrire du code HTML pour la barre d'étapes , y compris l'élément conteneur step bar et les éléments enfants pour chaque étape. Dans l'élément conteneur de la barre d'étapes, nous devons utiliser la balise "ul" pour créer une liste non ordonnée. Chaque étape nécessite l'utilisation de la balise "li" comme élément enfant. Afin d'afficher la progression de la barre d'étape, nous devons ajouter des nombres ou d'autres identifiants qui représentent la progression actuelle dans chaque élément enfant (comme le montre la figure 1). L'identifiant peut être une icône, une couleur ou une barre de progression.

<ul class="progress">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
</ul>

Figure 1 : Exemple d'identifiant d'étape

Étape 2 : Écriture CSS

Dans cette étape, vous devez écrire une feuille de style CSS pour styliser la barre d'étape. La conception de la barre d'étape CSS se compose de deux parties : l'identifiant d'étape et la barre d'étape elle-même.

Pour la conception des identifiants d'étape, diverses méthodes peuvent être utilisées, telles que l'utilisation d'icônes ou d'images, de chiffres ou d'autres éléments représentant la progression, ou de barres de progression. Voici un exemple :

.progress li::before {
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}

.progress li:first-child::before {
  border-color: #7f8fa4;
}

.progress li.active::before {
  background-color: #3498db;
  color: #fff;
}

Figure 2 : Exemple de style pour les identifiants d'étape

Dans cet exemple, nous avons utilisé une icône circulaire pour représenter chaque étape. Pour créer une icône circulaire, nous utilisons la pseudo-classe CSS "::before" pour créer un pseudo-élément devant l'élément li. Nous utilisons les propriétés "hauteur" et "largeur" ​​pour définir la hauteur et la largeur de l'icône, et la propriété "hauteur de ligne" pour centrer verticalement l'icône. Utilisez l'attribut "margin" pour centrer verticalement un élément dans son élément parent. Avec la propriété "border-radius" nous pouvons changer l'apparence de l'élément pour qu'il apparaisse circulaire. Pour sélectionner l'identifiant de l'étape, nous avons utilisé la pseudo-classe ":first-child" pour sélectionner le premier élément li.

Pour la conception de la barre de marche elle-même, nous pouvons utiliser diverses méthodes pour y parvenir. Ici, nous utilisons une barre de progression rectangulaire pour représenter la progression actuelle. Voici un exemple utilisant les attributs de couleur d'arrière-plan et d'ombre :

.progress {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.progress li {
  flex: 1;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.progress li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% + 10px);
  width: calc(100% - 10px);
  height: 4px;
  background-color: #e0e0e0;
  z-index: -1;
}

.progress li.active {
  font-weight: bold;
}

.progress li.active:not(:last-child):after {
  background-color: #3498db;
}

Figure 3 : Exemple de barre de pas

Dans cet exemple, nous utilisons l'attribut "flex" pour disposer les symboles de pas horizontalement. Nous utilisons l'attribut "list-style" pour masquer les puces par défaut de l'élément ul. Nous utilisons les propriétés "margin" et "padding" pour définir les marges et le remplissage de la barre de progression. Nous avons également ajouté un arrière-plan clair et un effet d'ombre à la barre de pas en utilisant la propriété "background-color" et la propriété "box-shadow".

Pour chaque élément d'étape, nous utilisons l'attribut "flex: 1" pour disposer uniformément les symboles d'étape dans la barre d'étape. Nous utilisons également l'attribut "font-size" pour définir la taille de la police du symbole d'étape, et l'attribut "text-align" pour centrer le symbole d'étape. Utilisez l'attribut "position" pour le positionnement relatif et le pseudo-élément ":not(:last-child):after" pour ajouter une barre de progression pour toutes les étapes sauf la dernière. Utilisez le pseudo-élément ":after" pour ajouter un pseudo-élément à l'intérieur d'un élément. Utilisez les attributs "top" et "left" pour positionner le pseudo-élément à droite du centre du symbole d'étape. Définissez les dimensions du pseudo-élément via les propriétés "width" et "height". Utilisez l'attribut "background-color" pour définir la couleur du pseudo-élément. Définissez l'attribut "z-index" sur un nombre négatif afin que le symbole d'étape recouvre le pseudo-élément. Pour sélectionner l'élément step bar, nous utilisons la pseudo-classe ":active" pour sélectionner l'élément li actuellement actif.

Troisième étape : Suivi de la conception de l'interaction

Alors que la conception de la barre d'étapes est sur le point d'être mise en œuvre, nous devons revoir l'ensemble de la conception de l'interaction pour nous assurer que chaque étape est correctement liée à la page de formulaire correspondante. Si votre site est en phase de conception axée sur le mobile, assurez-vous que le style de la barre d'étape s'adapte correctement. Vous pouvez également envisager d'ajouter des effets d'animation pour améliorer l'effet interactif de la barre d'étape afin d'améliorer l'expérience utilisateur.

Conclusion

Dans cet article, nous avons couvert quelques étapes nécessaires pour concevoir une barre d'étapes à l'aide de CSS. Pour la conception de la barre d'étapes, nous avons principalement utilisé HTML et CSS pour la créer et la rendre. Nous devons nous efforcer de concevoir des barres d'étapes pour permettre aux utilisateurs de comprendre les opérations qu'ils effectuent, aidant ainsi les utilisateurs à effectuer les opérations requises de manière plus rapide et plus économique. Bien entendu, sur la base de la conception de la barre d'étape, nous pouvons également la combiner avec de nombreux autres éléments interactifs pour améliorer encore l'interactivité du site Web.

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!