5.1 Dégradés linéaires
Les dégradés sont un outil puissant dans le web design, permettant de créer des transitions douces entre les couleurs sans utiliser d'images. Le CSS offre deux types principaux de dégradés : linéaires (linear-gradient) et radiaux (radial-gradient). Ces dégradés sont utilisés pour les arrière-plans des éléments, la création de boutons et d'autres effets visuels.
Dégradés linéaires (linear-gradient)
Un dégradé linéaire crée une transition douce entre deux ou plusieurs couleurs le long d'une ligne (axe) définie. La ligne peut être horizontale, verticale ou à n'importe quel angle.
Syntaxis
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Valeurs
direction: la direction du dégradé. Peut être spécifiée en degrés (ex.90deg), en utilisant des mots-clés (ex.to right,to bottom left)color-stop: point d'arrêt de couleur, définissant la couleur et sa position dans le dégradé
Exemples d'utilisation
Dégradé horizontal :
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Dégradé horizontal</div>
</body>
Dégradé vertical :
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Dégradé vertical</div>
</body>
Dégradé diagonal :
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Dégradé diagonal</div>
</body>
Dégradé multicolore :
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Dégradé multicolore</div>
</body>
Explication du code :
to right: le dégradé va de gauche à droiteto bottom: le dégradé va de haut en bas45deg: le dégradé va à un angle de 45 degrésred,yellow,green,blue: plusieurs points d'arrêt de couleur pour créer un dégradé multicolore
5.2 Dégradés radiaux
radial-gradient crée une transition douce entre les couleurs, partant du centre et s'étendant vers les bords d'un cercle ou d'une ellipse. Les dégradés radiaux peuvent créer des effets visuels intéressants, tels que l'imitation de la tridimensionnalité.
Syntaxis:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Valeurs:
shape: forme du dégradé, peut êtrecircle(cercle) ouellipse(ellipse) (par défaut)size: taille du dégradé, peut êtreclosest-side,closest-corner,farthest-side,farthest-cornerposition: position du centre du dégradé, peut être spécifiée en pourcentages, en pixels ou en utilisant des mots-clés (ex.center,top,left)color-stop: point d'arrêt de couleur, définissant la couleur et sa position dans le dégradé
Exemples d'utilisation
Dégradé circulaire :
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Dégradé circulaire</div>
</body>
Dégradé elliptique :
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Dégradé elliptique</div>
</body>
Dégradé du centre :
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Dégradé du centre</div>
</body>
Dégradé du coin :
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Dégradé du coin</div>
</body>
Explication du code :
circle: crée un dégradé circulaireellipse: crée un dégradé elliptiqueat center: le dégradé commence au centreat top left: le dégradé commence depuis le coin supérieur gauchered,blue,green: plusieurs points d'arrêt de couleur pour créer un dégradé multicolore
5.3 Réglages supplémentaires des dégradés
Dégradés répétitifs
1. Dégradés linéaires répétitifs (repeating-linear-gradient)
Les dégradés linéaires répétitifs créent un motif répétitif avec un dégradé linéaire.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Dégradés radiaux répétitifs (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Points d'arrêt de couleur transparents
Les points d'arrêt de couleur peuvent inclure de la transparence pour créer des effets visuels plus complexes.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Combinaison de plusieurs dégradés
Il est possible d'utiliser plusieurs dégradés pour créer des arrière-plans complexes.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION