Comprendre les dégradés linéaires CSS

Patrick Brosset a écrit sur Medium un article super clair pour vraiment comprendre les dégradés linéaires CSS et s'épargner des migraines. Évidemment, La Cascade se devait de traduire notre Frenchie.

Par

Vous souhaitez un joli background en dégradés sur votre site ? background-image: linear-gradient(red, blue); Boum, c’est fait !

Ok, c’est un peu ennuyeux. Si vous voulez en savoir plus, je vous recommande cet article de Chris Coyier et cette page MDN.

Vous êtes toujours là ? Très bien, maintenant nous allons jeter un coup d’oeil à la façon dont les dégradés linéaires fonctionnent en pratique. Pour commencer, on se rappelle la syntaxe d’une fonction de dégradé linéaire :

linear-gradient([<angle> | to <côté-ou-coin>]?, <liste-de-stops-couleur>)

La fonction accepte un premier argument optionnel qui détermine l’angle du dégradé, lequel peut être exprimé soit comme un angle, avec son unité (deg, rad, grad, turn) ou comme un mot-clé sur le modèle “côté-ou-coin”. La fonction accepte ensuite une liste de stops couleur.

La boîte de dégradés

Une image construite avec des dégradés n’a pas de dimensions, elle est infinie, contrairement aux images de background traditionnelles. Ce qui donne une dimension visible aux dégradés, c’est la boîte de dégradés, c’est à dire la surface sur laquelle ils sont affichés.

Typiquement, lorsque vous appliquez une image de background en dégradé linéaire à un élément du DOM, cette surface sera la border-box de l’élément — qui est la même surface sur laquelle une couleur ou une image de background seraient affichées.

Cependant, si vous utilisez également la propriété CSS background-size, fixée par exemple à 200px × 200px, alors la boîte de dégradés aura cette taille et sera positionnée par défaut dans le coin supérieur gauche de l’élément, sauf si vous lui donnez une background-position.

Bref, en lisant ce qui suit, gardez en mémoire que la boîte de dégradés n’est pas toujours positionnée ni dimensionnée de la même façon que l’élément auquel le dégradé est appliqué.

La ligne de dégradé

Dans la boîte de dégradés, la ligne qui passe par le centre et le long de laquelle sont distribués les stops couleur est appelée la ligne de dégradés. Cette ligne est plus simple à comprendre lorsqu’on aborde la question des angles de dégradés, donc attaquons tout de suite la question.

L’angle de dégradé

L’angle d’un dégradé linéaire sert à déterminer la direction vers laquelle se dirige le dégradé. Regardons cela plus en détail.

une ligne traverse une boîte en formant un angle A mesuré à partir de la verticale

Si C est le point central de la boîte de dégradés, alors A est l’angle formé par la ligne verticale passant par C et la ligne de dégradé passant par ce même point.

On peut définir cette angle de deux façons :

  • en utilisant l’un de ces mots-clés : to top, to bottom, to left, to right, to top right, to top left, to bottom right, to bottom left,
  • ou en définissant l’angle par un nombre et une unité, par exemple 45deg, 1turn, …

Si l’angle est omis, la valeur par défaut est to bottom (c’est à dire 180deg ou 0.5turn) :

image
Dans cette image et les suivantes, la boîte de dégradés est le rectangle et la ligne de dégradé est la ligne grise épaisse passant par le centre et le long de laquelle s’affichent les stops couleur.

Dans l’exemple ci-dessus, l’angle n’est pas indiqué, donc le dégradé blanc-vers-rouge va du haut vers le bas, ce qui revient à utiliser le mot-clé to bottom comme ci-dessous.

image

Et comme on le voit dans les deux images qui suivent, to top revient au même qu’un angle de zéro degré :

image
image

Un autre point important à retenir lorsqu’on utilise les mots-clés est que to top right par exemple (ou n’importe lequel des autres mots-clés) dépend des dimensions de la boîte de dégradés.

La logique est que si vous vouliez avoir un dégradé rouge-vers-bleu dirigé vers le coin supérieur droit d’un élément, alors cet élément devrait être exactement bleu dans le coin supérieur droit et la couleur violette au milieu du dégradé devrait se former le long d’une ligne passant par les coins supérieur gauche et inférieur droit. Voyons cela en image :

