¿Cómo se puede hacer un fondo degradado sin imágenes?

Question

Me gusta esto. en general, haré una imagen de 1 px de ancho de esto y luego repeat-x.

pero es posible hacer el mismo tipo de fondo con CSS3, en caso afirmativo, dígame cómo tp hacer lo mismo.

alt text http://shup.com/Shup/367066/110519102044-My-Desktop.png

con toda la compatibilidad del navegador IE 8, 7, 6, FF, Chrome, Safari, iPhone.

Answer 1

Casi todos los navegadores admiten gradientes. Aquí está la CSS que necesita:

.gradient{ 
    /* For any browser that can't create a gradient */ 
    background-color: #EFEFEF; 
    /*//mozilla*/ 
    background: -moz-linear-gradient(top, #efefef, #FFF); 
    /* Chrome/Safari  */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF)); 
    /*IE 6/7 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF'); 
    /*IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)"; 
} 

Answer 2

Creo que es posible que IE 6 y 7 no admitan el gradiente de CSS3. Aunque, puede obtener el código CSS de este sitio http://gradients.glrzad.com/

Answer 3

Pruebe algunos de los generadores de gradiente CSS que se pueden encontrar con una búsqueda en Google, tales como: http://gradients.glrzad.com/

o

http://www.designdetector.com/demos/css-gradients-demo-1.php

también, echar un vistazo a tutorial gradiente de Webkit: http://webkit.org/blog/175/introducing-css-gradients/

y Firefox: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Ahora - esto en mente: Se trata de cosas nuevas - CSS3, que no se ha finalizado todavía. El soporte de navegador para CSS3 es muy innovador. No obtendrás compatibilidad con navegadores cruzados para los navegadores que hayas enumerado. Los últimos Webkit (Safari, Google Chrome) y Firefox son sus mejores apuestas. IE admite filtros. Sin embargo, Opera no admite ningún tipo de gradientes.