Come generare codice CSS text-shadow

Compila offset, sfocatura e colore per ottenere una dichiarazione CSS text-shadow formattata con misure in pixel e punto e virgola finale. I campi non compilati richiamano i valori predefiniti dello strumento.

Quando usare una dichiarazione text-shadow pronta

Una dichiarazione CSS text-shadow definisce un’ombra per il testo indicando spostamento orizzontale, spostamento verticale, sfocatura e colore. Questo generatore riunisce questi quattro elementi in una riga già formattata, così puoi concentrarti sui valori da usare invece di scrivere manualmente la sintassi.

I primi tre controlli richiedono valori numerici: il primo determina lo spostamento orizzontale, il secondo quello verticale e il terzo la sfocatura. Il controllo del colore accetta invece testo. Puoi compilare ogni valore secondo l’effetto desiderato oppure lasciare vuoti alcuni campi per usare le impostazioni predefinite previste dallo strumento. Questa distinzione è importante quando vuoi differenziare un valore omesso da uno zero inserito intenzionalmente.

Procedura per compilare i controlli

1. Individua i controlli dedicati all’offset orizzontale, all’offset verticale, alla sfocatura e al colore. Considera i primi tre come campi numerici e l’ultimo come un campo testuale, perché ciascuno viene trasferito nella parte corrispondente della dichiarazione.

2. Inserisci un numero per l’offset orizzontale, un numero per quello verticale e un numero per la sfocatura. Nel campo del colore digita il testo che desideri riportare nel risultato. I valori numerici possono essere personalizzati in base all’effetto che vuoi ottenere.

3. Lascia vuoto l’offset orizzontale se vuoi applicare il valore predefinito 1; per l’offset verticale, il valore predefinito è anch’esso 1. Un campo della sfocatura non compilato richiama 2, mentre l’assenza di un colore richiama #00000033.

4. Usa 0 quando vuoi indicare esplicitamente un offset o una sfocatura pari a zero. Gli zeri per entrambi gli offset e per la sfocatura sono accettati in un calcolo riuscito; non confonderli con i campi vuoti, che attivano invece i valori predefiniti.

5. Avvia la generazione dopo aver completato o lasciato vuoti i controlli necessari. Leggi la riga restituita mantenendo il collegamento tra i quattro valori inseriti e i quattro elementi della proprietà CSS.

6. Verifica la formattazione del risultato prima di copiarlo nel foglio di stile. L’offset orizzontale, quello verticale e la sfocatura devono comparire con l’unità px, mentre la dichiarazione deve terminare con un punto e virgola. Se hai lasciato un controllo vuoto, confronta il numero comparso con il relativo valore predefinito.

Lettura della riga generata

La risposta prodotta ha la forma di una dichiarazione CSS text-shadow costruita a partire da offset orizzontale, offset verticale, sfocatura e colore. I tre valori numerici sono accompagnati da px, perciò puoi riconoscere visivamente quali parti rappresentano le misure dell’ombra. Il punto e virgola finale segnala la chiusura della dichiarazione.

Un campo vuoto non rappresenta un valore nullo: viene sostituito dal predefinito associato a quel controllo. Di conseguenza, una riga ottenuta senza compilare nulla può contenere 1, 1, 2 e #00000033, nell’ordine dei rispettivi elementi. Se invece inserisci 0, stai chiedendo di conservare quello zero nel calcolo riuscito per il campo interessato.

Il colore viene trattato come testo immesso nel relativo controllo. Il comportamento verificato descrive la formattazione diretta della dichiarazione, ma non stabilisce controlli ulteriori, arrotondamenti, limiti numerici o normalizzazioni del testo del colore. Per questo, interpreta il risultato in base ai valori che hai fornito e alla forma della riga, senza attribuire allo strumento trasformazioni aggiuntive non indicate.

Esempio pratico

Per un titolo vuoi un’ombra spostata di 4 pixel in orizzontale e 6 in verticale, con una sfocatura di 3 pixel e colore #336699.

Inserisci 4 nell’offset orizzontale, 6 nell’offset verticale, 3 nella sfocatura e #336699 nel controllo del colore, poi avvia la generazione.

Una dichiarazione CSS text-shadow con 4px, 6px e 3px per le tre misure, il testo #336699 per il colore e un punto e virgola finale.

Limiti

• Il comportamento verificato non descrive arrotondamenti, limiti numerici, controlli ulteriori o normalizzazione del testo usato per il colore.

Errori comuni

• Se lasci un controllo vuoto aspettandoti zero, ottieni invece il valore predefinito; digita 0 nei campi numerici interessati per esprimere lo zero in modo esplicito.

Domande frequenti

Posso usare zero per offset e sfocatura?

Quando inserisci 0 negli offset o nella sfocatura, lo strumento accetta questi valori in un calcolo riuscito; un campo vuoto segue invece la relativa impostazione predefinita.

Quali valori vengono usati quando ometto i campi?

Se ometti l’offset orizzontale compare 1, mentre l’offset verticale omesso diventa 1; la sfocatura omessa diventa 2 e il colore omesso diventa #00000033.

Che cosa posso inserire nei controlli?

Gli offset e la sfocatura accettano numeri, mentre il controllo del colore accetta testo; nella dichiarazione le tre misure riportano px e la riga termina con un punto e virgola.