Remplissage dégradé CSS. CSS : dégradé linéaire pour l'arrière-plan
Bientôt, très bientôt, les sites Web se chargeront plus facilement et il sera possible de les créer 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.
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: 
Image d'arrière-plan : dégradé linéaire (en bas à droite, #ee82ee, #ff0000) ;
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) ;
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.
Dégradé - remplir une zone sélectionnée avec une séquence de nuances de couleurs avec des transitions douces entre elles. Un dégradé est utilisé pour afficher une transition douce entre deux ou plusieurs nuances de couleurs spécifiées. Exemple de dégradé :
Auparavant, les images d'arrière-plan étaient utilisées pour créer un effet de dégradé. Vous pouvez désormais utiliser CSS3 pour créer un arrière-plan dégradé. Les éléments avec des dégradés CSS3 sont plus beaux lorsqu'ils sont zoomés que leurs homologues d'image d'arrière-plan de plug-in, puisque le dégradé est généré par le navigateur directement dans la zone spécifiée.
Notez que le dégradé CSS est une image d'arrière-plan générée par le navigateur, et non une couleur d'arrière-plan, il est donc défini comme la valeur de la propriété background-image. Cela signifie que le dégradé peut être spécifié non seulement comme valeur de la propriété background-image, mais également partout où vous pouvez insérer une image d'arrière-plan, telle que list-style-image et background .
CSS3 définit deux types de dégradés :
- Dégradé linéaire(Dégradé linéaire) - une transition douce d'une couleur à l'autre en ligne droite.
- Dégradé radial(Dégradé Radial) - une transition en douceur d'une couleur à l'autre à partir d'un point dans toutes les directions.
Dégradé linéaire
Un dégradé linéaire s'étend en ligne droite, montrant une transition douce d'une nuance de couleur à une autre. Un dégradé linéaire est créé à l'aide de la fonction Linear-gradient(). La fonction crée une image qui est un dégradé linéaire entre les nuances de couleurs spécifiées. La taille du dégradé correspond à la taille de l'élément auquel il est appliqué.
La fonction Linear-gradient() prend les arguments suivants séparés par des virgules :
- Le premier argument est le degré de l'angle ou des mots-clés qui définissent l'angle de direction de la ligne de dégradé. Argument facultatif.
- Une liste de deux couleurs ou plus, séparées par des virgules, chacune pouvant être suivie d'une position d'arrêt.
Le dégradé linéaire le plus simple ne nécessite que deux arguments spécifiant les couleurs de début et de fin :
Div (image d'arrière-plan : dégradé linéaire (noir, blanc); largeur : 200 px ; hauteur : 200 px ; ) Essayez »
Passer deux arguments à la fonction définit un dégradé vertical avec le point de départ en haut.
La direction de la ligne de pente peut être déterminée de deux manières :
Utiliser des degrés Comme premier argument, vous pouvez transmettre le degré de l'angle de la ligne de dégradé, qui détermine la direction du dégradé, par exemple, l'angle 0deg (abréviation de degré - degré) définit la ligne de dégradé à partir de la bordure inférieure de l'élément vers le haut, l'angle 90deg définit la ligne de dégradé de gauche à droite et etc. En termes simples, les angles positifs représentent une rotation dans le sens des aiguilles d’une montre, les angles négatifs représentent une rotation dans le sens inverse des aiguilles d’une montre.
Utilisation de mots-clés Les mots-clés "vers le haut", "vers la droite", "vers le bas" ou "vers la gauche" peuvent également être passés comme premier argument, ils représentent les angles des lignes de dégradé "0deg" "90deg" "180deg" " 270 degrés" respectivement.
L'angle peut également être défini à l'aide de deux mots-clés, par exemple en haut à droite - la ligne de dégradé est dirigée vers le coin supérieur droit.
Un exemple de dégradé spécifié dans différentes directions :
Div ( marge : 10px ; largeur : 200px ; hauteur : 200px ; float : gauche ; ) #one ( image d'arrière-plan : dégradé linéaire (à gauche, noir, rouge) ; ) #deux ( image d'arrière-plan : dégradé linéaire ( en haut à gauche, noir, rouge ); #trois ( image d'arrière-plan : dégradé linéaire (65 degrés, noir, jaune); ) Essayez »
Comme mentionné, un dégradé linéaire peut inclure une liste de plus de deux couleurs, séparées par une virgule, et le navigateur les répartira uniformément sur toute la zone disponible :
Après une couleur, vous pouvez spécifier une position d'arrêt pour celle-ci, qui détermine l'emplacement de la couleur (où une couleur commence à passer à une autre) par rapport aux points de début et de fin du dégradé. La position d'arrêt est spécifiée à l'aide d'unités ou de pourcentages pris en charge par CSS. Lors de l'utilisation de pourcentages, la position d'arrêt est calculée en fonction de la longueur de la ligne de dégradé. Une valeur de 0 % est le point de départ du dégradé, 100 % est le point final.
Div ( marge : 10 px ; largeur : 200 px ; hauteur : 200 px ; float : gauche ; ) #one ( image d'arrière-plan : dégradé linéaire (en haut à droite, bleu, blanc 70 %, bleu) ; ) #two ( image d'arrière-plan : dégradé linéaire (en bas à droite, jaune 10 %, blanc, rouge, noir 90 %) ;) #trois ( image d'arrière-plan : dégradé linéaire (à droite, noir 10 %, jaune, noir 90 %) ; ) Essayez »
La valeur de couleur peut être spécifiée de différentes manières, par exemple en spécifiant le nom de la couleur, en utilisant des valeurs hexadécimales (HEX), en utilisant la syntaxe RVB (RGBA) ou HSL (HSLA). Par exemple, l'utilisation d'un dégradé avec transparence peut être utilisée en combinaison avec une couleur d'arrière-plan ou une image sous le dégradé pour créer des effets visuels intéressants :
Div ( marge : 10px ; largeur : 300px ; hauteur : 100px ; couleur d'arrière-plan : vert ; ) #one ( arrière-plan : dégradé linéaire (à gauche, rgb(255,255,0), rgba(255,255,0,0)); ) #deux ( arrière-plan : dégradé linéaire(rgb(255,255,255), rgba(255,255,255,0)); )
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.