• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 08/01/2018

Des dégradés natifs

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous venons tout juste de voir comment manipuler nos arrière-plans de façon un peu plus complète que nous voici déjà face à une autre problématique : quid des dégradés ?

Faire un dégradé sur son site, ça se résume souvent à réaliser une image avec notre éditeur graphique favori et à l'afficher en tant que fond, tout en la répétant horizontalement ou verticalement.

CSS3 va nous permettre de faire de cette technique une astuce non optimisée. Eh oui, car grâce à CSS3, les navigateurs peuvent générer eux-mêmes nos dégradés !

Les dégradés linéaires

La première chose que vous devez savoir pour réaliser un dégradé en CSS : il faut utiliser la propriété background-image. Oui, encore elle !

Ce n'est pas forcément logique, je vous le concède, mais c'est ainsi, il faut faire avec.

Seconde chose à savoir, bien plus ennuyeuse : les navigateurs modernes ont besoin de leur préfixe pour interpréter les dégradés. Ce qui signifie que vous pouvez dire adieu à la validité de votre code selon W3C. :(
Cela est fort dommage, car ils interprètent tous les dégradés correctement !

Tous ? Non !
Car un certain Internet Explorer résiste encore et toujours à l'appel du progrès. Et la vie n'est pas facile pour nous autres pauvres développeurs...

Il est malgré tout intéressant de regarder comment réaliser ces dégradés. Commençons tout d'abord par observer la syntaxe d'un dégradé linéaire :

background-image: -moz-linear-gradient(couleur1,couleur2,...,couleurN);
background-image: -webkit-linear-gradient(couleur1,couleur2,...,couleurN);
background-image: -o-linear-gradient(couleur1,couleur2,...,couleurN);

Comme vous le voyez, la fonction linear-gradient prend en paramètre une liste de couleurs : peu importe le nombre, le navigateur générera un dégradé contenant toutes ces couleurs, dans l'ordre où elles ont été définies. Un petit exemple ?

background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
Image utilisateur

Et voilà comment générer un (relativement) magnifique arc-en-ciel. :D
Comme vous pouvez le constater, le dégradé se dirige, par défaut, vers le bas de notre élément. Il est possible de modifier ce comportement en indiquant une direction en premier paramètre. Cette direction est une valeur en degrés. Ainsi, pour définir un dégradé allant vers la droite, il nous faut préciser un angle de 0deg (n'oubliez pas le deg !) :

background-image: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
Image utilisateur

Vous pouvez bien entendu spécifier la valeur d'angle que vous le souhaitez, et je vous invite grandement à faire vos petites expériences. Ceci vous permettra de bien maîtriser cette propriété CSS, et surtout de constater que la valeur par défaut de la direction est de 270deg (ce qui, au passage, ne correspond pas aux recommandations du W3C :waw: ).

Si vous avez visité le lien ci-dessus, vous avez pu constater qu'il existe une façon bien plus intuitive d'indiquer une direction : utiliser des mots-clés. Pour notre dernier exemple, il suffirait donc d'utiliser la valeur to right pour que notre dégradé aille vers la droite ! :)

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

Il existe bien entendu un mot-clé pour chaque direction (to left, to bottom etc.) et il est également possible de les combiner pour viser les coins : to top left, to bottom right etc.

Avant de passer aux dégradés circulaires, il me semble important de préciser deux derniers points à propos des couleurs :

  • Le premier, très important, est que vous pouvez préciser une couleur selon n'importe quelle notation CSS : que ce soit leur nom anglais comme on vient de le voir, la notation hexadécimale, la notation RGB(A) ou encore la notation HSL(A) (hé bien oui, vous savez l'utiliser maintenant ! :D ).

  • Le second point est que vous pouvez également préciser une valeur en pourcentage juste après une couleur. Ce pourcentage indiquera alors où doit se trouver la zone "pure" de cette couleur.

Et là, je suis sûr que vous êtes à peu près comme ça devant votre écran : o_O

Je l'admets, ce n'est pas très clair, est un exemple sera probablement plus explicite !

background-image: linear-gradient(yellow 0%, red 100%);
Image utilisateur

Rien de bien extraordinaire, me direz-vous, mais essayons de comprendre ce qui s'est passé !

Tout d'abord, nous n'avons pas spécifié de direction : notre dégradé commence donc depuis le haut et se dirige vers le bas.

Le premier paramètre vaut yellow 0%. Il indique que la première couleur du dégradé doit être jaune (mais ça, vous l'aviez deviné tout seul, je suppose ! :-° ). Le 0% signifie que ce jaune doit être le plus pur possible (c'est-à-dire jaune de chez jaune !) à 0% du dégradé.
Pour bien comprendre cette drôle d'expression qu'est "à 0% du dégradé", il faut voir le dégradé comme un chemin parcouru par notre couleur : 0% représente alors le point de départ et 100% l'arrivée.

yellow 0% signifie donc : "Au début de ton chemin, la couleur doit être d'un jaune pur".
Le troisième paramètre, red 100%, indique par conséquent : "Une fois arrivé à la fin de ton chemin, la couleur doit être d'un rouge pur".

Bien entendu, comme nous voulons générer un dégradé, le navigateur s'occupe tout seul de la variance des teintes entre ces deux étapes. :D

Un autre exemple pour être sûr que vous ayez bien compris :

linear-gradient(45deg, blue 10%, black 50%, green 90%);
Image utilisateur

Notre dégradé est bien composé de bleu, de noir et de vert, et il part dans une direction de 45 degrés, c'est-à-dire vers le coin supérieur droit.

Le bleu est pur à 10% du "chemin", le noir à 50% et le vert à 90%. Ne vous fatiguez pas à vérifier, je l'ai fait pour vous. :)

Image utilisateur

Circulez !

Maintenant que vous maîtrisez comme des chefs les dégradés linéaires (enfin, je l'espère du moins :-° ), voyons un autre type de dégradés : les dégradés circulaires.

Ceux-ci se font non plus avec la valeur linear-gradient(), mais avec radial-gradient().

Voici donc la syntaxe de radial-gradient() :

radial-gradient(red, orange, yellow, green, blue, indigo, violet);

Ca ne vous rappelle rien ? :)

Reprenons nos exemples de dégradés linéaires pour voir ce que ça donne avec cette nouvelle propriété :

radial-gradient(red, orange, yellow, green, blue, indigo, violet);
Image utilisateur

On constate que la première couleur définie se trouvera au centre du dégradé : plus une couleur est définie tardivement, plus elle sera éloignée du centre !

Nous pouvons également remarquer que, dans le cas d'élément rectangulaire comme notre exemple, le dégradé circulaire "s'étale" et ne forme pas un cercle parfait, mais une ellipse.
radial-gradient accepte en effet en premier paramètre une valeur (qui peut être soit ellipse, soit circle) afin de définir la forme du dégradé. Vous l'aurez deviné, la valeur par défaut de ce paramètre est donc ellipse. :p
Changeons donc tout ceci en précisant circle :

radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet);
Image utilisateur
Le GROS point qui fâche : aller plus loin avec les dégradés circulaires

