Un'ombra è un effetto visivo che prende un oggetto e disegna colori aggiuntivi dietro di esso per dare l'impressione che l'oggetto ha un'ombra. In HTML, è possibile utilizzare le classi CSS per creare un effetto di ombra dietro il testo o un'immagine che sfuma in background, come un'ombra grigia che sfuma in una priorità bassa bianca. È anche possibile controllare le dimensioni dell'ombreggiatura con l'aggiunta di altre classi. Ad esempio, utilizzando quattro classi e un contenitore crea un'ombra che è di 5 pixel di larghezza.

Istruzioni

1

Aprire il file CSS. Digitare il seguente codice:

corpo () {
Priorità bassa: #FFFFFF;
}

DropShadow, dropshadow .drop2, #dropshadow .drop3, #dropshadow .drop4, #dropshadow container {

Posizione: relativo;
sinistra:-1px;
Top:-1px;
}

La regola di corpo Imposta sfondo bianco della pagina Web. Le classi e le regole dropshadow specificano che ogni ulteriore livello dell'ombra deve spostare fino e poi a sinistra di 1 pixel ciascuno, relativamente al livello in cui esiste. Più goccia strati che si utilizza, il bordo dell'ombra diventa più spessa.

2

Digitare il seguente codice:

DropShadow .drop1 {background: #E6E6E6;} DropShadow .drop2 {background: #C8C8C8;} DropShadow .drop3 {background: #AAAAAA;} DropShadow .drop4 {background: #8C8C8C;}

Questo crea quattro classi di goccia-strato che si applicano alla regola dropshadow. Ogni classe utilizza una diversa tonalità di grigio, con drop1 essendo il più leggero e drop4 più bui. Con lo sfondo bianco della pagina Web, questo effetto schiarente dà l'impressione che l'ombra sfuma lo sfondo della pagina.

3

Digitare il seguente codice:

DropShadow. container {

Priorità bassa: #FFFFFF;
border: 1px solid #6E6E6E;
padding: 5px;
}

Questa classe crea la vera e propria casella dove si include il testo o l'immagine attorno al quale si desidera aggiungere l'ombra. Lo sfondo bianco copre le scatole di goccia dietro di esso, e il confine è ancora un'altra tonalità di grigio anche più leggero di quello della classe drop1. La proprietà padding mette semplicemente un po' di spazio tra l'interno bordo della casella di destinazione e l'oggetto all'interno.

4

Salvare e chiudere il file CSS. Aprire il file HTML e digitare il seguente codice:

< div id = "dropshadow" >
< div class = "drop1 drop2" >
< div class = "drop3 drop4" >
< div class = "container" >
Questo è il testo all'interno della scatola.
< / div >
< / div >
< / div >
< / div >

La prima linea chiama la regola dropshadow, che imposta la casella. Le due righe successive chiamano le classi di quattro goccia. Maggior parte dei browser consentono di supportare fino a due classi, pertanto è possibile chiamare tutte le classi di quattro goccia utilizzando due elementi elementi HTML. La quarta riga crea il contenitore stesso che contiene l'oggetto all'interno, ad esempio il testo sulla quinta riga. Le ultime quattro righe chiudere gli elementi.

5

Salvare e chiudere il file HTML.