Styling di testo è un fattore importante utilizzato per migliorare gli elementi del sito Web. Include vari elementi HTML come collegamenti, immagini e pulsanti che devono essere sincronizzati e coerenti. Anche, CSS può garantire che il testo aggiunto su una pagina web sia ben sincronizzato. A tale scopo, è possibile utilizzare diverse funzionalità di testo, tra cui dimensioni del testo, colore del carattere, orientamento al testo e colore del carattere. "text-shadow"È anche incluso nell'elenco di queste fantastiche proprietà.

Questo articolo discuterà Proprietà del testo-shadow e le sue opzioni correlate con l'aiuto di esempi adeguati.

Proprietà del testo-shadow in CSS

In CSS, puoi utilizzare il "text-shadow"Proprietà per Aggiunta di ombre al Html testo elementi. Comprende diversi tipi di ombre che possono essere applicati utilizzando CSS interno, esterno o in linea.

La sintassi della proprietà text-shadow in CSS è riportata di seguito.

Sintassi

Text-Shadow: H-Shadow V-Shadow Blur-RADIUS Colore | Nessuno | Iniziali |
ereditare;

Gli attributi del valore di text-shadow sono descritti di seguito.

Valori richiesti
H-Shadow: Questo valore viene utilizzato per specificare la posizione orizzontale del testo-shadow. I valori negativi possono essere usati per spostare l'ombra sul lato sinistro.

V-Shadow: Questo valore è necessario per impostare la posizione verticale di un'ombra. v-shadow accetta anche i valori negativi come offset-y.

Tutti i valori sopra menzionati verranno utilizzati nell'esempio seguente.

Esempio
Nell'esempio seguente, abbiamo set "1px" COME "H-Shadow" E "3px" COME "y-shadow" valori. Inoltre, il "colore" del testo-shadow è specificato come "rosso":

Effetto text-shadow!

Produzione

Valori opzionali

ra-radius: Viene utilizzato per sfocare il testo-shadow e il suo valore predefinito è 0.

nessuno: Mostra che nessun effetto ombra viene aggiunto al testo.

colore: Questa opzione è utilizzata per specificare il colore del testo-shadow.

iniziale: Questa opzione è utilizzata per specificare il valore predefinito della proprietà di testo-shadow.

ereditare: Puoi ereditare questa proprietà dal suo elemento HTML genitore.

Ora, diamo un'occhiata ad alcuni esempi relativi ai valori di text-shadow forniti.

Esempio: aggiunta di colore a text-shadow

Effetto colore di text-Shadow

L'esecuzione del codice sopra dato aggiungerà un effetto colore "arancione" al testo aggiunto:

Il seguente esempio mostra l'effetto sfocato su una proprietà di text-shadow.

Esempio: aggiunta dell'effetto sfocatura a text-shadow

Effetto sfocatura di text-shadow!

Produzione

La proprietà Testo-Shadow accetta anche l'elenco delle ombre separate dalle virgole. L'esempio seguente dimostrerà la procedura per eseguire l'operazione specificata.

Esempio

Text-shadow con con più bagliore di testo.

Produzione

Abbiamo fornito le informazioni più essenziali relative all'uso di "Text-Shadow" Proprietà in CSS.

Conclusione

In CSS, Proprietà del testo-shadow viene utilizzato per l'aggiunta di ombre agli elementi di testo HTML. Viene utilizzato principalmente per aggiungere colori al testo, offuscare la sua ombra e impostare la sua posizione orizzontale e verticale. Questo articolo fornisce una guida approfondita sulla procedura di utilizzo di dimensioni orizzontali e verticali del testo-shadow, offuscare il testo-shadow e infine usare i colori con la proprietà di text-shadow di CSS.