Tout ceci est bien joli, mais quoiqu'un peu limité malgré tout : nous ne pouvons même pas déplacer le centre de nos dégradés !

C'est maintenant que nous allons découvrir la joie de travailler avec des spécifications en cours de développement : il faut savoir que la syntaxe des dégradés, que ce soient les linéaires ou les circulaires, a grandement évolué ces dernières années.
Si ce n'est pas trop important pour les dégradés linéaires, il en est tout autrement pour les circulaires : en effet, la syntaxe actuelle n'a pratiquement plus rien à voir avec l'ancienne !

Résultat ? AUCUN des navigateurs actuels ne gère complètement cette nouvelle syntaxe et, si nous souhaitons respecter parfaitement les normes, nous sommes limités à ce que nous venons de voir... :(

Cependant, afin de ne pas vous laisser trop dans l'ignorance, je me permets de laisser ci-dessous l'ancienne version de ce chapitre. Il traite de l'ancienne syntaxe de radial-gradient, vous risquez donc d'être un petit peu dépaysé.

Voici donc l'ancienne syntaxe de radial-gradient() :

radial-gradient(centre,forme comportement,couleur1,couleur2,...,couleurN);

En sachant que :

  • centre indique le centre de notre cercle. Il s'agit en général de deux pourcentages séparés par un espace. Ainsi 50% 50% indiquera le centre de notre élément HTML.
    Il est possible d'utiliser également des mots-clés tels que top ou left, mais le résultat peut être différent selon le paramètre comportement... Je vous conseille donc d'utiliser les pourcentages. ;)

  • forme peut être soit ellipse, soit circle. Si vous souhaitez avoir un cercle parfait, vous utiliserez cette dernière valeur, ce qui est assez logique en soi !

  • comportement peut prendre 4 valeurs différentes ! Nous y reviendrons dans quelques instants.

  • Les couleurs, enfin, se gèrent comme pour linear-gradient() : il nous suffit d'indiquer une couleur à appliquer et le pourcentage du "chemin" où cette couleur doit être 100% pure.
    Attention toutefois, nous sommes maintenant dans un cercle : le chemin complet correspond au rayon du cercle, tandis que son départ est représenté par son centre !

