5 styles de liste CSS simples et pratiques que vous pouvez copier et coller

Qui n'aime pas une bonne liste? Nous les utilisons constamment dans notre balisage pour diverses situations. Aujourd'hui, nous allons examiner quelques exemples simples et pratiques que vous pouvez voler et utiliser dans votre propre travail.

Nous commençons avec une liste verticale animée amusante, puis nous coiffons une liste avec des vignettes et du texte, une autre avec juste des images et enfin une liste ordonnée dans laquelle les numéros sont stylés différemment du reste du type. Il y a une tonne de bonnes choses à apprendre ici alors sautons dedans!

HelvetiList

Pour notre première liste, nous allons commencer par un design simple, minimal mais super attrayant qui dépend fortement de la beauté de la typographie. Nous utiliserons certains styles fins d'Helvetica et ajouterons une animation fluide en vol stationnaire.

Démo: Découvrez la démo et le code sur CodePen.

HTML

Notre balisage est extrêmement simple. Créez un div (vous voudrez probablement une classe ou un ID dans un projet réel), puis ajoutez un en-tête et une liste non ordonnée avec cinq éléments de liste.

<h2>HelvetiList</h2> <ul> <li>Zurich</li> <li>Genève</li> <li>Winterthur</li> <li>Lausanne</li> <li>Luzerne</li> </ul>

CSS

Comme nous l'avons vu dans la capture d'écran ci-dessus, les éléments de la liste utilisent des caractères très minces, des séparateurs subtils et un état de survol qui agrandit la police. Pour commencer, donnez une largeur à la div et définissez vos styles h2 génériques.

Ensuite, appliquez un type de type liste de type none pour supprimer les puces et réinitialiser les marges ou les bourrages éventuels. Pour les éléments de liste réels, j'ai appliqué une légère bordure inférieure, qui fournit ce petit séparateur. J'ai effectivement utilisé le sélecteur de dernier enfant, mais ce n'est pas grave si un navigateur ne le reconnaît pas et décide de placer une bordure supplémentaire en bas.

Notez également que toutes les fois que j'ai défini la police, j'ai utilisé un raccourci CSS et appliqué différents poids. Pour finir, j'ai appliqué certains styles de lien et défini la transition pour agrandir la police et changer la couleur de fond en survol.

