Parcours de la tâche / de l'entrée au résultat
Comment créer un motif de fond CSS
- 01
Choisissez un motif
Ouvrez Motif et choisissez Points, Grille ou Diagonale. Les trois sont construits uniquement à partir de dégradés CSS — aucun fichier image n'intervient à aucun moment. Passer de l'un à l'autre conserve vos valeurs de tuile, de marque et de couleur, donc comparer les styles ne coûte rien. La grille de points de 28 px par défaut est un point de départ discret.
- 02
Définissez la tuile
Choisissez une Taille de tuile de 8 à 96 px et une Largeur de marque de 1 à 16 px. La marque ne peut pas dépasser la moitié de la taille de la tuile ; si c'est le cas, l'état affiche VÉRIFIER LES VALEURS avec la règle exacte.
- 03
Choisissez les deux couleurs
Couleur du motif dessine les marques et Couleur du canevas remplit le fond en dessous. Les motifs subtils naissent d'un faible contraste entre les deux — une marque à peine plus foncée que le canevas se lit comme une texture plutôt que comme une décoration.
- 04
Jugez la répétition à l'échelle réelle
L'aperçu répète le résultat sur tout le panneau, et c'est là que le contraste faible et les tuiles trop serrées se révèlent. En règle générale, gardez la marque bien en dessous de la moitié de la tuile : une marque de 2 px sur une tuile de 28 px se lit comme une texture, pas comme du bruit.
- 05
Copiez le CSS du motif
Cliquez sur Copier le CSS ou Télécharger le .css pour enregistrer toolars-background-pattern.css. La règle .pattern tient en trois déclarations — background-color, background-image et background-size — prête pour n'importe quel élément.
- 06
Appliquez et adaptez la règle
La règle se pose sur n'importe quel élément sans effet de bord sur la mise en page, puisqu'elle ne peint que l'arrière-plan. Ajustez background-size ensuite pour changer la densité du motif, et réduisez le contraste entre les deux couleurs — plutôt que de rétrécir la marque — quand un motif entre en concurrence avec du texte.