J'ai déjà rédigé un article sur les dégradés de couleurs mais sans effets spéciaux.
Voici maintenant les dégradés de couleurs avec quelques effets assez sympathiques.
Le dégradé de couleurs vertical:
CODE
<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>
RESULTAT
Le dégradé de couleurs en diagonale, coin inférieur gauche vers coin supérieur droit.
CODE
<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>
RESULTAT
Le dégradé de couleurs en diagonale, coin supérieur gauche vers coin inférieur droit.
CODE
<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>
RESULTAT
Haut de page
commentaires