Quando si progetta un sito Web, assicurarsi che l'aspetto generale del sito Web sia esteticamente piacevole per migliorare l'esperienza dell'utente. A tale scopo è possibile aggiungere immagini o testo sul tuo sito Web, tuttavia, l'aggiunta solo del testo semplice può avere un impatto negativo sull'esperienza dell'utente, pertanto, per migliorare la bellezza del testo semplice puoi aggiungere un effetto ombra ad esso utilizzando il CSS Proprietà del testo-shadow.

Abbiamo progettato questo tutorial per farti imparare come rendere il tuo testo semplice interessante in diversi modi aggiungendo ombre di testo.

Cominciamo.

Ombra di testo CSS

È possibile aggiungere un'ombra sul testo che appare su pagine Web utilizzando la proprietà CSS Text-Shadow. Qui dimostreremo diversi modi in cui puoi usare per aggiungere ombra al tuo testo.

Aggiungi ombra orizzontale e verticale

Per aggiungere un'ombra su un testo in orizzontale e verticalmente, dai semplicemente valori di entrambe le dimensioni della proprietà del testo-shadow. Segui l'esempio di seguito.

Html

Ciao mondo

Qui abbiamo creato un

elemento e aggiunto un po 'di testo in esso.

CSS

H1
text-shadow: 2px 2px;
colore blu;

Usando la proprietà del testo-shadow stiamo dando 2px alle dimensioni orizzontali e verticali del testo. Inoltre, stiamo fornendo anche il colore blu al testo.

Produzione

Un'ombra orizzontale e verticale è stata aggiunta al testo.

Aggiunta di colore all'ombra

Un'altra cosa divertente che puoi fare è aggiungere colore insieme all'ombra al testo. Utilizzare il seguente frammento di codice.

CSS

H1
text-shadow: 2px 2px blu;

Oltre a dare un certo valore a dimensioni orizzontali e verticali del testo, stiamo anche fornendo il colore dell'ombra. Questo colore non è applicato all'ombra non sul testo.

Produzione

L'ombra è stato dato il colore blu.

Aggiungi un effetto sfocato all'ombra

Ai fini dell'aggiunta di un effetto sfocato all'ombra, è necessario specificare l'intensità della sfocatura come terzo valore per la proprietà di text-shadow. Segui il codice qui sotto.

CSS

H1
text-shadow: 2px 2px 6px RGB (255,20.147);

Nel codice sopra, due valori della proprietà text-shadow rappresentano la lunghezza dell'ombra orizzontale e verticale e il terzo valore rappresenta l'intensità della sfocatura. Abbiamo anche fornito all'ombra un colore rosa intenso.

Produzione

L'effetto sfocato è stato aggiunto con successo.

Aggiungi un effetto bagliore all'ombra

Per aggiungere un effetto bagliore proprio dietro il testo, segui l'esempio seguente.

CSS

H1
text-shadow: 0 0 5px rosso;

Nello snippet di codice sopra, per aggiungere un effetto luminoso stiamo assegnando 0px alle dimensioni orizzontali e verticali del testo, inoltre, dando un certo valore al raggio della sfocatura insieme al colore rosso.

Produzione

Un effetto luminoso è stato aggiunto al testo.

Aggiunta di più ombre

Per aggiungere numerose ombre sul testo, è possibile aggiungere un elenco di ombre nella proprietà di text-shadow separata da virgole.

CSS

H1
text-shadow: 3px 3px 4px giallo, 4px 4px 6px viola;

Nell'esempio sopra, stiamo aggiungendo un effetto ombra giallo e viola al testo.

Produzione

Più ombre sono state aggiunte correttamente.

Aggiunta di uno schema al testo

Per aggiungere uno schema al testo utilizzando la proprietà Testo-Shadow, segui l'esempio seguente:

CSS

H1
Colore: bisque;
text -shadow: 1px 1px nero, -1px -1px nero;

Nell'esempio sopra, abbiamo assegnato un'ombra di colore nero con dimensioni 1px destra e giù e dimensioni superiore e sinistra.

Produzione

È stato aggiunto uno schema al testo.

Conclusione

Per rendere interessante il tuo testo semplice, puoi aggiungere un effetto ombra ad esso utilizzando la proprietà del testo-shadow. A tale scopo, è necessario specificare la lunghezza dell'orizzontale e la dimensione verticale dell'ombra nella proprietà. O. È anche possibile aggiungere più ombre allo stesso testo usando la proprietà di testo-shadow. In questa guida, abbiamo riassunto vari modi in cui puoi aggiungere un effetto ombra al testo.