Blog iamvdo.meLa 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
La direction du dégradé par défaut est to bottom dans la nouvelle syntaxe (C’est où le dégradé va !). Dans l’ancienne syntaxe, la direction par défaut était top (C’est d’où le dégradé part).
Dégradé rouge/bleu du haut vers le bas
background: linear-gradient( red, blue);Dégradé rouge/bleu de la droite vers la gauche
/* Nouvelle syntaxe */
background: linear-gradient( to left, red, blue);
/* Ancienne syntaxe */
background: linear-gradient( right, red, blue);Dégradation gracieuse
La syntaxe préconisée à l’heure actuelle est la suivante, sachant que le module concernant les dégradés est arrivé en CR (les préfixes devront être enlevés bientôt), et que par conséquent les navigateurs supporteront la dernière déclaration :
background: -webkit-linear-gradient( right, red, blue);
background: -moz-linear-gradient( right, red, blue);
background: -ms-linear-gradient( right, red, blue);
background: -o-linear-gradient( right, red, blue);
background: linear-gradient( to left, red, blue);Note : IE10, Firefox 16 et Opera 12.1 supportent les fonctions non préfixées.
Voici également un petit conseil pour l’utilisation des dégradés linéaires verticaux.
Retour sur les Dégradés CSS
#1par AYMANE, le 20 août 2012
merçi pour ce tutoriel ^^
#2par Lu, le 5 octobre 2012
Thx ! :)
#3par Samira, le 23 octobre 2012
Merci très intéressant
#4par Guillaume, le 1er novembre 2012
Merci :)
#5par ouali, le 19 novembre 2012
Merci pour le tuto, je trouve ça intéressant. Par contre, je voudrais appliquer un dégradé du haut en bas, mais qui commencera à partir d’une certaine distance. ça veut dire qu’en deça d’une certaine hauteur, je veux pas de dégradé. est-ce faisable ?
#6par css3create, le 19 novembre 2012
@ouali : Oui tu peux faire quelquechose du genre :
linear-gradient( transparent 10px, red 10px, blue)pour un dégradé rouge vers bleu qui commence à 10px du bord haut !#7par Minekev, le 28 décembre 2012
Il faut appliquer cette instruction directement dans une ligne CSS ?
Par ex : border : 3px linear-gradient(blue, red) ridge ;