Des couleurs à accorder, un dégradé ou une grille CSS à écrire, une maquette de post à montrer : ces outils rendent un résultat prêt à copier ou à télécharger, sans compte et sans logiciel.
Rayures, damier, points : background CSS
Un motif répété en fond, rayures, damier, pois ou quadrillage, se fait entièrement en CSS avec des dégradés : aucune image à charger, aucun poids, et un rendu net à toutes les densités d'écran. Cet outil compose le motif avec ses couleurs et sa taille, l'affiche en direct et rend la déclaration à coller. C'est la bonne solution pour un fond de section, une texture discrète ou un placeholder, là où une image serait plus lourde et plus floue. Tout se calcule dans le navigateur, et le résultat ne dépend d'aucun fichier externe.
CSS généré
.element {
background-color: #f1f5f9;
background-image: radial-gradient(#6366f1 2px, transparent 2px);
background-size: 20px 20px;
}Nettement : quelques dizaines d'octets de déclaration contre plusieurs kilo-octets pour une tuile, sans requête réseau supplémentaire. Il reste par ailleurs parfaitement net sur un écran à haute densité, là où une image doit être fournie en plusieurs résolutions.
Deux dégradés linéaires en diagonale, superposés et décalés d'une demi-tuile, avec des transitions franches plutôt que progressives. La taille de fond fixe la dimension du carreau. C'est exactement ce que produit cet outil, et le voir écrit une fois suffit à comprendre la mécanique.
Rarement tels quels. Baissez fortement le contraste entre les deux couleurs, ou posez un aplat semi-transparent entre le motif et le texte. Un fond décoratif qui gêne la lecture coûte plus qu'il ne rapporte.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr