Blog iamvdo.meLes dégradés permettent de créer une image qui représente une transition douce d’une couleur à une autre.
Les types de dégradés
Il existe 4 types de dégradés, qui sont les suivants :
-
linear-gradientpermet de créer un dégradé linéaire. -
radial-gradientpermet de créer un dégradé radial. -
repeating-linear-gradientpermet de créer un dégradé linéaire avec répétition. -
repeating-radial-gradientpermet de créer un dégradé radial avec répétition.
La syntaxe du W3C
background: linear-gradient( to top, red, green);
background: linear-gradient( to top right, #000, #FFF);
background: radial-gradient( ellipse at top left, red, green);
background: radial-gradient( closest-corner at center, #000, #FFF);L’implémentation dans les navigateurs
Les dégradés CSS sont reconnus dans IE 10, Firefox 3.6, Chrome 10, Safari 5.1, Opéra 11.6, iOS 5 et Android 4 de manière préfixée et grâce à une ancienne syntaxe (sans mot-clé to ni at)
Voici l’écriture d’un même dégradé nouvelle et ancienne version :
/* syntaxe officielle */
background: linear-gradient( to right, #000, #FFF);
/* syntaxe reconnue dans les navigateurs cités ci-dessus */
background: linear-gradient( left, #000, #FFF);Note : une ancienne version pour Webkit peut encore quelquefois être utilisée. Il est conseillé de ne plus l’utiliser.
La syntaxe des dégradés doit encore être préfixée, sans oublier la dégradation gracieuse...
div{
background: ... ; /* dégradation couleur ou image */
background: -webkit-linear-gradient( ... );
background: -moz-linear-gradient( ... );
background: -ms-linear-gradient( ... );
background: -o-linear-gradient( ... );
background: linear-gradient( ... );
}Note :
- IE10, Firefox 16 et Opera 12.1 supportent les fonctions non-préfixées.
Plus de détails sur les dégradés linéaires ou les dégradés radiaux sur les pages dédiées.
#1par Jahson, le 4 juin 2012
Bonjour,
Simplement magnifique.
Comment on peut récupérer les codes exemples ?
Super boulot !!!
#2par charguie, le 7 février 2013
Bonjour,
juste une question svp, j’essaie d’utiliser un dégradé en mettant une image (type pattern png avec un fond transparent) mais est-ce que cela est possible en utilisant les shortcuts de la propriété background (exemple background : linear-gradient( ... ) url (images/patterng.png) repeat-x top left ;), je n’arrive pas à le mettre en place ...merci.
#3par css3create, le 7 février 2013
@charguie : Tu peux utiliser la syntaxe des arrière-plans multiples (avec une virgule), comme ceci :
background: linear-gradient( ... ) , url( ... );. Le premier arrière-plan de la liste apparaît au premier plan, le dernier en arrière-plan.#4par charguie, le 7 février 2013
yeah, thanks you made my day :) (merci pour la réponse rapide)