DEVENIR-WEBMASTER.COM Log In
 37
download link W3C close

Les Dégradés en CSS

Visiter ma chaine Youtube

# Un dégradé CSS qu'est ce que c'est ? close

Vous avez ci-dessous l'image bitmap d'un dégradé linéaire. Le dégradé se fait suivant un axe vertical et part sur du noir pour aller sur du blanc. Ce dégradé a été fait avec un logiciel graphique.

Image d'un dégradé bitmap

Depuis CSS3 vous avez la possibilité de faire le même dégradé directement en CSS. Les navigateurs de vos clients travaillent à la place de votre serveur. Votre charge réseau diminue. La prise en charge du rendu du document par la feuille de style est améliorée.

De plus le code CSS est particulièrement simple.

Le code CSS d'un dégradé linéaire

Un passage dans Autoprefixer est aujourd'hui encore nécessaire. Ce qui donne le code final avec des contraintes que j'ai choisi volontairement exigeantes.

Le code CSS préfixé d'un dégradé linéaire

# Deux fonctions pour deux types de dégradé. close

Vous devez utiliser la propriété background-image ou son raccourci background et leur affecter une valeur au moyen d'une fonction selon le type du dégradé. Le dégradé prend place au fond d'un conteneur et il faudra penser à donner une taille à ce conteneur.

Il y a deux types de dégradé le dégradé linéaire et le dégradé radial. Dans les deux cas vous pouvez dégrader la couleur et / ou l'opacité.

  1. linear-gradient() pour un dégradé linéaire.

    Fonction linear gradient

    Un dégradé linéaire se fait selon un axe. Vous avez la maîtrise totale de cet axe au moyen du premier argument de la fonction. L'argument suivant contient les informations de départ du dégradé. Ici sa couleur mais vous pouvez aussi spécifier son opacité, son point de départ. Le troisième argument contient les informations d'arrivée.

  2. radial-gradient() pour un dégradé radial.

    Fonction radial gradient

    Un dégradé radial part d'un point ici le centre. Il se propage de manière circulaire ou elliptique autour de ce point. Ces informations sont rentrées en premier argument de la fonction. Les informations de départ et d'arrivée sont ici aussi passées en deuxième et troisième argument.

# Le dégradé linéaire. close

Gérer la direction du dégradé

Par défaut le dégradé linéaire se fait de haut en bas. Vous pouvez avec des mots-clés changer cette direction. Vous avez ci-dessous un dégradé vers la gauche to left qui part du bord droit sur un marron #A0342F pour se dégrader vers la gauche sur un jaune yellow.

Code css d'un dégradé linéaire vers la gauche

Dégradé vers la gauche

Vous pouvez demander un dégradé vers un coin du conteneur. Ci-dessous on souhaite un dégradé vers le coin gauche et bas to left bottom qui partira dans ces conditions et conventionnellement du coin droit et haut sur un marron #A0342F pour se dégrader vers le coin la gauche et bas sur un jaune yellow.

Code css d'un dégradé linéaire vers un coin

Dégradé vers un coin

Vous pouvez demander un dégradé qui suive un axe que vous positionnez en donnant un angle 45deg. Ici le dégradé démarre sur un marron #A0342F pour aller sur un jaune yellow en suivant un axe de 45 degrés. Donc en montant.

Code css d'un dégradé linéaire suivant un angle

Convention angulaire

Dégradé angulaire

Mettre plusieurs couleurs

Vous pouvez demander un dégradé fait de plusieurs couleurs. Ici j'ai ajouté orange.

Code css d'un dégradé linéaire avec plusieurs couleurs

Dégradé plusieurs couleurs

Travailler avec les color stop

Un color stop vous permet de dire qu'à une certaine position du conteneur du dégradé vous voulez une certaine couleur.

Vous pouvez préciser cette position en pixels ou en pourcentage.

Ci-dessous on est sur un dégradé vers la droite to right qui part sur du marron #A0342F pour aller sur du jaune. Le fait de préciser #A0342F 50px demande du marron à cinquante pixels. On va donc rester marron sur une tranche de cinquante pixels. Le dégradé démarrera après.

Code css d'un dégradé linéaire avec color stop en pixels

Ca revient au même que de demander #A0342F , #A0342F 50px, yellow. C'est ce qui est fait ci-dessous.

Dégradé avec color stop en pixels

Ci-dessous le color stop est demandé en pourcentage sur une tranche plus importante pour que ce soit plus facile à voir.

Code css d'un dégradé linéaire avec color stop en pourcentage

Dégradé avec color stop en pourcentage

Avec deux color stop placés au même endroit il n'y a plus de dégradé.

Code css d'un dégradé linéaire avec deux color stop

Dégradé avec deux color stop

Cela revient au même que de demander #A0342F, #A0342F 100px,yellow 100px, yellow. Cette syntaxe permet de bien voir comment spécifier des bandes (dégradées ou pas) dans un conteneur avec des color stop.

# Le dégradé radial. close

Gérer la forme

Vous avez deux valeurs possibles pour la forme d'un dégradé radial. La valeur circle pour un dégradé en forme de cercles concentriques et la valeur ellipse pour un dégradé en forme d'ellipses concentriques. Je vous conseille de préciser explicitement la valeur de cette propriété car il y a plusieurs valeurs par défaut de possibles.

Code css d'un dégradé radial suivant des cercles concentriques

Dégradé en cercles

Code css d'un dégradé radial suivant des ellipses concentriques

Dégradé en ellipses

Gérer la taille

Vous avez quatre valeurs possibles pour spécifier la taille d'un dégradé radial. Les valeurs closest-corner pour le coin le plus proche et farthest-corner pour le coin le plus éloigné. Les valeurs closest-side pour le coté le plus proche et farthest-side pour le coté le plus éloigné.

La valeur par défaut est farthest-corner. Si vous voulez changer vous devez le spécifier après avoir spécifier la forme. Par exemple circle closest-side.

Code css d'un dégradé radial dans le petit côté d'un rectangle

Dégradé dans le côté le plus petit

Code css d'un dégradé radial dans le grand côté d'un rectangle

Dégradé dans le côté le plus grand

Gérer le point de départ

Par défaut le dégradé part du centre. Vous pouvez demander à démarrer ailleurs qu'au centre en utilisant le mot-clé at suivi de la position. Par exemple ici on démarrera sur le coin bas droit at bottom right. Vous pouvez utiliser les mots-clés left, right, top, bottom, center.

Code css d'un dégradé depuis le coin bas droit

Dégradé depuis le coin bas droit

# La spécification CSS3. close

CSS Image Values and Replaced Content Module Level 3

<linear-gradient> = linear-gradient(
[
  [ <angle> | to <side-or-corner> ] ,
]?
<color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

<radial-gradient> = radial-gradient(
[
   [ <shape> || <size> ] [ at <position> ]? ,
 |
   at <position> ,
]?

<color-stop> [ , <color-stop> ]+
)

# La superposition d'un dégradé avec un autre background. close

N'oubliez pas qu'en CSS3 vous avez la possibilité de construire un background multicouche.

# Utiliser un outil pour faire un dégradé CSS ? close

Cet outil permet de fabriquer votre dégradé en voyant en temps réel ce que vous faites.

www.colorzilla.com/gradient-editor

Outils de création de dégradé

C'est un outil qui est similaire aux outils graphiques sauf qu'ici c'est un code CSS qui est généré.

  1. Vous avez à disposition une collection de dégradés prédéfinis. Vous en choisissez un qui soit proche de votre besoin.
  2. Ensuite vous avez des curseursCurseurssur lesquels vous devez cliquer pour accéder aux boutons de réglages. Les curseurs du haut pour l'opacité. Les curseurs du bas pour la couleur.
  3. Vous pouvez ajouter ou supprimer des curseurs en cliquant près de la zone des curseurs ou en les sortant de la zone.
  4. Lorsqu'un curseur est sélectionné vous procédez selon le type de curseur au réglage de sa couleur ou de son opacité au moyen des boutons de réglages.
  5. Vous n'avez plus qu'à récupérer le code CSS. Avec au besoin un tri puis un nouveau passage dans Autoprefixer.

Notez bien que dans les dégradés prédéfinis certains correspondent à des sprites déjà assemblés.

Sprite rollover avec outil de création de dégradé

Vous avez ci-dessous le code d'un tel sprite. Code qui parait bien difficile à trouver sans l'outil.

Code du sprite rollover

Il y a plusieurs autres outils dispo sur le web. Vous avez un autre lien ci-dessous.

Gradient Css Generator

Vous pouvez télécharger ici le nécessaire pour faire le tuto