CSS - Pagination : Guide pour les débutants

Salut à toi, futur superstars du design web ! Aujourd'hui, nous allons plonger dans le monde merveilleux de la pagination CSS. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je serai ton guide amical dans cette aventure passionnante. À la fin de ce tutoriel, tu seras capable de créer une pagination belle et fonctionnelle comme un pro !

Qu'est-ce que la pagination ?

Avant de commencer, parlons de ce qu'est réellement la pagination. Imagine que tu lis un livre. Au lieu d'avoir tout le texte compressé sur une page sans fin, il est divisé en morceaux gérables - c'est la pagination dans le monde physique. Sur les sites web, la pagination aide à découper de longues listes de contenu (comme les résultats de recherche ou les articles de blog) en pages distinctes. C'est comme donner à tes utilisateurs un bouton virtuel "tourner la page" !

Maintenant, mettons les mains à la pâte et commençons !

Étape 1 : Ajouter le balisage HTML

Premièrement, nous devons créer la structure de base de notre pagination. Pense à cela comme construire le squelette de notre design.

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

Dans cet exemple, nous créons un <div> avec la classe "pagination". À l'intérieur, nous avons plusieurs <a> tags (liens) représentant nos numéros de page. Les « et » sont des caractères spéciaux pour les flèches gauche et droite - stylé, non ?

Étape 2 : Définir les classes CSS

Maintenant que nous avons notre squelette, ajoutons un peu de style ! Nous allons commencer par un peu de CSS de base pour donner à notre pagination une forme.

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

Voici ce que fait cela :

• display: inline-block; fait que notre conteneur de pagination se comporte comme un élément en ligne mais nous permet de définir la largeur et la hauteur.
• Nous stylisons tous les <a> tags à l'intérieur de notre div pagination.
• float: left; aligne nos liens horizontalement.
• padding ajoute un peu d'espace autour de notre texte.
• text-decoration: none; supprime le soulignement de nos liens.

Étape 3 : Styles des liens de pagination

Faisons nos liens de pagination un peu plus intéressants !

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Ce code fait deux choses sympas :

1. Il style la page "active" (la page actuelle) avec un arrière-plan vert et du texte blanc.
2. Il ajoute un effet de survol à tous les autres liens, changeant leur couleur d'arrière-plan lorsque vous les survolez avec la souris.

Pagination CSS Simple

Félicitations ! Tu viens de créer une pagination simple et fonctionnelle. Mais pourquoi s'arrêter là ? Explorons quelques variations plus passionnantes !

Pagination CSS Active et Hoverable

Tu veux rendre ta pagination plus interactive ? Essaie ceci :

.pagination a {
transition: background-color 0.3s;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

La propriété transition ajoute un effet de changement de couleur en douceur lors du survol des liens. C'est comme de la magie !

Boutons de pagination arrondis actifs et hoverables

Donnons à nos boutons un peu de courbes :

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius arrondit les coins de nos boutons, tandis que margin ajoute un peu d'espace entre eux. Ça ne fait pas plus classe ?

Effet de transition hoverable

Tu veux ajouter un peu de peps ? Essaie cette effet subtil de zoom :

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

Maintenant, tes liens grossiront légèrement lorsque tu les survoles. C'est comme s'ils tendaient à être cliqués !

Pagination avec bordures

Ajoutons des bordures pour faire ressortir notre pagination :

.pagination a {
border: 1px solid #ddd;
}

Cette simple ligne ajoute une bordure grise claire autour de chaque lien. C'est étonnant comment un petit changement peut faire une grande différence !

Bordures arrondies

Tu veux adoucir ces bordures ? essayons ceci :

.pagination a {
border-radius: 50%;
}

Cela transforme nos boutons carrés en boutons circulaires. Génial, non ?

Espace entre les liens

Parfois, nous avons besoin d'un peu plus d'espace :

.pagination a {
margin: 0 4px;
}

Cela ajoute un petit espace entre chaque lien, giving ta pagination une sensation plus spacieuse.

Taille de la pagination CSS

Une taille unique ne convient pas à tous. Apprenons à ajuster la taille :

.pagination a {
font-size: 22px;
padding: 10px 20px;
}

Expérimente avec ces valeurs pour trouver la taille parfaite pour ton design !

Pagination centrée CSS

Tu veux que ta pagination soit joliment placée au milieu de la page ?

.pagination {
text-align: center;
}

Cette simple ligne centre tout ton bloc de pagination. Magie !

Pagination avec boutons Précédent et Suivant

Ajoutons des boutons de navigation :

<div class="pagination">
<a href="#">&laquo; Précédent</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Suivant &raquo;</a>
</div>

.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

Cela ajoute des boutons "Précédent" et "Suivant" et les style différemment.

Pagination avec fil d'Ariane

Tu veux montrer aux utilisateurs où ils se trouvent dans ta séquence de pages ? Essaie ceci :

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>Page 2 sur 3</p>
</div>

.pagination p {
margin-left: 10px;
display: inline-block;
}

Cela ajoute un indicateur de page montrant la page actuelle et le nombre total de pages.

Pagination avec liste

Enfin, essayons une pagination avec un style de liste :

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

Cela crée une mise en page de pagination propre et basée sur une liste.

Et voilà, les amis ! Tu viens d'apprendre les ficelles de la pagination CSS. Souviens-toi, la clé pour maîtriser ces techniques, c'est la pratique. Alors vas-y, expérimente avec ces styles, mélange-les et crée tes propres designs de pagination uniques. Qui sait ? Tu pourrais bien créer la prochaine grande chose dans le design web !

Bonne programmation, et puisses tes pages être toujours parfaitement paginées !

Credits: Image by storyset