Moyen Modèles CSS

Modèles CSS intermédiaires flexibles pour des mises en page visuelles variées

Le style est la couche que vous contrôlez le plus dans un modèle CSS. Les couleurs, les tailles de police et les espacements sont prédéfinis dans chaque design. Il en va de même pour la façon dont les blocs se réorganisent sur les écrans étroits. Les designs de la collection Medium s'étendent de simples blocs typographiques à des mises en page d'événements construites sur de grandes photos ; comparer leur style dès le départ évite des retouches ultérieures.

Les différences entre les styles prêts à l'emploi

La plupart des choix visuels de ces designs se divisent en trois catégories :

1. La couleur donne le ton général. « Texte moyen avec bouton » conserve un texte noir sur fond blanc avec un seul bouton bleu comme accentuation, tandis que Fashion & Music remplit des sections entières d'orange.
2. La typographie façonne tout autant l'ambiance. Les mots en gras dans le titre de « Texte moyen avec bouton » apportent de l'emphase sans couleur supplémentaire, tandis que Fashion & Music privilégie des titres condensés évoquant le lettrage d'une affiche.
3. Les cartes montrent la gestion des contenus répétés. Modern Technology Devices dispose trois cartes blanches aux ombres douces sur le bord inférieur d'un arrière-plan violet et magenta.

Lors du remplacement du contenu de démonstration

Un bref essai avec votre propre contenu montre comment le style s'adapte :

1. Remplacez le titre de démonstration par votre titre le plus long. Dans « Texte moyen avec bouton », un titre s'étendant sur trois lignes modifie l'équilibre, de sorte que la hauteur de ligne et la largeur du texte peuvent nécessiter un ajustement.
2. Placez vos propres photos derrière le texte. Des lettres blanches parfaitement lisibles sur la photo de démonstration de Fashion & Music peuvent s'estomper sur une image claire. Un filtre plus sombre ou un bandeau uni derrière les mots permet de rétablir la lisibilité.
3. Changez la palette dans Couleurs du thème. Les éléments qui utilisent les couleurs du thème s'adaptent au changement, tandis qu'un bouton recoloré manuellement conserve son ancienne nuance.
4. Parcourez les modes responsifs, des grands écrans jusqu'aux téléphones portables. Les espacements entre les cartes et la taille des polices y nécessitent souvent des valeurs spécifiques, et le chevauchement dans Modern Technology Devices mérite une attention particulière.

Les rangées de cartes peuvent reposer sur CSS Grid ou Flexbox, et ce choix détermine la manière dont elles reviennent à la ligne lorsque l'espace se réduit. Dans chaque mode, vous pouvez ajuster les dimensions et les espacements séparément.

Le CSS personnalisé comble les réglages manquants

Les commandes standard prennent en charge la plupart des modifications de couleurs, de polices et d'espacements. Le CSS personnalisé intervient pour les détails dépourvus de réglage dédié, comme l'équilibrage des sauts de ligne dans un long titre. Nicepage accepte des règles personnalisées pour un élément isolé ou pour l'ensemble du site. Ces règles pouvant entrer en conflit avec les styles par défaut, vérifiez le résultat dans l'Aperçu puis sur le site publié. Le bon design conserve toute sa cohérence une fois que vos titres, photos et palettes ont remplacé les éléments de démonstration, y compris sur la largeur d'un téléphone.