Accueil    CSS    Propriété linear-gradient
 



style css linear-gradient  Style CSS linear-gradient

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété linear-gradient permet la mise en place de dégradés de façon automatique. Le grand intérêt que l'on peut y voir est l'optimisation du temps de chargement d'une page en remplaçant une image par une déclaration css pure.

Actuellement chaque navigateur se base sur sa propre version de la propriété linear-gradient :
    - Chrome et safari utilisent la propriété -webkit-linear-gradient
    - Firefox utilise la propriété -moz-linear-gradient
    - Opera utilise la propriété -o-linear-gradient
    - Internet Explorer utilise la propriété -ms-linear-gradient

Pour les anciens navigateurs le fallback standard est de définir une couleur de fond unique, excepté Internet Explorer qui supporte le gradient du style css filter.

Il est possible de définir l'orientation du gradient :
    - de façon horizontale (left, right)
    - de façon verticale (top,bottom)
    - sur des diagonales (top left par exemple)
    - en définissant l'angle d'inclinaison (deg)

D'autre part le choix des couleurs peut se faire avec :
    - des couleurs nominatives (red, blue, green ... voir le tableau des couleurs)
    - des couleurs au format hexadécimal (#000000 pour le noir jusqu'à #ffffff pour le blanc)
    - des couleurs au format rgb [red - green - blue], ex : rgb(92,115,198)
    - des couleurs au format rgba acceptant une transparence allant de 0 à 1
       ex : rgba(92,115,198,0.5)
    - des couleurs au format hsl [hue - saturation - Lightness],ex : hsl(231,44%,49%)
    - des couleurs au format hsla acceptant une transparence allant de 0 à 1
       ex : hsla(231,44%,49%,0.5)

Finalement, le gradient n'est pas limité à une couleur de début et une de fin. Il est possible de définir de nombreuses couleurs intermédiaires chacune associée à un pourcentage indiquant son application sur le gradient.


Définition d'un gradient appliquant 5 couleurs différentes
background: linear-gradient(top left, #7aad22 0%,#124560 40%,#14827e 75%,#14827e 90%,#3b6d5e 100%);


Propriétés pour le style linear-gradient :




Propriété Définition Valeurs CSS
linear-gradient Permet de créer des dégradés linéaires :
linear-gradient([orientation], Liste[couleur %])
CSS 3
[orientation] Orientation du dégradé pouvant être horizontal vertical ou en diagonale top,
bottom,
left,
right,
deg
CSS 3
[couleur - pouccentage] Couple couleur - pourcentage permettant de définir la couleur employée et sa zone d'application dans le dégradé color,
#hexa,
rgb(),
rgba(),
hsl(),
hsla()
CSS 3


Exemple d'utilisation du style css linear-gradient :





Quelques exemples de dégradés avec le style linear-gradient (fallback pour IE avec filter) :

<div style="width:100px; height:100px; border:solid 1px black; display:inline-block; margin:10px;
    background-color:orange;
    background: -webkit-linear-gradient(top,red 00%,orange 50%,yellow 100%);
    background: -moz-linear-gradient(top,red 0%,orange 50%,yellow 100%);
    background: -o-linear-gradient(top,red 0%,orange 50%,yellow 100%);
    background: -ms-linear-gradient(top,red 0%,orange 50%,yellow 100%);
    background: linear-gradient(top,red 0%,orange 50%,yellow 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red',
    endColorstr='yellow',GradientType=0);">
</div>

<div style="width:100px; height:100px; border:solid 1px black; display:inline-block; margin:10px;
    background-color:steelblue;
    background: -webkit-linear-gradient(top left,steelblue 0%,silver 50%,black 100%);
    background: -moz-linear-gradient(top left,steelblue 0%,silver 50%,black 100%);
    background: -o-linear-gradient(top left,steelblue 0%,silver 50%,black 100%);
    background: -ms-linear-gradient(top left,steelblue 0%,silver 50%,black 100%);
    background: linear-gradient(top left,steelblue 0%,silver 50%,black 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='steelblue',
    endColorstr='silver',GradientType=0);">
</div>


<div style="width:100px; height:100px; border:solid 1px black; display:inline-block; margin:10px;
    background-color:silver;
    background: -webkit-linear-gradient(top right,silver 0%,white 15%,firebrick 50%, white 85%, silver 100%);
    background: -moz-linear-gradient(top right,silver 0%,white 15%,firebrick 50%, white 85%, silver 100%);
    background: -o-linear-gradient(top right,silver 0%,white 15%,firebrick 50%, white 85%, silver 100%);
    background: -ms-linear-gradient(top right,silver 0%,white 15%,firebrick 50%, white 85%, silver 100%);
    background: linear-gradient(top right,silver 0%,white 15%,firebrick 50%, white 85%, silver 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='silver',
    endColorstr='firebrick',GradientType=0);">
</div>