image

Donc, to top right ne signifie pas que la ligne de dégradé passe par le coin supérieur droit ni que l’angle du dégradé soit de 45 degrés !

Voici comment la ligne de dégradé se déplace lorsque l’angle change :

image
Dans cette animation, l’angle est incrémenté de 0 à 360 degrés par paliers de 10 degrés. La basse résolution du gif permet de voir comment les couleurs sont affichées en lignes, toujours perpendiculaires à la ligne de dégradé.

Récapitulons sur les angles :

  • L’angle est formé par la ligne de dégradé et la ligne verticale partant du centre en direction du haut.
  • 0 degré signifie par conséquent to top.
  • La valeur par défaut d’un angle, s’il est omis, est to bottom qui est équivalent à 180 degrés.
  • Les mots-clés de “coins” dépendent des dimensions de la boîte de dégradés.

La longueur de la ligne de dégradé

Avant de nous pencher sur la façon dont les stops de couleur sont distribués le long de la ligne de dégradé, il nous faut expliquer une chose.

Vous avez sans doute remarqué dans l’animation précédente que les stops couleur sont parfois positionnés en dehors de la boîte de dégradés, ce qui peut semble bizarre à première vue, mais est parfaitement logique une fois qu’on en connaît la raison. Considérons cet exemple :

image

Nous voulons un dégradé, de rouge à bleu, à 45 degrés — mais en raison du ratio d’aspect de la boîte de dégradés, la ligne ne peut pas passer par le coin supérieur droit.

Ce que le navigateur veut faire ici (conformément à la spécification), c’est rendre le coin supérieur droit exactement bleu.

Si nous avions fait partir et arriver la ligne de dégradé aux bords le la boîte, alors la couleur bleue aurait recouvert une surface bien plus grande de la boîte et le dégradé ne se serai pas étendu comme ici.

Par conséquent, pour y parvenir, il nous faut parfois étendre la ligne de dégradé en dehors de la boîte de dégradés.

Il est facile de connaître ses points de départ et d’arrivée. Il suffit pour cela de dessiner une ligne passant par le coin le plus proche et perpendiculaire à la ligne de dégradé. Le point où cette ligne croise la ligne de dégradé est le point de départ (ou d’arrivée) comme on l’a vu dans les trois illustrations qui précèdent. Ce point est bien expliqué dans la spécification.

Stops couleur

Les stops couleur sont organisés en liste, séparés par une virgule, où chaque item peut être défini ainsi : <couleur> [<pourcentage> | <longueur>]?

Il n’est donc pas obligatoire de spécifier où la couleur doit être placée sur la ligne de dégradé. Par exemple, ceci est ok :

image

Aucun des stops couleur n’a de position, c’est donc le navigateur qui détermine leur position.

Dans le cas le plus simple, avec juste deux couleurs, la couleur 1 serait placée à 0% (le début de la ligne de dégradé) et la couleur 2 à 100% (la fin de la ligne de dégradé). Puis, si vous ajoutez une troisième couleur, vous auriez la couleur 1 à 0%, la couleur 2 à 50% et la couleur 3 à 100%, etc.

Dans l’exemple ci-dessus, 5 couleurs sont définies, et le navigateur a calculé leurs positions respectives à 0%, 25%, 50%, 75%, 100%. Il distribue donc à chaque fois les couleurs de manière égale.

Mais bien sûr on peut attribuer des positions à nos stops. Celles-ci peuvent être exprimées sous forme de pourcentage (relatif à la dimension de la ligne de dégradé) ou sous forme de longueur CSS (toutes les unités de longueur CSS fonctionnent).

Considérons cet exemple :

image

Comme vous le voyez, chacun des cinq stops couleur a une position, exprimée en pixels. Ces positions sont calculées à partir du point de départ de la ligne de dégradé.

En utilisant ces positions, nous pouvons créer toutes sortes d’effets intéressants. On peut par exemple utiliser les dégradés pour avoir une succession de couleurs… sans dégradés :

image

