Degradados con css3

Una de las nuevas caracteristicas que nos trae css3 son los degradados. Lo malo, es que no todos los navegadores tienen implementada esta nueva funcionalidad igual, por lo que para conseguir un degradado mediante css tendremos que hacerlo de diferentes formas para que se vea bien en todos los navegadores. Eso sin contar los navegadores antiguos que ni siquieran soportan css3.

/*Navegadores no soportados*/
background: #f5f5f5 url(images/bg.jpg) repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, 
   from(#f5f5f5), to(#e1e1e1));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #e1e1e1, #f5f5f5);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #e1e1e1, #f5f5f5);
/* Opera 11.10+ */
background: -o-linear-background(top, #e1e1e1, #f5f5f5);
/* IE 10 */
background: -ms-linear-background(top, #e1e1e1, #f5f5f5);
/* estándar */
background: linear-background(top, #e1e1e1, #f5f5f5);

En el ejemplo se muestra como conseguir un degradado lineal en los distintos navegadores. Para los navegadores que no soportan css3, podemos crear una imagen del degradado conseguido en un navegador que si muestra el degradado css3 (pantallazo y recortar) y emplear esta imagen para crear el efecto de degradado.

El ejemplo en funcionamiento

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque arcu, hendrerit molestie vestibulum vitae, lobortis in massa. Suspendisse potenti. Etiam ut nunc justo, nec rutrum erat.