CSS - Dégradés : Un voyage coloré pour les débutants

Salut à toi, futur.e sorcier.e CSS ! Aujourd'hui, nous allons plonger dans le monde vibrant des dégradés CSS. Attache-toi bien, car nous allons peindre le web avec des couleurs qui se fondent harmonieusement les unes dans les autres. Fais-moi confiance, à la fin de ce tutoriel, tu seras capable de créer des œuvres colorées qui rendraient même Picasso jaloux !

Qu'est-ce qu'un dégradé CSS ?

Imagine que tu peins un mur, mais au lieu d'utiliser une seule couleur, tu veux qu'il change progressivement d'une couleur à une autre. C'est exactement ce que fait un dégradé CSS, mais sur ta page web ! C'est un moyen de transitionner en douceur entre deux ou plusieurs couleurs, créant de magnifiques effets attrayants sans utiliser d'images.

Types de dégradés CSS

Dans la palette de couleurs CSS, nous avons trois types principaux de dégradés :

1. Dégradés linéaires
2. Dégradés radiaux
3. Dégradés coniques

Voyons-les en détail, d'accord ?

Dégradés linéaires

Les dégradés linéaires sont comme une ligne droite de couleurs changeant de point A à point B. C'est le plus commun et le plus facile à comprendre, donc c'est par ici que nous allons commencer.

.linear-gradient {
background: linear-gradient(to right, red, yellow);
}

Dans cet exemple, nous créons un dégradé qui va de gauche à droite, en partant du rouge et en terminant par le jaune. Simple, non ?

Mais attend, il y a plus ! Nous pouvons également spécifier la direction en utilisant des angles :

.angled-gradient {
background: linear-gradient(45deg, blue, green);
}

Cela crée un dégradé diagonal du bleu au vert à un angle de 45 degrés.

Dégradés radiaux

Les dégradés radiaux sont comme des arcs-en-ciel circulaires, avec des couleurs rayonnant à partir d'un point central.

.radial-gradient {
background: radial-gradient(circle, red, yellow, green);
}

Cela crée un dégradé circulaire en partant du rouge au centre, puis du jaune, et enfin du vert à l'extérieur.

Dégradés coniques

Les dégradés coniques sont les nouveaux venus dans le quartier. Ils sont comme un cercle chromatique, avec des couleurs tournant autour d'un point central.

.conic-gradient {
background: conic-gradient(red, yellow, green, blue, red);
}

Cela crée une rotation complète des couleurs, en partant et en terminant par le rouge.

Syntaxe

Maintenant, décortiquons la syntaxe pour ces dégradés :

Type de dégradé	Syntaxe de base
Linéaire	linear-gradient([direction,] color1, color2, ...)
Radial	radial-gradient([shape size at position,] color1, color2, ...)
Conique	conic-gradient([from angle,] color1, color2, ...)

Dégradés pour les bordures

Savais-tu que tu peux utiliser des dégradés pour les bordures aussi ? C'est comme donner à tes éléments une ceinture chic !

.gradient-border {
border: 10px solid;
border-image: linear-gradient(to right, red, blue) 1;
}

Cela crée une bordure qui transitionne du rouge au bleu.

Positionnement des points de couleur

Les points de couleur sont comme des points de contrôle dans ton dégradé. Tu peux les positionner précisément :

.color-stops {
background: linear-gradient(to right, red 20%, yellow 40%, green 60%, blue 80%);
}

Cela crée un dégradé avec des transitions de couleur spécifiques aux 20%, 40%, 60% et 80% de la largeur de l'élément.

Création de lignes dures

Tu veux un changement de couleur soudain au lieu d'une transition en douceur ? Utilise simplement le même pourcentage pour les points de couleur adjacents :

.hard-lines {
background: linear-gradient(to right, red 50%, blue 50%);
}

Cela crée une ligne dure entre le rouge et le bleu au milieu.

Bandes de couleurs en utilisant des dégradés

Tu peux créer des bandes de couleurs en répétant les points de couleur :

.color-bands {
background: linear-gradient(to right, red 25%, yellow 25% 50%, green 50% 75%, blue 75%);
}

Cela crée quatre bandes de couleurs de largeur égale.

Dégradés empilés

Tu veux vraiment faire dans l'originalité ? Empile plusieurs dégradés les uns sur les autres :

.stacked-gradients {
background:
linear-gradient(to right, rgba(255,0,0,0.5), rgba(255,0,0,0)),
linear-gradient(to bottom, rgba(0,0,255,0.5), rgba(0,0,255,0));
}

Cela crée un dégradé rouge de gauche à droite et un dégradé bleu de haut en bas, se chevauchant.

Fonctions apparentées

Les dégradés CSS font partie d'une plus grande famille de fonctions d'image. Voici quelques fonctions apparentées :

Fonction	Description
repeating-linear-gradient()	Crée un dégradé linéaire répété
repeating-radial-gradient()	Crée un dégradé radial répété
repeating-conic-gradient()	Crée un dégradé conique répété
image()	Génère une valeur d'image
image-set()	Permet de fournir plusieurs sources d'image pour différentes résolutions d'affichage

Et voilà, les amis ! Vous venez de terminer votre cours accéléré sur les dégradés CSS. Souvenez-vous, la clé pour maîtriser les dégradés, c'est l'expérimentation. N'ayez pas peur de jouer avec différentes couleurs, angles et positions. Qui sait ? Vous pourriez bien créer la prochaine grande tendance en design web !

Maintenant, allez-y et peignez le web avec vos nouvelles puissances de dégradés. Et souvenez-vous, dans le monde du CSS, il n'y a pas d'erreurs, seulement des 'petits accidents heureux' (comme dirait Bob Ross). Bon codage !

Credits: Image by storyset