Un'ombra rende un oggetto 2D appaiono 3-d inserendo l'ombreggiatura dietro di esso. L'ombreggiatura simula una sorgente di luce, rendendo l'oggetto che sembra di stare fuori dalla pagina nello spazio 3D. Prima di designer HTML5, l'ultima versione di Web markup language e CSS3, la versione di foglio stile CSS Ultima, ha dovuto creare ombreggiature semplice in editor di grafica, ad esempio Photoshop e poi importarli in Dreamweaver. CSS è un elemento di pagina formattazione linguaggio comunemente usato nella progettazione di pagine Web. Il nuovo standard HTML5 e CSS3 consentono di creare ombre con codice, che consente di risparmiare tempo e aiuta a mantenere globale file di dimensioni pagine Web più piccole.

Istruzioni

1

Creare un nuovo documento HTML5 in Dreamweaver. Fare clic sul menu "File" e scegliere "Nuovo". Verrà visualizzata la finestra di dialogo nuovo documento. Scegliere "HTML" dall'elenco tipo di Page e quindi scegliere "None" dall'elenco Layout. Fare clic sul menu a discesa "DocType" e scegliere "HTML 5" e quindi fare clic su "Crea".

2

Fare clic sul menu "Finestra" e scegliere "Stile CSS" per visualizzare il pannello di stile CSS.

3

Fare clic sul pulsante "Aggiungi nuova regola" nell'angolo inferiore destro del pannello di stile CSS. Verrà visualizzata la finestra di dialogo nuova regola CSS.

4

Digitare ".h1" nel campo "Nome del selettore" e quindi fare clic su "OK". È possibile denominare il selettore tutto quello che vuoi. Con questo selettore, tutto il testo che voi tag con < h1 > formatterà secondo questa regola CSS. Verrà visualizzata la definizione della regola CSS per .h1 di dialogo.

5

Selezionare "Tipo" nell'elenco delle categorie per visualizzare le opzioni per la formattazione del testo. Utilizzare queste opzioni per impostare le proprietà, quali la famiglia di caratteri, tipo di carattere, dimensione e colore del carattere per questa regola CSS.

6

Fare clic su "OK". Dreamweaver crea una nuova regola CSS denominata ".h1" e visualizza esso e le sue proprietà nel pannello Stili CSS.

7

Scegliere "Aggiungi proprietà" nel pannello di stile CSS e quindi digitare "text-shadow" nel campo Aggiungi proprietà. Questa proprietà crea un'ombreggiatura del testo. Per creare un'ombra sulla CSS scatola o contenitore, utilizzare "box-shadow."

8

Fare clic sul campo a destra della tua nuova regola CSS. Verrà visualizzata una finestra di dialogo per impostare le proprietà di vostro drop shadow, come X - Offset, Y - Offset, raggio di sfocatura e colore. Queste opzioni controllano l'oscurità e la nitidezza della vostra ombra. Un'ombreggiatura testo tipico potrebbe utilizzare le seguenti impostazioni:

X - Offset = "2" pixel

Y - Offset = "2" pixel

Raggio di sfocatura = "5" pixel

Colore = grigio, o "n. 333"

È possibile utilizzare tutte le impostazioni che si desidera personalizzare la tua ombra. Queste impostazioni creano un'ombra piacevole, sobrio che sembra buona con testo.

9

Fare clic nella pagina Web cui si desidera inserire il testo con un'ombreggiatura e fare clic sul menu a discesa "Regola di destinazione" nel pannello Proprietà e scegliere ".h1."

10

Digitare il testo. Dreamweaver non può visualizzare l'ombra in visualizzazione struttura. Fare clic sul pulsante "Live View" sotto la barra dei menu per vedere l'ombra.

Consigli & Avvertenze

• Le ombre di goccia possono rendere difficile la lettura testo di piccole dimensioni, ad esempio copia corpo. Utilizzarlo per la visualizzazione di testo, quali intestazioni e testo decorativo.
• Non tutti i browser Web supportano le proprietà tutte HTML5 e CSS3, soprattutto alcuni browser Web mobile. È possibile assicurarsi che una più ampia gamma di browser può vedere il tuo ombreggiature utilizzando le estensioni del browser. Ad esempio, per creare un'ombra esterna per browser WebKit, che supporta molti browser mobili, è necessario scrivere la proprietà shadow goccia come segue:
• -webkit-text-shadow: 2px 2px 5px #333;
• Più popolari browser supportano le estensioni. Ecco un elenco dei browser più diffusi e loro estensioni:
• Microsoft Internet Explorer = -ms
• Browser Mozilla = - moz
• Opera e Opera Mobile = -o
• Browser WebKit = - webkit
• Si noti che Google Chrome e Firefox sono i browser Mozilla e Apple Safari è un browser WebKit.