Come si può creare uno sfondo sfumato senza immagini?

Question

Ti piace questo. in generale farò 1 px di immagine larga di questo poi sarà repeat-x.

ma è possibile fare lo stesso tipo di sfondo con CSS3, se sì allora dimmi come fare lo stesso.

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

con tutta la compatibilità del browser IE 8, 7, 6, FF, Chrome, Safari, iPhone.

Answer 1

Praticamente tutti i browser supportano le sfumature. Ecco il CSS è necessario:

.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

Penso che IE 6 e 7 non supportino il gradiente CSS3. Anche se, è possibile ottenere il codice CSS da questo sito http://gradients.glrzad.com/

Answer 3

Provate alcuni dei generatori gradiente CSS che si possono trovare con una ricerca su Google, come ad esempio: http://gradients.glrzad.com/

o

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

Inoltre, dare un'occhiata a gradiente di tutorial di Webkit: http://webkit.org/blog/175/introducing-css-gradients/

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

Ora - questo in mente: Questa è roba nuova - CSS3, che non è ancora finalizzato. Il supporto del browser per i contenuti CSS3 è molto all'avanguardia. Non avrai il supporto cross browser per i browser che hai elencato. Gli ultimi Webkit (Safari, Google Chrome) e Firefox sono le tue migliori scommesse. IE supporta i filtri. Opera comunque non supporta alcun tipo di sfumatura.