Anche se sfondi sfumati orizzontale non sono comunemente-veduti nelle pagine Web, sono possibili e non difficile da fare. Attraverso l'uso di gradienti lineari in CSS3, è possibile creare sfumature senza immagini. Se si desidera supportare Internet Explorer, è possibile utilizzare Modernizr per impostare un fallback di un'immagine di sfondo affiancata che contiene la sfumatura.

Gradienti CSS

Browser che supportano i gradienti CSS3 offrono due tipi di gradienti: lineare e radiale. Gradienti lineari si fondono colore da un'estremità dello schermo a altro, e questo tipo di sfumatura può iniziare in qualsiasi lato o angolo del browser.

Browser che supportano CSS gradienti

A partire da questa scrittura nell'ottobre 2011, i browser più moderni supportano sfumature lineari, ma è necessario utilizzare un prefisso di browser come "-moz" per Firefox o "-webkit" per Chrome e Safari:

-webkit-lineare-gradient(left, black, white);
-moz-lineare-gradient(left, black, white);
-o-lineare-gradient(left, black, white);

Opera supporta anche gradienti lineari con il "-o" prefisso, ma Internet Explorer 9 e sotto non supporta gradienti CSS3 affatto. Quando si utilizza il codice CSS che richiede browser prefissi, includere sempre una versione senza prefisso del codice da utilizzare quando la proprietà diventa uno standard ufficiale.

Fare un'orizzontale gradiente in CSS

Maggior parte dei siti web impiegano gradienti verticali nei loro progetti, ma ciò non significa sfumature orizzontali non sono possibili. Impostazione della direzione di "sinistra" creerà una sfumatura orizzontale:

immagine di sfondo: lineare-gradient(left, black, white);

Le sfumature vengono impostate come le immagini di sfondo degli elementi HTML, se non sono in realtà le immagini stesse. Il primo valore è la direzione, dove è possibile utilizzare un valore in gradi come "90deg." o "sinistra" Semplici sfumature a due colori richiedono solo un iniziale e finale, che è possibile specificare utilizzando i nomi dei colori, i codici esadecimali e valori RGB.

Creazione di un Fallback per i browser Non supporta

Il metodo standard di settore per il rilevamento di funzionalità supportate nei browser è Modernizr. Questo JavaScript rileva caratteristiche e, quando un browser manca loro, inserisce classi speciali nel tag "< body >" di una pagina Web. Questo consente di scrivere codice CSS per i browser che non supportano la funzionalità più recenti, quali gradienti. Il vecchio metodo di creare sfondi sfumati utilizzato un piccolo, ripetendo grafico che conteneva un pezzettino dell'immagine gradiente, che il designer ha creato in un editor di grafica:

. no-cssgradients () {
Priorità bassa: url('path/to/gradient.gif') repeat-y;
}