All Articles Dreamweaver
Creazione di testo Grande con CSS3 in Dreamweaver
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

Se vi è stato utilizzando il pannello Stili CSS per lo stile delle pagine web in Dreamweaver allora si sarà a conoscenza delle restrizioni imposte su di voi per quanto riguarda il design. Colori solidi, caratteri standard, forme ecc blocco ogni capacità interessante, ma non veramente impegnativo CSS.

Quindi, in questo articolo Im intenzione di mostrare un po CSS per aggiungere ai vostri stili di Dreamweaver in grado davvero di creare alcuni grandi disegni.

Cominciamo con la creazione di un tag div che conterrà il vostro stile stupendo in procinto di creare.


Fase 1 - Aggiungere un Div PA

A partire da un documento HTML vuoto aprite il Pannello di Insert e impostarlo su Layout. Dal layout opzioni scegliere Draw Div AP.

Div drawn

Div disegnato


Utilizzare lo strumento per disegnare un Div AP (che è solo un tag div con uno stile # ID applicato automaticamente contenente i parametri di posizione e dimensioni). Utilizzare il pannello delle proprietà alla taglia del Div AP Altezza: 400px e larghezza: 400px.


Fase 2 - Assegnare un nome al Div AP

Aprire il pannello Elementi PA e rinominate il APDiv1 a MyStyle. Aprire il pannello di stile CSS e se si vuole che ri-denominazione del Div PA anche ri-nomi del MyStyle Style ID. Questo è lo stile che vi sarà la modifica.


Step 3 - trova il codice CSS

Passare alla visualizzazione Split in modo da poter vedere sia l'immagine e il youve codice creato. Scorrere fino alla sezione e vedrete una sezione di codice evidenziata in color magenta che dice # MyStyle {}. Questo è il vostro CSS e tutte le impostazioni per esso che si stanno per creare siederà in-tra i due {}.


Fase 4 - Aggiungete un po 'di contenuto

Per risparmiare tempo a digitare, copia e incolla di un paragrafo di testo in Div cliccando sul Div disegnato AP nella vista Struttura, in modo che il cursore si trasforma in attivo e premendo Comando-V per incollare.

rounded corners

angoli arrotondati


TIP: Aumentare la dimensione del raggio esattamente a metà della larghezza e altezza (in questo caso 200px) e l'anteprima di nuovo .... Hey si ottiene un cerchio perfetto!


Fase 6 - gradiente di sfondo

Aggiunta di un gradiente di sfondo è un effetto design davvero bello, tuttavia si dovrebbe sempre tenere a mente che non tutte le versioni di tutti i browser lo supportano. Quindi, sempre e solo usarlo per migliorare un'immagine. Sempre progettare le cose con più browser in mente e hanno un riempimento a tinta unita disponibili pure.

gradient background

gradiente di sfondo


Il codice seguente consente di creare questo gradiente di sfondo:

background-color: # 666666;

background-image:-moz-lineare gradiente (in alto, # 666666, # 333333 40,0%);

background-image:-webkit-lineare gradiente (in alto, # 666666, # 333333 40,0%);

background-image:-o-lineare gradiente (in alto, # 666666, # 333333 40,0%);

background-image:-ms-lineare gradiente (in alto, # 666666, # 333333 40,0%);

background-image: gradiente lineare (in alto, # 666666, # 333333 40,0%);


Metti alla prova in alcuni browser, se possibile, per vedere l'effetto. Infine permette di aggiungere un po 'pugno al testo.


Fase 7 - Migliorare il testo

Ive ha aggiunto Bianco al testo, per farlo risaltare meglio contro il gradiente. Anche Ive ha aggiunto Ombra esterna al testo. Come l'Ombra esterna Gradient funziona solo con le versioni più recenti dei browser Web Non sempre contare su di esso.

drop shadow

Ombra


Questo codice aggiunge l'Ombra Colore and Drop:

color: # FFFFFF;

text-shadow: 2px 3px 2px # 000000;


Fase 8 - Better Font?

Infine ho aggiunto un font migliore e un po 'padding, per creare uno spazio attorno al testo.

Better text

Migliore testo


Con l'aggiunta di queste righe:

font-weight: normal;

text-align: left;

font-family: Georgia, serif;

font-size: 18.0px;

line-height: 140%;

padding: 10px;


Ecco il codice che ho aggiunto a raggiungere questo obiettivo. Ancora una volta la sua pena di controllare per la compatibilità browser per vedere dove po 'di codice non funziona per alcuni browser e tenendo questo in mente quando si progettano le pagine.

I browser sono in fase di aggiornamento per tutto il tempo per sostenere CSS3 e HTML 5 quindi non essere troppo spaventati per usarle, basta essere consapevoli. Qualcuno di più non sono solo i browser web tradizionali siete in grado di puntare con questo codice, come Safari, Chrome e Firefox, ecc Funziona perfettamente anche su iOS e Android anche. Se questo non lo rende vale la pena allora che cosa farà?



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: