Dégradés de couleurs en HTML. Linear-gradient() : dégradé linéaire en arrière-plan
Un dégradé de couleurs est une transition douce d’une couleur donnée à une autre en passant par des couleurs intermédiaires. Dans un gradient linéaire, la transition se produit en ligne droite, à partir du point UN au point B. Le dégradé peut avoir plus de deux points de référence - la transition s'effectue alors à partir du point UN au point B, puis du point B au point C et ainsi de suite.
Comment créer un dégradé linéaire d'arrière-plan en CSS
En CSS3, vous pouvez ajouter un arrière-plan dégradé aux éléments via la propriété background-image déjà connue. La valeur est le mot-clé Linear-gradient(), où entre parenthèses vous devez spécifier le point de départ du dégradé, la couleur de départ et la couleur de fin.
Par exemple, créons un dégradé linéaire d'arrière-plan allant du violet au rouge. Dans ce cas, nous voulons que le point de départ avec la couleur violette soit sur le côté droit et que le vecteur de dégradé aille vers la gauche. Écrivons le code :
Image d'arrière-plan : dégradé linéaire (à gauche, violet, rouge) ;
400x400px
Les couleurs des points de dégradé peuvent être écrites dans n'importe quel format disponible en CSS, qu'il soit hexadécimal, RVB ou autre. La direction du dégradé est spécifiée à l'aide du préfixe to puis des mots-clés left , right , top et bottom , qui peuvent être combinés pour modifier la pente. Par exemple: 
De plus, vous pouvez indiquer directement l'angle d'inclinaison en utilisant un nombre positif ou négatif avec le préfixe deg (sans espace). À un angle donné de 0º ou 360º, la ligne de dégradé ira de bas en haut. À mesure que l'angle d'inclinaison augmente, le vecteur se déplace dans le sens des aiguilles d'une montre (l'utilisation d'une valeur négative inverse le mouvement). Exemple de saisie de code :
Image d'arrière-plan : dégradé linéaire (-110deg, #ee82ee, #ff0000) ; 
Plusieurs points d'ancrage
Comme nous l'avons déjà dit, un dégradé peut avoir plus de deux points d'ancrage. Dans ce cas, l'arrière-plan passera en douceur de la première couleur à la deuxième, de la deuxième à la troisième, de la troisième à la quatrième, et ainsi de suite jusqu'à ce qu'il atteigne le point de référence final. Si vous souhaitez augmenter le nombre de ces points dans le dégradé, ajoutez-les simplement séparés par des virgules. Par exemple:
Image d'arrière-plan : dégradé linéaire (145 degrés, #ee82ee, bleu ardoise, #ffd86a, violet) ; 
Dans notre exemple, quatre points de couleur de référence sont indiqués, mais vous pouvez en ajouter autant que vous le souhaitez et dans tous les formats de couleurs disponibles.
Longueur de transition
Par défaut, le navigateur place les points à égales distances, la gradation est donc uniforme. Mais cette distance peut être contrôlée à l'aide d'unités CSS. Regardons l'exemple suivant :
Image d'arrière-plan : dégradé linéaire (#92009b 20 %, #f5e944 90 %, #00ffa2) ; 
Dans notre code, après la couleur #92009b la valeur 20% est indiquée. Puisqu'il se trouve à proximité du premier point d'ancrage, cela signifie que 20 % de la longueur de l'élément sera peint avec la couleur spécifiée. Après quoi le dégradé commence : une valeur de 90 % indique au navigateur d'atteindre la couleur #f5e944 de 90 % de la longueur de l'élément (à partir de 20 %). Après quoi la transition vers la troisième couleur commence dans l'espace restant - #00ffa2.
Ce sujet nécessite également de la pratique. Essayez de créer un arrière-plan dégradé avec plusieurs points d'ancrage (plus de deux), jouez avec les valeurs de distance et observez le changement de dégradé dans le navigateur.
Préfixes du fournisseur
Pour garantir la compatibilité entre navigateurs, certaines propriétés CSS récentes doivent être ajoutées aux préfixes du fournisseur - des préfixes spéciaux ajoutés par les développeurs de navigateurs :
- -webkit- - préfixe pour Chrome, Safari, Android ;
- -moz- est un préfixe pour Firefox ;
- -o- est le préfixe d'Opera.
Les arrière-plans dégradés nécessitent également l'utilisation de ces préfixes s'il est nécessaire de prendre en charge le nombre maximum de navigateurs. Pour cela, adaptez le code comme suit :
Image d'arrière-plan : -webkit-linear-gradient (gauche, violet, rouge) ; image d'arrière-plan : -moz-linear-gradient (gauche, violet, rouge) ; image d'arrière-plan : -o-linear-gradient (gauche, violet, rouge) ; image d'arrière-plan : dégradé linéaire (à gauche, violet, rouge) ;
L'ajout d'un préfixe nécessite la création d'une annonce distincte. De plus, comme vous l'avez peut-être remarqué, les propriétés avec des préfixes de fournisseur Pas nécessitent l'utilisation du préfixe to pour indiquer la direction du dégradé.
Prise en charge d'Internet Explorer
Malheureusement, l'arrière-plan dégradé ne fonctionne que dans IE10+. Les versions précédentes ne le comprennent pas et l'ignoreront. Pour fournir au moins un arrière-plan normal dans les anciens navigateurs, vous pouvez créer ce qu'on appelle. "stub": sélectionnez une teinte appropriée et écrivez la propriété background-color sur propriété avec un dégradé. Ainsi, un navigateur plus ancien appliquera une couleur d'arrière-plan « de secours » et ignorera les propriétés qu'il ne connaît pas, tandis qu'un navigateur plus moderne superposera l'arrière-plan dégradé et superposera l'arrière-plan uni.
Si vous disposez d'un jeu de dégradés semi-transparents (par exemple, en utilisant le format de couleur RGBA) et que vous ne souhaitez pas que l'espace réservé d'arrière-plan soit visible, définissez le dégradé à l'aide de la propriété raccourcie background au lieu de background-image . Ensuite, la valeur background-color sera remplacée par transparent .
Plus loin dans le tutoriel : Repeating-linear-gradient() - dégradé linéaire répétitif.
Bientôt, très bientôt, les sites Web se chargeront plus facilement et pourront être créés sans aucune image.
Déjà maintenant, dans les navigateurs modernes, vous pouvez créer un arrière-plan dégradé de toute complexité en utilisant CSS, et sans aucune image.
Créer des dégradés CSS sans images
Disons que nous voulons faire une transition dégradée en arrière-plan du gris au noir. Pour y parvenir, W3 Corporation a proposé d'utiliser une directive spéciale de dégradé linéaire dans CSS3.
Ainsi, selon la version W3, pour réaliser un fond dégradé, il suffit d'écrire dans le sélecteur de bloc :
Arrière-plan : dégradé linéaire (début, couleur1 position1, couleur2 position2,...,colorN positionN) ;
Et le navigateur dessinera automatiquement un arrière-plan dégradé dans le bloc.
Évidemment, il peut y avoir de nombreuses couleurs et points de contrôle dans un dégradé. Paramètre commencer spécifie dans quelle direction le dégradé doit se propager - cela peut être soit haut pour un gradient directionnel verticalement ou gauche pour direction horizontale.
Tous les navigateurs ne prennent pas en charge cette fonctionnalité, il existe donc pour l'instant un certain nombre d'astuces. Pour les très anciens navigateurs, vous devez soit spécifier une couleur d'arrière-plan moyenne (il n'y aura pas de dégradé du tout, mais l'arrière-plan ne sera pas blanc), soit spécifier une image avec un dégradé (cependant, si le but d'utiliser un dégradé linéaire en CSS est de réduire le nombre d'images chargées, alors cela ne sert à rien, car dans tous les navigateurs, l'image sera toujours chargée, même si elle sera ensuite remplacée par un dégradé linéaire).
Pour les navigateurs de type IE, vous pouvez utiliser des dégradés basés sur des filtres, et pour les navigateurs webkit (Safari, Chrome) et gecko (Mozilla), comme toujours, il existe une alternative : -webkit-gradient et -moz-linear-gradient, qui accepter des paramètres similaires. Consultez le bloc de code suivant pour savoir comment tout cela devrait fonctionner :
Contexte : #999 ; filtre : progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); background: -webkit-gradient(linéaire, en haut à gauche, en bas à gauche, de(#ccc), à(#000)); arrière-plan : -moz-linear-gradient (haut, #ccc, #000) ;
Après rendu, cela ressemble à ceci.
Dernière mise à jour : 21/04/2016
Les dégradés représentent une transition douce d'une couleur à une autre. CSS3 possède un certain nombre de dégradés intégrés que vous pouvez utiliser pour créer l'arrière-plan d'un élément.
Les dégradés en CSS ne représentent aucune propriété particulière. Ils créent simplement une valeur attribuée à la propriété background-image.
Un dégradé linéaire s'étend en ligne droite d'une extrémité à l'autre d'un élément, créant une transition douce d'une couleur à l'autre.
Pour créer un dégradé, vous devez spécifier son début et plusieurs couleurs, par exemple :
Image d'arrière-plan : dégradé linéaire (gauche, noir, blanc) ;
Dans ce cas, le début du dégradé sera le bord gauche de l'élément, qui est indiqué par la valeur left . Couleurs dégradées : noir et blanc. Autrement dit, en partant du bord gauche de l'élément vers la droite, il y aura une transition en douceur du noir au blanc.
L'utilisation des dégradés présente un inconvénient : la variété des navigateurs vous oblige à utiliser le préfixe du fournisseur :
Webkit- /* Pour Google Chrome, Safari, Microsoft Edge, Opera version supérieure à 15 */ -moz- /* Pour Mozilla Firefox */ -o- /* Pour Opera version supérieure à 15 (Opera 12) */
Ainsi, une utilisation complète du dégradé ressemblera à ceci :
Dégradé linéaire noir et blanc
Pour définir le début du dégradé, vous pouvez utiliser les valeurs suivantes : left (de gauche à droite), right (de droite à gauche), top (de haut en bas) ou bottom (de bas en haut). Par exemple, un dégradé vertical ressemblerait à ceci :
Image d'arrière-plan : dégradé linéaire (bas, noir, blanc) ;
Vous pouvez également définir la direction de la diagonale à l'aide de deux valeurs :
Image d'arrière-plan : dégradé linéaire (en haut à gauche, noir, blanc) ;
En plus des valeurs spécifiques comme haut ou gauche, vous pouvez également spécifier un angle de 0 à 360, qui déterminera la direction du dégradé :
Image d'arrière-plan : dégradé linéaire (30 degrés, noir, blanc) ;
Après la valeur des angles, le mot deg est indiqué.
Par exemple, 0deg signifie que le dégradé commence à gauche et se déplace vers la droite, tandis que 45deg signifie qu'il commence en bas à gauche et se déplace selon un angle de 45° vers le haut à droite.
Après avoir défini le début du dégradé, vous pouvez préciser les couleurs ou les points de référence à appliquer. Il n’est pas nécessaire qu’il y ait deux couleurs, il peut y en avoir plus :
Image d'arrière-plan : dégradé linéaire (haut, rouge, #ccc, bleu) ;
Toutes les couleurs appliquées sont réparties uniformément. Cependant, vous pouvez également spécifier des emplacements d'arrière-plan spécifiques pour les points de couleur. Pour ce faire, une deuxième valeur est ajoutée après la couleur, qui détermine la position du point.
Image d'arrière-plan : dégradé linéaire (gauche, #ccc, rouge 20 %, rouge 80 %, #ccc) ;
Dégradé répétitif
En utilisant le dégradé linéaire répétitif, vous pouvez créer des dégradés linéaires répétitifs. Par exemple:
Image d'arrière-plan : dégradé linéaire répétitif (gauche, #ccc 20px, rouge 30px, rgba(0, 0, 126, .5) 40px) ; image d'arrière-plan : -moz-repeating-linear-gradient (gauche, #ccc 20px, rouge 30px, rgba(0, 0, 126, .5) 40px) ; image d'arrière-plan : -webkit-repeating-linear-gradient (gauche, #ccc 20px, rouge 30px, rgba(0, 0, 126, .5) 40px) ;
Dans ce cas, le dégradé commence au bord gauche de l'élément avec une bande de couleur grise (#ccc) de 20 pixels de large, puis jusqu'à 30 pixels il passe au rouge, puis jusqu'à 40 pixels il repasse au bleu clair (rgba(0, 0, 126, .5)). Le navigateur répète ensuite le dégradé jusqu'à ce qu'il remplisse toute la surface de l'élément.
Les dégradés CSS vous permettent de créer un arrière-plan de deux couleurs ou plus qui passent en douceur de l'une à l'autre. Ils sont avec nous depuis assez longtemps et disposent d'un assez bon support de navigateur. La plupart des navigateurs modernes les comprennent sans préfixes, pour IE9 et versions antérieures, il existe un filtre dégradé et pour IE9, vous pouvez utiliser SVG.
Les dégradés peuvent être utilisés partout où des images sont utilisées : dans les arrière-plans, sous forme de puces de liste, ils peuvent être spécifiés dans content ou border-image .
Dégradé linéaire
Les dégradés linéaires sont assez faciles à utiliser. Pour le dégradé le plus basique, définissez simplement les couleurs de début et de fin :
Fond : dégradé linéaire (orange, or) ;
Il peut y avoir n'importe quel nombre de couleurs supérieur à deux. Vous pouvez également contrôler la direction du dégradé et les limites (points d'arrêt) des couleurs.
La direction peut être spécifiée en degrés ou en mots-clés.
Mots clés : vers le haut = 0deg ;
à droite = 90 degrés ;
vers le bas = 180 degrés - valeur par défaut ;
à gauche = 270deg.
Les mots clés peuvent être combinés pour créer un dégradé diagonal, par exemple en haut à gauche .
Ci-dessous, vous pouvez voir comment différentes directions fonctionnent en s'étendant du lilas au jaune :
Voici par exemple le code du tout premier carré :
En haut à gauche (arrière-plan : dégradé linéaire (en haut à gauche, violet, cramoisi, orangerouge, or); )
Une chose à retenir est qu'en haut à droite n'est pas la même chose que 45deg. Les couleurs du dégradé sont positionnées perpendiculairement à la ligne de direction du dégradé. En haut à droite, la ligne va du coin inférieur gauche au coin supérieur droit, à 45 degrés - elle est située strictement à cet angle, quelle que soit la taille de la figure.
La différence est clairement visible dans les figures rectangulaires :
Vous pouvez également définir des points d'arrêt pour les couleurs dégradées ; les valeurs sont spécifiées en unités ou en pourcentages et peuvent être supérieures à 100 % et inférieures à 0 %.
Exemples de définition de valeurs en % , en em et de valeurs qui dépassent les limites de l'élément :
Plus les points d’arrêt des couleurs voisines sont proches, plus la frontière entre elles sera nette. De cette façon, vous pouvez facilement créer des fonds rayés :
Voici comment créer, par exemple, un arrière-plan pour une colonne latérale, étiré sur toute la hauteur de l'élément parent :
Clair (arrière-plan : dégradé linéaire Peachpuff (90 deg, rgba (255, 255, 255, 0) 50 %, rgba (255, 255, 255, .4) 50 %) centre centre / 2em ; ) .foncé (arrière-plan : bleu acier dégradé linéaire (rgba(0, 0, 0, 0) 50 %, rgba(0, 0, 0, .2) 50 %) centre centre / 100 % 1em)
Dans la première ligne, nous définissons la couleur d'arrière-plan de l'élément, le type et la direction (la couleur et la direction peuvent être omises), dans la deuxième ligne, nous définissons les couleurs du dégradé et la bordure entre eux, dans la troisième ligne, nous définissons la position et taille de l'image résultante. La partie la plus importante est la taille. Par défaut, l'arrière-plan est répété, le motif résultant remplira donc l'arrière-plan de l'élément. Très simple et compréhensible :)
L'intégralité de l'entrée peut être faite sur une seule ligne, mais pour des raisons de lisibilité, il est plus pratique d'écrire sur plusieurs, notamment pour les dégradés complexes.
Il est également important de savoir que le mot-clé transparent signifie noir transparent, et non blanc transparent, donc si vous l'utilisez dans Firefox, vous pourriez vous retrouver avec quelque chose comme ceci :
Pour éviter cela, utilisez des couleurs totalement transparentes de la teinte souhaitée, par exemple du blanc : rgba(255, 255, 255, 0) ou du noir rgba(0, 0, 0, 0) . Vous pouvez découvrir différentes manières de définir les couleurs.
Pour connaître la notation RVB d'une couleur spécifique, vous pouvez utiliser CSS.coloratum, un instrument de Léa Verou.
En plus du dégradé linéaire habituel, vous pouvez créer un dégradé linéaire répétitif - un dégradé répétitif
Exemple de code :
Arrière-plan : dégradé linéaire répétitif (vert, vert 0,5 em, transparent 0,5 em, transparent 1 em) ;
Malheureusement, les dégradés répétitifs se comportent de manière aléatoire et ne conviennent qu'aux motifs qui ne se soucient pas de la précision. Si vous avez besoin de précision, utilisez Linear-gradient en combinaison avec background-size et background-repeat .
Les dégradés ont la même limitation que l'ombre de boîte : ils ne peuvent pas recevoir de couleurs ou de direction individuelles. Cela conduit à une duplication de code et à un besoin urgent d'utiliser des préprocesseurs lors de la création de dégradés complexes.
Une autre limitation est que les dégradés ne sont pas animés, ce qui peut toutefois être contourné dans une certaine mesure.
Pour créer rapidement des dégradés multi-navigateurs, il existe un outil très pratique : colorzilla.com/gradient-editor/. En plus du code pour les navigateurs modernes, il proposera du code pour les anciens IE et SVG pour le 9e.
Combinés aux commandes de base de l'image d'arrière-plan, les dégradés vous offrent la plus grande capacité à créer des arrière-plans de différents degrés de complexité sans utiliser d'images du tout. Vous pouvez utiliser des dégradés pour créer des motifs complexes et intéressants, mais c'est un sujet complètement différent.