Jusque-là, seul le paramètre comportement devrait vous donner du souci : regardons-le donc en détail.

Comme son nom l'indique, il permet de définir le comportement de notre dégradé : celui-ci doit-il être étiré jusqu'aux bords de l'élément ? Ou jusqu'à ses côtés ?

Par conséquent, comportement définit également la longueur du rayon du cercle.

Voici les valeurs qu'il peut prendre :

  • cover

  • contain

  • closest-corner

  • farthest-side

cover : un dégradé couvrant tout l'élément

Nous avons déjà vu ce mot-clé dans le chapitre précédent avec background-size. Son effet est ici similaire : avec cette valeur, notre dégradé sera le plus grand possible et couvrira tout notre élément HTML. Pour vulgariser, cela signifie à peu près que la dernière couleur du dégradé se verra le moins possible.

radial-gradient(20% 70%, ellipse/circle cover, red 10%, blue 90%)

ellipse

circle

Image utilisateurImage utilisateurImage utilisateurImage utilisateur

J'espère que vous avez compris cette histoire de pourcentages, car c'était assez long de les représenter sur ces schémas. :D

contain : un dégradé entièrement contenu dans l'élément

Un autre revenant de background-size ! Avec cette valeur, notre dégradé sera le plus grand possible tout en étant entièrement visiblement dans l'élément HTML. A l'inverse de cover, cela signifie à peu près que la dernière couleur du dégradé se verra le plus possible.

radial-gradient(20% 70%, ellipse/circle contain, red 40%, blue 90%)

ellipse

circle

Image utilisateurImage utilisateurImage utilisateurImage utilisateur
closest-corner : va au coin !

Cette valeur demande au dégradé de s'étendre jusqu'au coin le plus proche du centre du cercle.

radial-gradient(20% 70%, ellipse/circle closest-corner, red 40%, blue 90%)

ellipse

circle

Image utilisateurImage utilisateurImage utilisateurImage utilisateur

Comme vous pouvez le voir dans cet exemple ci-dessus, le coin le plus proche du centre est l'inférieur gauche, et notre dégradé s'est bien étendu jusqu'à lui. :)

farthest-side : mettons le dégradé de côté

Avec cette valeur, le dégradé s'étendra jusqu'au côté de l'élément HTML le plus éloigné par rapport au centre du cercle.

radial-gradient(20% 70%, ellipse/circle farthest-side, red 40%, blue 90%)

ellipse

circle

Image utilisateurImage utilisateurImage utilisateurImage utilisateur
Un petit mot pour conclure sur les dégradés circulaires

Vous allez dire que je radote mais, encore une fois, même si cette ancienne syntaxe fonctionne sur la plupart des navigateurs récents vous ne devez pas l'utiliser.
Cela dit, la connaître peut vous être utile, car la nouvelle syntaxe s'en approche beaucoup : voici, par exemple, ce qu'il faudra écrire pour générer le dernier dégradé du tableau précédent :

radial-gradient(farthest-side at 20% 70%, red 40%, blue 90%);