Dans l’image ci-dessus, il y a sept stops, organisés de façon à ce que chaque stop commence là où s’arrête le précédent, ce qui signifie que le navigateur n’a pas à remplir l’espace entre les deux stops avec un dégradé.

Bien sûr c’est amusant mais que se passe-t-il si l’on mélange des stops positionnés et non-positionnés ? Vous demandez dans ce cas à votre navigateur de travailler un peu plus et de distribuer automatiquement les stops pour lesquels vous avez omis de mentionner une position :

image

Dans l’exemple simple qui précède, le deuxième stop (orange) n’a pas de position et le navigateur prend le relais, lui trouvant la bonne place entre les deux stops positionnés qui l’entourent. Ici, c’est très facile car les voisins immédiats ont tous deux une position, mais cela devient plus complexe si seuls quelques stops sont positionnés ou s’il n’y a pas de stop positionné avant ou après.

Voyons quelques exemples :

image

Ci-dessus, seul le troisième stop (yellow) est positionné, à 30%. Pour distribuer le reste, le navigateur commence en positionnant le premier à 0% et le dernier à 100%, puis distribue les stops à mi-position : le stop orange se trouve exactement entre 0% et 30%, et le rouge se retrouve entre 30% et 100%.

image

Dans l’image précédente, le premier et le dernier stop sont positionnés, et le reste est distribué de manière égale entre les deux.

image

Bien sûr ce serait trop facile si l’étendue de 0% à 100% ne pouvait pas être dépassée. Mais comme nous le voyons ci-dessus, le dernier stop est positionné à 120% et tous les autres stops doivent être distribués en fonction de cette position (le départ dans notre exemple demeurant la valeur par défaut 0%).

Et si nous voulons faire travailler notre navigateur encore un peu plus, pourquoi ne pas spécifier des positions dans le désordre ?

En effet, les stops couleur sont normalement indiqués dans l’ordre, mais rien ne vous empêche de les donner dans le désordre et rien d’horrible n’en résultera. Votre navigateur vous corrigera simplement, comme on le voit ci-dessous :

image

Nous partons du premier stop (red), positionné à 30%, jusqu’ici tout va bien, puis le deuxième stop est positionné à 10%, ce qui est faux puisque, comme nous l’avons vu, le navigateur s’attend à ce que les stops soient listés dans l’ordre. Ici, le navigateur corrige la deuxième position et la place au même endroit que le premier stop (30%). Puis vient la troisième position (yellow) à 60%, tout va bien, suivie par le quatrième stop (blue) à 40%. Ici aussi, la position est corrigée et placée au même endroit que le stop positionné qui précède.

image

Enfin, dans le dernier exemple ci-dessus le dernier stop (blue) est positionné de manière incorrecte et le navigateur le place au même endroit que le stop positionné qui le précède et qui, dans ce cas, n’est pas son voisin immédiat (yellow), ni même celui situé avant (orange), mais le premier stop (red). Du coup, tous les stops situés entre red et blue prennent cette même position de 30% et deviennent invisibles.

Outils

Toutes les captures d’écran de cet article sont tirées d’un outil simple que j’ai réalisé sur CodePen, qui vous permet d’entrer les arguments de la fonction dégradé linéaire et de voir la boîte de dégradés, la ligne de dégradé, l’angle, les stops couleurs sur l’élément.

See the Pen CSS linear-gradient overlay by Patrick Brosset (@captainbrosset) on CodePen.

Il y a toutes sortes de bugs et de limitation dans cet outil (décrits dans les commentaires du JavaScript), donc n’en attendez pas trop, mais amusez-vous bien quand même.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Autres articles sur les dégradés dans la Cascade

Articles sur les mêmes thèmes dans la Cascade :

Les dégradés CSS, par Chris Coyier
Les motifs CSS3, par Lea Verou


Ressources complémentaires en français

Ressources complémentaires en anglais


original paru le dans Medium.

Sur l’auteur : est développeur chez Mozilla. On peut le suivre sur Medium et sur Twitter.

Traduit avec l’aimable autorisation de Medium et de l’auteur.
Copyright Patrick Brosset © 2015.