Niveau : Débutant

Arrière-plans avec CSS3 Backgrounds

Tutoriel par (Art Director & Creative Designer, Paris)
Créé le , mis à jour le (251218 lectures)
Tags : css, background, css3, degrades, radial-gradient, linear-gradient

Sommaire


Les dégradés en CSS

De nouvelles propriétés permettent de réaliser et gérer des arrière-plans de teintes dégradées. Il s'agit de linear-gradient pour les dégradés linéaires et radial-gradient pour les dégradés radiaux.

Syntaxe pour linear-gradient

Les dégradés linéaires empruntent la valeur-fonction linear-gradient() de la propriété background-image (ou background en raccourci). Il convient de préciser au minimum le point d'arrivée du dégradé ainsi que deux couleurs (ou plus).

background : linear-gradient(x y, couleur1, couleur2, couleurN)

Valeurs possibles

  • x et/ou y définissent la direction du dégradé. Exemple : "to right" ou "to left bottom",
  • couleur : le nom, la valeur hexadécimal ou la valeur RGBa

Dégradé du rouge au violet

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

Linear gradient

Dégradé du vert au transparent

background: linear-gradient(to right, green, rgba(0,255,0,0));

Linear gradient transparent

Anciennes syntaxes linear-gradient

Vous risquez de rencontrer des syntaxes de dégradé radial suivantes sur d'anciens tutoriels ou de vieux navigateurs. Sachez qu'elles ne sont plus standardisées et ne seront plus maintenues à l'avenir par les navigateurs :

background: linear-gradient(top, green, blue); 
/* faux : il faut indiquer la position finale, donc to bottom */

background: linear-gradient(bottom right, green, blue);
/* faux : il faut indiquer la position finale, donc to left top */

Syntaxe pour radial-gradient

Les dégradés radiaux sont réalisables à l'aide de la valeur-fonction radial-gradient(). Elle nécessite d'indiquer la forme du dégradé : circulaire (circle) ou elliptique (ellipse) ainsi que son point de départ.

background : radial-gradient(forme at x y, couleur1, ..., couleurN)

Valeurs possibles

  • x et/ou y définissent le point d'origine du dégradé radial,
  • couleur : le nom, la valeur hexadécimal ou la valeur RGBa

Dégradé de type radial

background: radial-gradient(ellipse at center top, green, blue);

On définit les couleurs du centre (verte) et externe (bleu) ainsi que la forme et la position initiale. Elles sont complétées par le rayon s'il s'agit d'un dégradé radial.

Anciennes syntaxes radial-gradient

Vous risquez de rencontrer des syntaxes de dégradé radial suivantes sur d'anciens tutoriels ou de vieux navigateurs. Sachez qu'elles ne sont plus standardisées et ne seront plus maintenues à l'avenir par les navigateurs :

background: radial-gradient(center top, green, blue);
/* faux : il faut indiquer la position initiale et la forme, donc ellipse at center top */

background: radial-gradient(circle, center, green, blue);
/* faux : il faut indiquer la position initiale et la forme, donc circle at center */

 

Radial gradient

Démonstrations

Prise en charge

Ces propriétés CSS3 sont prises en charges avec des préfixes dans la plupart des moteurs, par exemple -moz-radial-gradient et –moz-linear-gradient avec Firefox 3.6+, ou -webkit-gradient dans Safari 5+, et -ms-linear-gradient sous IE10+.

Navigateurs Versions
Internet Explorer Internet Explorer 10
Firefox Firefox 16+
Firefox 3.6 (avec préfixe -moz-)
Chrome Chrome 3+ (avec préfixe -webkit-)
Safari Safari 5+ (avec préfixe -webkit-)
Safari Mobile (3.2 partiel, 5.0, avec préfixe -webkit-)
Opera Opera 12.1+
Opera 11.1 (partiel avec préfixe -o-)
Android Android 2.1+ (partiel avec préfixe -webkit-)
Android 4+ (avec préfixe -webkit-)

Outils

En attendant que toutes ces propriétés soient supportées sans préfixes dans la majorité des navigateurs, il est possible de se servir d'un générateur pour obtenir les différentes syntaxes automatiquement à partir des codes couleurs, par exemple avec :