Le ombre per le finestre sulle pagine Web aggiungono profondità e stile ai vostri progetti Web. Anche se non è un effetto che rende i siti Web più fruibile per i visitatori, le ombre di goccia guardare bene. È possibile aggiungere ombre senza molto sforzo utilizzando codice CSS3. Impostare la proprietà di "box-shadow" per creare ombre per qualsiasi elemento HTML---quali tag HTML creare quando viene letto da un browser--- e dargli un offset, blur radius e colore. Box-shadow sono compatibili con tutti i browser moderni, tra cui Internet Explorer 9 e versioni successive.

Istruzioni

1

Aprire il file CSS per il tuo sito o trovare i tag < style > nella parte superiore del file HTML. Aggiungere di apertura e chiusura tag < style > per < head > del file HTML se non si utilizza un file CSS esterno e non vedere nessun tag < style >. Il tag < style > dovrebbe assomigliare a questo:

< style type = "text/css" >

< / stile >

2

Scrivi il tuo selettore per impostare come destinazione l'elemento HTML cui si desidera aggiungere un'ombreggiatura. Il selettore "Seleziona" elemento HTML dal relativo tag, ID, nome della classe o una combinazione di nessuna di queste cose. Qui è un selettore per un tag < div > con un nome di classe di "ombra":

div.Shadow {}

Sostituire il punto con un simbolo di cancelletto per selezionare un tag dal relativo ID anziché il relativo nome di classe. Se si desidera, eliminare il nome del tag. Ecco un esempio:

myshadow {} 3

Impostare la proprietà di breve mano "box-shadow" per i valori desiderati per offset, raggio e ombreggiatura di colore. Ecco un esempio:

myshadow {

box-shadow: 5px 5px 10px #000000;

}

Il codice sopra imposta gli offset superiore e sinistro - quanto vuoi all'ombra per spostare in alto e sinistra dell'elemento HTML - per cinque pixel ciascuno. Impostare il terzo valore per la quantità di raggio di sfocatura che si desidera aggiungere all'ombra. Impostare il colore dell'ombreggiatura selezionate Ultima, utilizzando un codice esadecimale o il nome del colore.

4

Duplicare la vostra proprietà di "box-shadow" e le relative impostazioni e quindi aggiungere il "-moz" prefisso fornitore per la proprietà. Essa sarà simile a questo:

-moz-box-shadow: 5px 5px 10px #000000;

Questo codice rende ombre casella compatibile con Firefox 3.5 e versioni successive. Firefox 4 non ha bisogno di un prefisso del fornitore. Ripetere questo passaggio e aggiungere "-webkit" invece di "-moz" per fornire il supporto per browser basati su Webkit come Chrome e Safari.

Consigli & Avvertenze

• Utilizzare un colore diverso dal nero o grigio per le ombre di goccia. Utilizzare colori RGBa per impostare il proprio livello di opacità dell'ombra. Ecco l'esempio di RGBa: box-shadow: 5px 5px 10px rgba(0,0,0,0,0.5);
• Mantenere il vostro proprietà con prefisso vendor adiacente a vicenda. Quando tutti i browser moderni non richiedono i prefissi, aprire il tuo file CSS e rimuovere il codice con prefisso. Codice ben organizzato rende questo compito più semplice e veloce.
• Versioni di Internet Explorer 8 e qui di seguito non sono compatibili con la proprietà di "box-shadow". Considerare le ombre di goccia casella come un effetto di "progressive enhancement" o aggiungere il supporto con un JavaScript.