Thursday, June 16, 2011

Cross-Browser CSS Linear Gradients


.gradient
{

background-color: #DDDDDD; /*fallback*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC)); /*safari4+,chrome*/
background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC); /*chrome10+,safari5.1+*/
background-image: -moz-linear-gradient(top, #FFFFFF, #CCCCCC); /*ff3.6+*/
background-image: -ms-linear-gradient(top, #FFFFFF, #CCCCCC); /*ie10*/
background-image: -o-linear-gradient(top, #FFFFFF, #CCCCCC); /*opera11.1+*/
background-image: linear-gradient(top, #FFFFFF, #CCCCCC);

zoom:1; /*iefix*/
/*GradientType 0=vertical, 1=horizontal*/
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr='#FFFFFF', EndColorStr='#CCCCCC');

}

No comments:

Post a Comment