ICI header("Location: http://www.mytesting.fr ");
TESTS ET ASTUCES DE BLOGUEUR

COMMENT FAIRE UN DEGRADE DE COULEURS AVEC DES EFFETS SPECIAUX.

par André Marini 2 Février 2015, 12:00 Astuces de blogueur

COMMENT FAIRE UN DEGRADE DE COULEURS AVEC DES EFFETS SPECIAUX.

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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</div>

 

RESULTAT

 

commentaires

Haut de page

Theme: Autofocus © 2013 - Hébergé par Overblog