div {width: 200px; } h2 {font: 400 40px / 1.5 Helvetica, Verdana, sans serif; marge: 0; rembourrage: 0; } ul {list-style-type: none; marge: 0; rembourrage: 0; } li {font: 200 20px / 1.5 Helvetica, Verdana, sans serif; border-bottom: 1px solid #ccc; } li: last-child {border: none; } li a {text-decoration: none; couleur: # 000; bloc de visualisation; largeur: 200px; -webkit-transition: facilité de taille de police 0.3s, facilité de couleur de fond 0.3s; -moz-transition: facilité de taille de police 0.3s, facilité de couleur de fond 0.3s; -o-transition: facilité de taille de police 0.3s, facilité de couleur de fond 0.3s; -ms-transition: facilité de taille de police 0.3s, facilité de couleur de fond 0.3s; transition: facilité de taille de police 0.3s, facilité de couleur de fond 0.3s; } li a: hover {taille de la police: 30px; arrière-plan: # f6f6f6; }

Liste de vignettes

Un format très courant que vous verrez pour les listes est votre texte de base (miniature et texte). configuration, ce qui est un excellent moyen d’ajouter un bel intérêt visuel à une liste de paragraphes par ailleurs ennuyeuse.

Il s'agit d'un style de liste extrêmement polyvalent que vous pouvez utiliser sur n'importe quel nombre de projets. Voyons voir comment ça fonctionne.

Démo: Découvrez la démo et le code sur CodePen.

HTML

Le HTML sur celui-ci est un peu plus compliqué. Chaque élément de la liste doit avoir trois enfants: une image, un titre et un paragraphe. Les images que j'utilise mesure 100 x 100 pixels. Gardez cela à l'esprit si vous souhaitez personnaliser le format. Dans l’ensemble, c’est toujours un balisage très simple qui ne devrait pas vous déranger le moins du monde.

<ul> <li> <img src="//lesptitesaffairesdemayl.be/img/images_1/5-simple-and-practical-css-list-styles-you-can-copy-and-paste_3.jpg"> <h3>HTML</h3> <p>Le balisage pour a la structure de base de <em>liste-article> ancre> image</em>. Si vous n'êtes pas habitué à voir ce code, il peut paraître étrange d'utiliser une liste pour cela, mais c'est vraiment ce que vous créez: une grande liste d'images. Le fait qu'elles soient disposées dans une grille n'annule pas l'idée qu'il ne s'agit que d'une grande liste. </p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/5-simple-and-practical-css-list-styles-you-can-copy-and-paste_4.jpg"> <h3>HTML</h3> <p>Avec la grille de vignettes ci-dessus, nous avons déjà appris à faire en sorte que les éléments d'une liste flottante apparaissent côte à côte. Nous allons donc utiliser la même technique, mais avec moins d'éléments. Notez que j'ai jeté dans un? Active? classe, qui est une pratique assez standard que nous allons utiliser pour dire à l'utilisateur quelle page ils sont actuellement.</p> <textarea wrap="soft" readonly=""> <ul> <li>Accueil</li> <li>Sur</li> <li>Portefeuille</li> <li>Contact</li> </ul>

CSS

Ici, nous avons placé nos éléments de liste à gauche, mis une bordure uniquement à droite, enlevé les styles de lien par défaut et configuré les miens, puis stylisé les états de survol et actif.

* {marge: 0; rembourrage: 0; } nav {margin: 50px; } ul {débordement: auto; type de style de liste: aucun; } li {hauteur: 25px; float: gauche; marge droite: 0px; border-right: 1px solide #aaa; rembourrage: 0 20px; } li: last-child {border-right: none; } li a {text-decoration: none; couleur: #ccc; police: 25px / 1 Helvetica, Verdana, sans serif; text-transform: majuscule; -webkit-transition: tous les 0.5s facilité; -moz-transition: tous les 0.5s facilité; -o-transition: tous les 0.5s de facilité; -ms-transition: tous les 0.5s facilité; transition: tous les 0,5s sont faciles; } li a: survol {color: # 666; } li.active a {font-weight: bold; couleur: # 333; }

Liste des grands nombres commandés

N'oublions pas que toutes les listes ne sont pas des listes non ordonnées! Il y a certainement beaucoup d'applications utiles pour les listes ordonnées. Une chose vraiment délicate à faire avec les listes ordonnées est de donner aux numéros un style différent de celui de l’autre texte. Voyons comment cela fonctionne.

Démo: Découvrez la démo et le code sur CodePen.

HTML

Maintenant, comment j'ai construit cela va être super controversé. Comme vous pouvez le constater, je saisis manuellement les chiffres, même si HTML le fera automatiquement pour vous. Il y a une bonne raison pour cela cependant.

Pour lancer cette idée, j'ai jeté un paragraphe dans les éléments de la liste, puis codé le type li et le type li> p de différentes manières. Cependant, essayer de tout aligner correctement avec cette méthode était un cauchemar total. En fin de compte, pour résoudre ce problème, le CSS était si désordonné et si méchant que je l’avais abandonné complètement au profit de cette méthode plus simple, qui permet en réalité un CSS clair et simple.

<ol> <li>1.<p>Lorem ipsum dolor sit amet, consectetur elit adipiscing. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo en augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero une élit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar à lorem. Vivamus varius condimentum dolor. </p></li> <li>2.<p>Lorem ipsum dolor sit amet, consectetur elit adipiscing. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo en augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li> <li>3.<p>Lorem ipsum dolor sit amet, consectetur elit adipiscing. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo en augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li> </ol>

CSS

Comme vous pouvez le voir dans le code ci-dessous, ce que j'ai fait ici a été de laisser les nombres par défaut, puis de régler mes étendues sur absolu afin que je puisse les pousser à la gauche des paragraphes, ce qui a nécessité un peu de remplissage supplémentaire. Ce n’est peut-être pas la solution la plus jolie du point de vue du code, mais c’est le moyen le plus simple et le plus simple que je puisse trouver pour le faire sans bugs de positionnement bizarres.

div {width: 500px; marge: 10px} ol {color: #ccc; type de style de liste: aucun; } ol li {position: relative; police de caractères: gras italique 45px / 1,5 Helvetica, Verdana, sans serif; marge inférieure: 20 px; } li p {font: 12px / 1.5 Helvetica, sans-serif; padding-left: 60px; couleur: # 555; } span {position: absolute; }

Conclusion

Voilà, vous avez cinq styles de liste pratiques, très simples mais mortels, que vous pouvez copier et coller dans votre propre code. Si vous souhaitez partager d'autres idées de liste de créations, faites-le nous savoir dans les commentaires ci-dessous!