Étagère À Livres Modèles CSS

Modèles CSS pour une bibliothèque bien alignée

Une étagère de couvertures paraît ordonnée uniquement si son style est adapté. Les scans de livres reliés, les photos de livres de poche et les éditions anciennes n'ont jamais la même taille, et un modèle de bibliothèque doit les maintenir dans un seul cadre tout en conservant la lisibilité des titres et des noms d'auteurs en dessous.

Des illustrations de couvertures aux proportions inégales

Les images de livres ont rarement le même format. Une réimpression peut être trapue, un ouvrage d'art presque carré, un classique scanné rogné en haut. Des fiches de même taille ne donnent pas des couvertures identiques, et c'est cet écart qui donne un aspect désordonné à une étagère. Un « ratio d'aspect » fixe sur la zone de la couverture, avec une règle « object-fit » qui permet à l'image de remplir l'espace, maintient chaque fiche à la même hauteur et rogne l'illustration sur les bords au lieu de l'étirer.

Les titres longs créent l'autre problème d'alignement. Deux lignes de texte sous une couverture et quatre sous la suivante font que les noms d'auteurs sont de hauteurs différentes sur toute la rangée.

Quelques choix de style ont un impact visuel majeur sur une collection de livres :

• un format fixe pour la zone de couverture, afin qu'une réimpression compacte et un ouvrage d'art imposant occupent le même espace ;

• une limite de lignes pour les titres, ce qui maintient la ligne de l'auteur à la même hauteur sur chaque fiche ;

• des espaces généreux entre les groupes, pour que les nouveautés et les coups de cœur de la rédaction apparaissent comme des étagères distinctes ;

• un effet de survol affichant une note ou une brève description.

Nicepage gère la plupart de ces aspects grâce à ses commandes visuelles, et l'élément Grille définit les colonnes et les espacements.

Réduction des colonnes de la grille sur les écrans étroits

Un grand écran affiche confortablement une longue rangée de couvertures. Sur un téléphone, cette même rangée se réduit généralement à une ou deux colonnes. Il est donc important de vérifier le rendu intermédiaire dans chaque mode d'affichage adaptatif.

Veillez à ce que la couverture, le titre et l'auteur restent lisibles quelle que soit la largeur de l'écran. Les étiquettes de genre et les notes d'édition peuvent être réduites sur les petits écrans, car un lecteur qui parcourt une étagère sur un téléphone regarde d'abord l'illustration. Une bibliothèque personnelle peut se permettre une plus grande densité de contenu qu'une sélection de librairie, où chaque couverture est considérée comme un produit.

Règles personnalisées pour une seule étagère

Parfois, un groupe nécessite des options que les contrôles standard ne proposent pas, comme un contour doré pour les ouvrages primés. Nicepage prend en charge les contrôles CSS personnalisés pour un élément, une page ou l'ensemble du site, ce qui permet de gérer ces exceptions.

Évaluer un modèle en fonction de son étagère la plus chargée est plus révélateur que la page d'accueil de démonstration. Chargez-le avec votre titre le plus long, la couverture la moins réussie et le groupe le plus important que vous publiez, puis vérifiez si les lignes restent alignées.