Cependant, ce tutoriel n'insiste pas trop sur cette syntaxe car, encore une fois, aucun des navigateurs actuels n'est capable de la comprendre... :(
Ce chapitre sera mis à jour en même temps que les navigateurs (ou un peu plus tard... :-° ).

Combiner des dégradés

Nous venons juste de voir que les dégradés se font via la propriété background-image.

Or, nous avons appris dans le chapitre précédent que background-image peut désormais accepter plusieurs valeurs.
La logique voudrait donc qu'il soit possible de combiner plusieurs dégradés sur un seul et même élément HTML : eh oui, nous le pouvons ! :D

Cependant, pour pouvoir voir les dégradés des couches inférieures, il est nécessaire que ceux des couches supérieures soient semi-transparents...

Ce problème n'en est pas vraiment un puisque, comme nous l'avons vu avec le chapitre traitant des couleurs, CSS3 nous permet d'ajouter un canal alpha dans la composante de nos couleurs.

Voici donc un exemple de ce que nous pouvons faire :

/* Combinons tous les dégradés que nous avons vus en jouant avec leur opacité ! */
background-image: 
    radial-gradient(rgba(255,0,0,0.1) 10%, rgba(0,0,255,0.2) 90%),
    linear-gradient(90deg, rgba(255,255,0,0.7) 0%, rgba(255,0,0,0.3) 100%),
    linear-gradient(33deg, blue 10%, black 50%, green 90%);

N'oubliez pas : la première valeur indiquée dans background-image définit le fond qui sera affiché au-dessus de tous les autres.

Image utilisateur

Le résultat n'est pas forcément sublime, je dois l'avouer. :-°
Mais tout de même, songez que nous avons réalisé ce type de fond en n'utilisant uniquement du CSS !

Des navigateurs dégradants

Avant de clôturer ce chapitre, revenons un peu sur Internet Explorer.

Comme nous l'avons vu, celui-ci ne gère en aucun cas les dégradés CSS3, que ce soient les linéaires ou les circulaires.

Cependant, comme pour les ombres, il existe un filtre Microsoft qui permet de gérer les dégradés avec son navigateur.
Malheureusement, comme pour les ombres, cette propriété est clairement moins personnalisable et non-valide W3C.

Voici donc la bête :

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='COULEUR_DEBUT',endColorstr='COULEUR_FIN',GradientType=TYPE);

startColorstr (couleur du début) et endColorstr (couleur de fin) attendent bien entendu une couleur : comme pour le filtre des ombres, je vous conseille d'utiliser la notation hexadécimale.

GradientType ne peut prendre que deux valeurs : 0 ou 1.
S'il vaut 0, le dégradé ira de la gauche vers la droite. S'il vaut 1, il ira de haut en bas.

Et c'est tout !

Voici ci-dessous une mise en pratique afin d'avoir un dégradé linéaire sur tous les navigateurs :

/* Pour ce dernier exemple, mettons tous les préfixes navigateurs :) */

/* D'abord Firefox */
background-image: -moz-linear-gradient(blue 0%,green 100%);

/* Puis Google Chrome / Safari */
background-image: -webkit-linear-gradient(blue 0%,green 100%);

/* Et Opera */
background-image: -o-linear-gradient(blue 0%,green 100%);

/* Pour les navigateurs venant du futur qui comprendront la version normée */
background-image: linear-gradient(blue 0%,green 100%);

/* Et enfin, Internet Explorer ! */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff',endColorstr='#00ff00',GradientType=0);

Essayer !

Malheureusement, en ce qui concerne les dégradés circulaires, il va falloir tirer un trait dessus...

Cela dit, ils devraient arriver dans leurs prochaines versions, alors tout n'est pas perdu ! :)

Générer des dégradés est donc d'une simplicité déconcertante avec CSS3. Oubliez tous vos outils graphistes perfectionnés, c'est maintenant votre navigateur Internet qui gère tout ça !

Cela dit, même si ça peut paraître "cool" d'avoir des dégradés sur votre site Web, n'en abusez pas : ils peuvent devenir très vite bien gênants pour la lecture.

Préférez donc un petit dégradé léger du jaune vers l'orange plutôt que le dégradé de barbare allant du bleu vers le rouge (comme on a pu le voir dans les exemples ! :p ).

Un dégradé doit être discret et apporter un petit plus à votre site : s'il commence à rendre vos visiteurs aveugles, c'est qu'il y a un problème quelque part ! ;)

Exemple de certificat de réussite
Exemple de certificat de réussite