Dreamweaver CS6: Aggiungere ombre di testo con CSS3 - dummies

Parte di Dreamweaver CS6 For Dummies Cheat Sheet

In Dreamweaver CS6, puoi migliorare i tuoi disegni e dare profondità alle tue pagine aggiungendo ombre di testo con le regole CSS3, ultime novità nella tecnologia web. L'aggiunta di ombre di testo rende le tue parole più facili da leggere, specialmente se il tuo disegno ha uno sfondo complesso o se i colori dello sfondo e del testo non hanno contrasto.

credito: Paul Gual, istockphoto. com

Dreamweaver CS6 include il supporto per le ombre di testo CSS3 quando si utilizza il pannello Proprietà nel pannello Stili CSS. È possibile creare stili di classe o ID con ombre di testo ed è possibile aggiungere ombre di testo a elementi HTML esistenti definendo uno stile di tag, come lo stile di titolo 1 utilizzato nell'immagine.

Il codice CSS3 che crea quell'ombra di testo è

h1 {text-shadow: 2px 2px 3px # 000;}

I numeri nel codice specificano che l'ombra del testo deve estendersi di 2 pixel a destra e 2 pixel sotto il testo con una sfocatura di 3 pixel. Inoltre, l'ombra viene creata con il colore nero, specificato dal codice colore esadecimale # 000 abbreviato.

Quando si creano regole per le ombre del testo è possibile specificare fino a quattro valori:

• Orizzontale e verticale: I primi due valori numerici sono obbligatori e specificano gli offset orizzontali e verticali: la distanza l'ombra esterna si estende sotto il testo (orizzontale) ea destra del testo (verticale).

• Raggio di sfocatura: Il terzo valore indica la quantità di sfocatura nell'ombra. Se non includi il raggio di sfocatura, il valore predefinito è 0, che fa apparire l'ombra come un colore solido.

• Colore: Il quarto valore specifica il colore dell'ombra e può essere definito utilizzando un codice colore esadecimale o un codice colore RGBa.

È possibile aggiungere un'ombra di testo utilizzando il riquadro Proprietà nella parte inferiore del pannello Stili CSS, come mostrato nell'immagine. Per eseguire questa operazione, attenersi alla seguente procedura:

1. Fare clic sul collegamento Aggiungi proprietà nella parte sinistra del riquadro Proprietà stili CSS.

2. Immettere il nome della regola di stile CSS3, text-shadow o selezionare la regola di stile dall'elenco a discesa.

   Dopo che il nome appare sul lato sinistro, appare una piccola freccia sulla destra.

3. Fare clic per selezionare la freccia a destra dell'intestazione del testo.

   Viene visualizzata una finestra.

4. Immettere gli offset X e Y, il raggio di sfocatura e il colore.