Dégradés de couleur
Il existe quatre types de dégradés qui correspondent à quatre propriétés CSS.
- Le dégradé linéaire
- Le dégradé radial
- Le dégradé linéaire avec répétition
- Le dégradé radial avec répétition
Pour ajouter un dégradé on emploie la propriété background-image suivi de deux points. La syntaxe nécessite l'emploi des parenthèses et attend au moins deux couleurs nommées en anglais, soit un code héxadécimal soit une valeur RVB, elles doivent être séparées par une virgule.
Le dégradé linéaire
On emploie la propriété CSS linear-gradient pour le créer.
Dans cet exemple les valeurs héxadécimales ont été employées
background:linear-gradient(#f8fc8b,#2b9ad3);
Pour que les dégradés soient visibles dans tous les navigateurs, cela nécessite l'emploi de préfixes : -moz pour mozzilla, -o pour opéra, et -webkit pour safari et chrome. Voici donc le code complet :
background:linear-gradient(#f8fc8b,#2b9ad3); background:-webkit-linear-gradient(#f8fc8b,#2b9ad3); background:-moz-linear-gradient(#f8fc8b,#2b9ad3); background:-o-linear-gradient(#f8fc8b,#2b9ad3);
Régler la direction de son dégradé
Si je ne précise rien, le dégradé part du haut vers le bas, de la première couleur indiquée à la suivante. Si je souhaite lui donner une direction, je le précise :
- to top : vers le haut
- to bottom : vers le bas (par défaut)
- to right : vers la droite
- to left : vers la gauche
- to top right : vers en haut à droite
- to bottom left : vers en bas à gauche
Dans cet exemple le dégradé part sur la droite, et avec des couleurs en anglais.
background-image: linear-gradient(to right, red , yellow);
Le dégradé avec plusieurs couleurs
Il est possible d'augmenter le nombre de couleurs du dégradé. Voici un exemple ci dessous :
Dans cet exemple les manières d'écrire les couleurs sont mélangées, cela fonctionne.
background-image: linear-gradient(to right, blue, green, #0ff, rgb(200, 30, 170));
Le dégradé radial
On emploie la propriété CSS radial-gradient pour le créer
Le centre du dégradé par défaut est centré. L'ellipse est la forme par défaut. Il est possible de régler la forme et le placement du centre avec les valeurs suivantes :
- ellipse : forme ovale
- cicrle : forme ronde
- closest-corner : vers le coin le plus proche
- closest-side : vers le côté le plus proche
- farthest-corner : vers le coin le plus éloigné
- farthest-side : vers le coté le plus éloigné
background-image: radial-gradient(circle, red, yellow, green);
Le dégradé linéaire avec répétition
On emploie la propriété CSS repeating-linear-gradient pour le créer
background: repeating-linear-gradient(white, green 100px);
Le dégradé radiale avec répétition
On emploie la propriété CSS repeating-radial-gradient pour le créer
background: repeating-radial-gradient(red, yellow 10%, green 15%);