CSS et web
Dégradés CSS, SVG, Tailwind et arrière-plans web rapides et soignés.
200 guides · 11 thèmes
CSS et webDégradé linéaire CSS : le guide complet de linear-gradient()
7 min de lecture
Chaque partie de linear-gradient() expliquée avec un exemple en direct à côté de son code, de la direction par défaut aux arrêts nets, reflets superposés et mélanges OKLCH plus fluides.
CSS et webDégradé radial CSS : formes, tailles et positions
5 min de lecture
radial-gradient() dessine la couleur vers l’extérieur depuis un point. Voici chacune de ses parties, avec des exemples en direct, plus les astuces de calques derrière les halos doux, les projecteurs et les vignettes.
CSS et webDégradé conique CSS : cercles, camemberts et reflets
5 min de lecture
conic-gradient() balaie la couleur autour d’un point comme l’aiguille d’une horloge. Cette seule idée dessine cercles chromatiques, camemberts, anneaux, reflets métalliques et éclats.
CSS et webDégradé maillé CSS : le construire avec des calques radiaux
6 min de lecture
Il n’existe pas de mesh-gradient() en CSS. Voici la méthode des calques qui en fait un faux convaincant, le flou et le grain qui le finissent, et quand une image ou un shader est le meilleur choix.
CSS et webTexte dégradé en CSS, bien fait
6 min de lecture
Trois lignes de CSS mettent un dégradé dans vos lettres. Le rendre lisible, robuste et de bon goût en demande quelques-unes de plus, et il faut savoir quand laisser le texte uni.
CSS et webBordure dégradée en CSS : quatre façons de la dessiner
5 min de lecture
border-color n’accepte pas de dégradé : tout contour dégradé est donc un contournement. Voici les quatre qui comptent, ce que chacun sait ou non faire, et lequel choisir.
CSS et webFonds dégradés animés en CSS, dans les règles de l’art
5 min de lecture
On ne peut pas animer directement un dégradé, mais tout ce qui l’entoure, si. Quatre techniques, ce que chacune coûte au navigateur, et comment garder un mouvement calme et facultatif.
CSS et webInterpolation OKLCH des dégradés CSS : mélanges fluides
6 min de lecture
La plupart des dégradés ternes au milieu gris ne sont pas un problème de couleur mais de calcul. Deux mots, in oklch, changent l’espace où le navigateur fait ses calculs.
CSS et webTexture de bruit CSS : du grain sur les dégradés avec SVG
5 min de lecture
Une légère couche de bruit masque les paliers et donne à une couleur d’écran plate un air d’imprimé ou de pellicule. Voici le filtre SVG qui la produit, réglé et prêt à coller.
CSS et webClasses de dégradé Tailwind : linéaire, radial et conique en v4
5 min de lecture
Tailwind v4 a renommé ses utilitaires de dégradé, ajouté les angles, les dégradés radiaux et coniques, et fait passer le fondu par défaut en oklab. Voici tout le système, avec le CSS que produit chaque classe.
CSS et webDégradés SVG : linéaires, radiaux, contours, texte, masques
6 min de lecture
Le SVG a son propre système de dégradés, plus ancien que les dégradés CSS et capable de choses qu’ils ne savent pas faire : colorer un contour, remplir un mot, partager un dégradé entre plusieurs formes, et estomper n’importe quoi avec un masque.
CSS et webBoutons dégradés en CSS qui font haut de gamme
5 min de lecture
La plupart des boutons dégradés font bon marché pour les mêmes raisons : trop de teintes, un survol qui saute et un texte qui s’efface dans l’extrémité claire. Voici la recette qui évite les trois.
CSS et webPerformance des dégradés CSS : ralentissent-ils un site ?
7 min de lecture
Un dégradé CSS statique ne coûte presque rien. Les coûts viennent de ce qu’on en fait : flous géants, arrière-plans redessinés au défilement, animations qui ne s’arrêtent jamais. Voici comment faire la différence.
CSS et webMotifs CSS avec des dégradés répétés
5 min de lecture
Les arrêts de couleur nets transforment les dégradés en formes, et background-size transforme les formes en mosaïques. Avec ces deux idées, vous dessinez la plupart des motifs classiques en quelques lignes, sans fichier image.
CSS et webDégradés Figma : astuces pour des résultats plus lisses
6 min de lecture
Figma fait un dégradé en deux clics et un bon dégradé en vingt. Voici le chemin rapide dans l’éditeur de dégradé, plus les remèdes aux milieux gris, au banding et au CSS qui ne correspond pas.
CSS et webLes shaders de dégradé WebGL, expliqués aux designers
8 min de lecture
Certains dégradés du web dérivent, rayonnent et scintillent comme aucune image ni aucune règle CSS ne le peut. Ce sont des shaders. Voici comment ils fonctionnent, avec des mots qu’un designer peut utiliser.
CSS et webArrière-plans en dégradé dans les e-mails : Gmail et Outlook
7 min de lecture
Les dégradés sont superbes dans un navigateur et imprévisibles dans une boîte de réception. Construisez-les par couches, et chaque lecteur verra quelque chose qui paraît voulu.
CSS et webImages OG dynamiques : des aperçus de lien automatiques
7 min de lecture
Créer à la main une image d’aperçu pour chaque page ne passe pas à l’échelle, et une seule image générique pour tout le site gaspille l’image la plus vue que vous ayez. Générez-les plutôt.