Codice HTML per le sfumature del fondo

March 16

Imparare i codici HTML per l'applicazione di gradienti di sfondo per i paragrafi e altre parti delle pagine Web consente di creare accattivanti effetti che possono trattenere i visitatori sul web persistente sul tuo sito. Sfumature forniscono anche un modo per aggiungere un simulato profondità di 3-D agli elementi nella pagina Web, dal momento gradienti possono imitare la luce cambia modo che illumina alcune superfici.

gradiente Size

Utilizzare due istruzioni per specificare la dimensione del gradiente. Una istruzione utilizza l'elemento CSS "Altezza" e l'altro utilizza l'elemento "riempimento". L'elemento "altezza" imposta l'altezza dello sfondo misurata dal suo bordo superiore al suo bordo inferiore. L'elemento "riempimento" determina il margine tra il bordo del gradiente e il bordo dello sfondo. Si noti che questo margine può spingere l'altezza del fondo ad una dimensione più grande di quello specificato nell'elemento "Altezza". Inoltre, è possibile utilizzare la parola chiave "auto" come valore per "altezza", che racconta il browser a misura questa dimensione al contenuto della pagina Web.

Lo sfondo

Indicare lo sfondo di un elemento HTML per ricevere il riempimento sfumatura con l'utilizzo del "fondo" parola. 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 browser non sa che si desidera applicare il gradiente allo sfondo.

sfondo: -moz-linear-gradient (in alto, # 000000, # 0000FF);

il gradiente

I codici HTML che specificano il gradiente stessa variano tra i browser. Firefox e altri browser da Mozilla in grado di convertire la parola "-moz-linear-gradient" ei valori che lo seguono ad uno sfondo sfumato. Tutti i browser possono utilizzare la parola chiave "URL", oltre a un file di immagine associato, per rendere lo sfondo sfumato. Il primo dei seguenti esempi sono riportati i codici HTML per rendere i gradienti di sfondo per i browser Mozilla. Il secondo esempio mostra i codici per tutti i browser.

<! - Esempio 1: Mozilla Browser ->

<Style>

.myGradientStyle {

sfondo: -moz-linear-gradient (in alto, # 000000, # 0000FF);

height: auto; / Gradiente raggiungerà l'altezza di un elemento /

padding: 13px; / Margine /

}

</ Style>

<! - Esempio 2: Tutti i browser ->

<Style>

.MyGradientStyle {

fondo: URL ( "gradient.gif") 0% 0% repeat-x;

color: # 050505;

altezza: 150px;

padding: 13px;

}

</ Style>

L'elemento con gradiente di sfondo

Utilizzare i codici HTML per specificare quale elemento di pagina che si desidera applicare lo sfondo sfumato a. Per applicare il gradiente all'elemento paragrafo, utilizzare il codice HTML per l'elemento "<P>." Per applicare il gradiente ad un elemento DIV, utilizzare il tag "<DIV>". L'esempio seguente applica un gradiente allo sfondo di un elemento SPAN, che consente di modificare lo stile di una parte di testo all'interno di un paragrafo.

Questo sfondo mostra una <span class = "MyGradientStyle"> gradiente </ span>.


Articoli Correlati