CSS è pieno di opzioni per migliorare l'aspetto dei tuoi siti web; le ombre del testo e delle caselle sono ottimi esempi. Offrono risultati simili alle ombre trovate nei software di modifica delle immagini come Photoshop.
Ma come funzionano le ombre CSS? Immergiamoci subito.
Come usare CSS Box Shadow
Puoi applicare un'ombra di casella CSS con una singola riga di CSS contenente un intervallo di massimo sei valori. L'ordine dei valori è fondamentale per il funzionamento dell'ombreggiatura della casella CSS e si presenta così:
box-shadow: offset-x offset-y blur spread inserto colore;Diamo un'occhiata a ciascuno dei valori in ordine.
Posizione dell'ombra della casella CSS
I valori offset-x e offset-y controllano la posizione dell'ombra del riquadro. Il valore offset-x rappresenta la posizione orizzontale dell'ombra, mentre offset-y è l'offset verticale.
scatola-ombra: 10px 10px;I valori positivi producono un'ombra sotto ea destra dell'elemento.
Puoi anche utilizzare valori negativi per h-offset e v-offset:
scatola-ombra: -10px -10px;Un offset h negativo sposta l'ombra a sinistra, mentre un offset v negativo la sposta verso l'alto:
Sfocatura dell'ombra della casella CSS
Come puoi vedere, l'aggiunta di h-offset e v-offset alla tua ombra crea un'ombra solida senza sfumatura. Il valore di sfocatura sfoca l'ombra della casella CSS e ha effetto se fornisci un terzo valore:
scatola-ombra: 10px 10px 20px;Più alto è il numero che aggiungi al valore di sfocatura, più sfocata sarà l'ombra della tua casella CSS. Questo valore non può essere negativo.
Diffusione dell'ombra della casella CSS
Il valore di diffusione ti consente di modificare la dimensione della tua ombra senza alterarne la posizione.
scatola-ombra: 10px 10px 20px 30px;Un valore di diffusione positivo ingrandirà l'ombreggiatura della casella CSS, mentre un valore negativo la ridurrà.
Colore ombra casella CSS
Le ombre delle caselle CSS sono predefinite per il colore del testo dell'elemento, ma puoi sovrascriverlo aggiungendo un colore:
scatola-ombra: 10px 10px 20px 10px #0000ff;Il colore che utilizzi deve essere in un formato di colore legale CSS, come un codice esadecimale, un codice RGB o un colore predefinito. Puoi conoscere i codici esadecimali e altre opzioni di colore legali CSS prima di iniziare con le tue ombre.
Inserto ombra casella CSS
Per impostazione predefinita, le ombre dei riquadri CSS cadono al di fuori dell'elemento assegnato. Aggiungendo un inset alla proprietà box-shadow, puoi visualizzare l'ombra all'interno dell'elemento.
scatola-ombra: 10px 10px 20px 10px #0000ff inserto;Questo è un valore di testo predefinito; basta aggiungerlo o rimuoverlo per impostare il valore.
Come utilizzare l'ombreggiatura del testo CSS
Le ombreggiature del testo CSS sono come le ombreggiature dei riquadri, sebbene abbiano meno valori da modificare. La sintassi per un'ombra di testo CSS è simile alla seguente:
text-shadow: offset-x offset-y raggio di sfocatura colore;Ma come funzionano questi valori?
Posizione dell'ombra del testo CSS
Gli offset dell'ombra del testo CSS funzionano in modo molto simile agli stessi valori dell'ombra della casella:
ombra del testo: 10px 10px;I valori positivi posizioneranno l'ombra sotto ea destra del testo.
I valori negativi fanno l'opposto, posizionando l'ombra sopra ea sinistra del testo.
ombra del testo: -10px -10px;Puoi combinare valori negativi e positivi per posizionare perfettamente l'ombreggiatura del testo CSS.
Raggio di sfocatura dell'ombra del testo CSS
Il raggio di sfocatura dell'ombra del testo CSS ti consente di sfocare l'ombra dietro il tuo testo.
ombra di testo: 10px 10px 10px; Il valore predefinito per questo valore è 0 (nessuna sfocatura).
Colore dell'ombreggiatura del testo CSS
Per impostazione predefinita, le ombre del testo CSS corrispondono al colore del testo. Puoi cambiare il colore del tuo testo aggiungendolo alla fine della proprietà CSS text shadow.
ombra del testo: 10px 10px 10px #0000ff;Come i colori dell'ombra della casella CSS, è necessario utilizzare un colore legale CSS per questo.
Esempi di CSS Box e Text Shadow Design
Puoi iniziare a sperimentare con il tuo uso della casella CSS e delle ombre di testo una volta comprese le basi. Le idee di seguito dovrebbero ispirarti a trovare modi creativi per utilizzare queste proprietà CSS.
Bordi a due colori con due ombre di box CSS
Puoi aggiungere più di un'ombreggiatura di riquadro o di testo a un elemento HTML. Finché sono separate da virgole, puoi aggiungere nuove ombre a una singola proprietà.
scatola-ombra: 30px 30px#0000ff, -30 pixel-30 pixel 0px#00ff00;Questo bordo bicolore ne è un buon esempio. Due ombre box CSS con posizioni opposte e nessuna sfocatura/diffusione producono un eccellente bordo creativo.
Doppie ombre di testo CSS per effetti drammatici
In modo simile all'idea sopra, puoi aggiungere e posizionare più ombre di testo per ottenere risultati interessanti.
text-shadow: 35px 20px 4px grigio scuro, -35px -20px 4px grigio scuro;Questo esempio mostra una riga di testo con un'ombra sopra e un'ombra sotto, entrambe con valori di colore basati sul testo.
Sfondi multicolori con ombre di caselle CSS inserite
I CSS sono abbastanza potenti da creare risorse uniche e interessanti senza file esterni. L'uso di un'ombra di riquadro CSS inserita come sfondo è un ottimo esempio di ciò.
scatola-ombra: 20px 10px 10px 40px #000000 inserto, -50px -30px 8px 60px inserto grigio, 30px 20px 6px 90px inserto grigio chiaro;Questa scatola ha uno sfondo bianco, insieme a tre ombre incastonate in diversi colori. Le ombre si sovrappongono l'una all'altra per creare uno sfondo unico.
Migliorare ulteriormente questo effetto è una semplice questione di aggiungendo un elegante gradiente di sfondo CSS al tuo elemento.
CSS Box Shadows & Text Shadows per Creative Web Design
La casella CSS e le ombre di testo sono facili da usare una volta che sai come lavorarci. Ora hai gli strumenti di cui hai bisogno per iniziare a lavorare sui tuoi progetti, ma dovresti continuare a fare ricerche sui CSS per migliorare le tue capacità.
