Les dégradés en CSS3

Deux propriétés linear et radial sont proposés par CSS3 pour gérer le gradient sur les arrière-plans.

Il s’agit de linear-gradient pour les dégradés linéaires et radial-gradient pour les dégradés radiaux.

Mode d’emploi pour linear-gradient

La fonction linear-gradient permet de créer un dégradé linéaire. Elle prend 3 valeurs, dont 2 sont obligatoires :

  • direction du dégradé (optionnel)
  • couleur de départ
  • couleur de fin

Les dégradés linéaires empruntent la valeur de la fonction linear-gradient() de la propriété background.

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 RGB

Dégradé du rouge au vert

gradient_4colour

Dégradé du vert vers la transparence

gradient_transparent

Mode d’emploi pour radial-gradient

Les dégradés radiaux sont réalisables par la valeur-fonction radial-gradient(). Il suffit d’indiquer la forme du dégradé : circulaire (circle) ou elliptique (ellipse) ainsi que son point de départ.

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

Exemple de dégradé de type radial elliptique ( forme)

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.

gradient_radial

 

Et vous savez quoi ? Pour nous faciliter la tâche je vous propose d’utiliser tout simplement l’ Ultimate CSS Gradient Generator qui génèrera, le code nécessaire pour notre dégradé.

Répondre