Come creare un ombra di goccia in Dreamweaver

June 16

Come creare un ombra di goccia in Dreamweaver


Un ombra rende un oggetto 2-D appaiono 3-D, ponendo ombreggiatura dietro di esso. L'ombreggiatura simula una sorgente di luce, rendendo l'oggetto sembrano stare fuori dalla pagina nello spazio 3-D. Prima di HTML5, la versione più recente linguaggio di markup web, e CSS3, l'ultima versione foglio di stile CSS, i progettisti hanno dovuto creare semplici ombre a editor grafici, come ad esempio Photoshop, e poi importarli in Dreamweaver. CSS è un linguaggio di formattazione elemento di pagina comunemente usato nella progettazione di pagine Web. I nuovi standard HTML5 e CSS3 consentono di creare ombre con il codice, che consente di risparmiare tempo e aiuta a mantenere il file nel complesso le pagine Web 'di dimensioni inferiori.

istruzione

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" dalla lista Tipo di pagina, e poi scegliere "Nessuno" dalla lista Layout. Fai 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 in basso a destra del pannello di stile CSS. Questo apre la finestra di dialogo Nuova regola CSS.

4 Tipo ".h1" nel campo "Nome Selector" e quindi fare clic su "OK". È possibile assegnato un nome qualsiasi selettore che si desidera. Con questo selettore, tutto il testo che si tag con <h1> sarà formato in base a questa regola CSS. Questo apre la definizione regola CSS per .h1 finestra di dialogo.

5 Selezionare "Tipo" nell'elenco Categoria per visualizzare le opzioni per la formattazione del testo. Utilizzare queste opzioni per impostare le proprietà, come la famiglia di font, spessore del carattere, dimensione del carattere e il colore del carattere per questa regola CSS.

6 Fai clic su "OK". Dreamweaver crea una nuova regola CSS denominato ".h1" e la mostra e le sue proprietà nel pannello Stili CSS.

7 Fai clic su "Aggiungi proprietà" nel pannello di stile CSS, e quindi digitare "text-shadow" nel campo Aggiungi proprietà. Questa struttura crea un'ombra di testo. Per creare un'ombra sulla scatola CSS o il contenitore, usare "box-shadow".

8 Fare clic sul campo a destra della vostra nuova regola CSS. Viene visualizzata una finestra di dialogo per impostare le proprietà della ombra, come ad esempio X - Offset, Y - Offset, Blur Radius e colori. Queste opzioni controllano il buio e la nitidezza della vostra ombra. Una tipica goccia ombra testo potrebbe utilizzare le seguenti impostazioni:

X-- Offset = "2" pixel

Y-- Offset = "2" pixel

Blur Radius = "5" pixel

Colore = grigio, o "# 333"

È possibile utilizzare tutte le impostazioni che si desidera personalizzare la vostra ombra. Queste impostazioni creano una piacevole ombra, sobrio che sembra buono con il testo.

9 Fare clic nella pagina Web in cui si desidera inserire il testo con un ombra, e quindi fare clic sul menu a discesa "Regola mirata" nel pannello Proprietà e scegliere ".h1."

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

Consigli e avvertenze

  • ombre possono fare testo di piccole dimensioni, come ad esempio copia del corpo, difficile da leggere. Si dovrebbe usare per il testo del display, come le intestazioni e testo decorativo.
  • Non tutti i browser Web supportano tutte le proprietà HTML5 e CSS3, in particolare alcuni browser web per cellulari. È possibile assicurarsi una più ampia gamma di browser può visualizzare le ombre utilizzando estensioni del browser. Ad esempio, per creare un'ombra per i browser WebKit, che molti browser mobili supportano, si può scrivere la vostra proprietà ombra come segue:
  • -webkit-text-shadow: 2px 2px 5px # 333;
  • La maggior parte dei browser più diffusi supportano le estensioni. Ecco una lista dei browser più popolari e le 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.

Articoli Correlati