Dessin Modèles CSS

Modèles CSS personnalisables pour une mise en page homogène

L'affichage des galeries de dessins présente souvent des problèmes. Une étude de silhouette allongée étire sa rangée et décale les images voisines, les légendes sont à des hauteurs différentes d'une carte à l'autre, et un grand croquis à l'encre laisse un espace disgracieux sur un ordinateur portable. Les modèles CSS pour dessins intègrent ces problématiques : espacement, typographie des légendes et comportement de la grille lorsque la taille de l'écran diminue.

Largeur des colonnes, espacements, proportions des images

L'apparence d'une galerie dépend principalement de quelques propriétés. Il est important d'examiner comment elles sont définies :

1. Grille ou Flexbox pour la galerie, avec un espacement (gap) plutôt que des marges sur chaque carte ;

2. Un format d'image fixe pour la boîte média, afin que les rangées restent alignées quelle que soit la taille du fichier numérisé ;

3. object-fit: cover pour des vignettes uniformes, object-fit: contain lorsque le dessin entier doit s'afficher. 4. Un espacement constant sous l'image pour les étiquettes de support et d'année empêche les légendes de modifier la hauteur de la fiche.

Le cas problématique est celui d'une longue étude de figure verticale placée à côté d'un gros plan carré du même sujet. Avec l'option « couvrir », les jambes sont coupées ; avec l'option « contenir », le dessin est conservé, mais des bandes vides apparaissent de chaque côté. Un style qui limite la hauteur de la boîte média et centre l'image dans un format fixe résout les deux problèmes sans avoir besoin d'une règle distincte pour chaque œuvre.

Écrans étroits sans vignettes déformées

C'est sur les petits écrans qu'une galerie de dessins perd le plus, car une étude détaillée, comprimée dans une colonne étroite, ne peut plus révéler la qualité de trait pour laquelle elle a été conçue. Les modes adaptatifs de Nicepage affichent chaque largeur individuellement, et trois points méritent une attention particulière :

1. Les aperçus doivent-ils rester suffisamment larges pour être lisibles sur les écrans les plus étroits, au lieu d'ajouter des colonnes supplémentaires ?

2. Les légendes doivent-elles s'adapter à la largeur de l'image et conserver leur espacement lorsqu'un titre est long ?

3. Qu'est-ce qui remplace l'effet de survol au toucher, car les aperçus et les liens vers les vues détaillées nécessitent un équivalent pour la mise au point ?

Surcharges locales lorsque les préréglages ne suffisent pas

Le code CSS personnalisé de Nicepage permet de pallier les lacunes des styles prédéfinis. La documentation CSS personnalisée explique comment appliquer une règle à un élément spécifique ou à l'ensemble du site : une bordure plus épaisse autour des numérisations au fusain, un décalage de légende différent selon les séries et un fond plus chaud derrière l'encre sépia.

Le graphite numérisé paraît plus chaud que le dessin au trait numérique ; un fond qui met en valeur l'un peut donc ternir l'autre, et c'est généralement là que la première surcharge intervient. Avant de choisir un modèle, chargez deux dessins aux styles incompatibles : un large paysage au fusain et une étude de portrait en hauteur, et observez l'impact des styles sur eux.