Dégradé en CSS3

De nouvelles propriétés CSS3 permettent de réaliser des arrière-plans en teintes dégradées.

Elles s'appliquent aux navigateurs modernes, dont est exclue la version 3.5 de Firefox (décidément !).

Du coup j'ai viré mon image en teintes dégradées du footer et j'ai mis un fallback pour les anciens browsers.
En bas ça donne donc :


#bott {
background: #C12100 url(css-ss/footer-fallback.png) repeat-x left top;/* le fallback */
background-size: 100% 100%; /* w3c spec */
-moz-background-size: 100% 100%; /* firefox css*/
-webkit-background-size: 100% 100%; /* safari/chrome */
-o-background-size: 100% 100%; /* opera css */ 
clear:both;
color:#fff;
min-height:158px;
padding:2em 5em 10em;
background-image: -moz-linear-gradient(left, right,
                          from(#BD2001),
                          to(#CC3300));
background-image: -webkit-gradient(linear, left top, left bottom,
                   	 	  color-stop(0.00, #BD2001),   
                  		  color-stop(1.00, #CC3300));
/* IE le vieux code - GradientType=1 pour horizontal, 0 pour vertical */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',
                startColorstr=#BD2001, 
                endColorstr=#CC3300, 
               GradientType=0); 
}

Un bon article sur le sujet des dégradés en CSS3 : CSS3: To Infinity And Beyond!


Les commentaires pour ce billet sont fermés