Imparare i codici HTML per applicare sfumature di sfondo per i paragrafi e altre parti delle pagine Web consente di creare effetti di cattura dell'occhio che possono mantenere i visitatori Web persistente sul tuo sito. Gradienti forniscono anche un modo per aggiungere una profondità 3D simulata di elementi della pagina Web, dato che sfumature possono imitare le modifiche in modo chiaro come si illumina alcune superfici.

Dimensione del gradiente

Utilizzare due istruzioni per specificare la dimensione della sfumatura di sfondo. Un'istruzione utilizza il CSS "Altezza" elemento e l'altro utilizza l'elemento di «Riempimento». L'elemento "Height" l'altezza dello sfondo come misurata dal suo bordo superiore al bordo inferiore. L'elemento di «Riempimento» determina il margine tra il bordo della sfumatura e il bordo dello sfondo. Nota che questo margine può spingere altezza di sfondo a una dimensione più grande di quello specificato nell'elemento "Altezza". Inoltre, è possibile utilizzare la parola chiave "auto" come valore per "Altezza", che racconta il tuo browser per ridimensionare questa dimensione al contenuto della pagina Web.

Lo sfondo

Indicare lo sfondo di un elemento HTML per ricevere il riempimento sfumato con l'uso della parola chiave "background". Ad esempio, il seguente estratto utilizza questa parola chiave come parte di una specifica per un gradiente di sfondo che cambia dal blu al bianco. Senza questa parola chiave, il tuo browser non sa che si desidera applicare la sfumatura per lo sfondo.

Priorità bassa: - moz-lineare-gradient(top, #000000, #0000FF);

Il gradiente

I codici HTML che specificano il gradiente stesso variano tra un browser. Firefox e altri browser di Mozilla in grado di convertire i "- moz - lineare-gradiente" parola chiave e i valori che lo seguono a un gradiente di sfondo. Tutti i browser è possono utilizzare la parola chiave "URL", oltre a un file di immagine associato, per eseguire il rendering del gradiente di sfondo. Il primo degli esempi seguenti viene illustrato i codici HTML per il rendering di sfumature di sfondo per i browser Mozilla. Il secondo esempio mostra i codici per tutti i browser.

<!-esempio 1: browser Mozilla-->

< style >

.myGradientStyle () {

Priorità bassa: - moz-lineare-gradient(top, #000000, #0000FF);

Altezza: auto; / gradiente raggiungerà all'altezza dell'elemento /

Imbottitura: 13px; / margine /

}

< / stile >

<!-esempio 2: tutti i browser-->

< style >

. MyGradientStyle () {

Priorità bassa: URL("gradient.gif") 0% 0% repeat-x;

colore: #050505;

Altezza: 150px;

Imbottitura: 13px;

}

< / stile >

L'elemento con gradiente di sfondo

Utilizzare i codici HTML per specificare l'elemento di pagina che si desidera applicare la sfumatura di sfondo di. Per applicare la sfumatura all'elemento del paragrafo, utilizzare il codice HTML per quell'elemento, "< P >." Per applicare la sfumatura a un elemento DIV, utilizzare il tag "< DIV >". Nell'esempio seguente viene applicata una sfumatura per lo sfondo di un elemento SPAN, che consente di modificare lo stile di una porzione di testo all'interno di un paragrafo.

Questo sfondo Mostra un < span class = "MyGradientStyle" > sfumatura < / span >.