Text Shadow Generator
CSS text shadow
CSS text shadow Funziona localmente nel tuo browser
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
Il generatore di ombre del testo imposta l'offset, la sfocatura, il colore e l'opacità di un'ombra dietro il testo, con un'anteprima dal vivo e il CSS. A differenza di box-shadow non ha alcun valore di diffusione, il che attira l'attenzione: l'unico modo per rendere più pesante l'ombra di un testo è impilare più ombre in un'unica dichiarazione. È molto utile per la leggibilità, mettendo una sottile ombra scura dietro il testo chiaro su una fotografia, e non dovrebbe mai essere l'elemento che rende leggibile il testo, perché scompare nel momento in cui cambia lo sfondo.
Where people use the
- Aggiunta di un'ombra sottile in modo che una didascalia si legga sopra una fotografia.
- Realizzazione di un effetto di intestazione pressata o incisa.
- Produrre un trattamento di testo retrò o neon.
- Testare quanto deve essere pesante un'ombra prima che sembri economica.
How to use the
- 1
Imposta gli offset
L'offset X si sposta a destra, l'offset Y si sposta verso il basso. Uno scostamento di uno o due pixel viene letto come profondità; qualsiasi cosa più grande inizia a sembrare un'ombra esterna.
- 2
Imposta la sfocatura
La sfocatura ammorbidisce il bordo. Zero fornisce una copia fedele del testo, che è il modo in cui vengono realizzati i contorni e gli effetti retrò.
- 3
Scegli il colore e l'opacità
Il testo scuro su sfondi chiari richiede un'ombra chiara e viceversa. Mantieni l'opacità bassa a meno che tu non voglia un effetto evidente.
- 4
Copia il CSS
La regola include il colore rgba, pronto da incollare.
- 5
Impila le ombre se hai bisogno di più peso
Aggiungi una seconda ombra separata da una virgola nel tuo foglio di stile. Questo è l'unico modo per ispessire l'ombra del testo, poiché non c'è diffusione.
Suggerimenti e migliori pratiche
- Meno è meglio: uno o due pixel a bassa opacità eliminano una forte sfocatura.
- Non fare mai affidamento solo su un'ombra per l'accessibilità; correggere il contrasto sottostante.
- Ricorda che la proprietà è ereditata, quindi adattala all'elemento che intendi.
Domande frequenti
Perché non esiste un valore di spread?
Perché text-shadow non ne supporta uno. La sua sintassi è offset X, offset Y, sfocatura e solo colore. Per simulare la diffusione, impili diverse ombre identiche con offset leggermente diversi.
Posso usarlo per rendere leggibile il testo su un'immagine?
Solo come supplemento. Un'ombra aiuta ai margini ma fallisce nelle aree trafficate e non conta ai fini del rapporto di contrasto WCAG, che viene misurato rispetto al colore di sfondo. Aggiungi una tela o un pannello solido se la leggibilità è davvero importante.
Come delineare il testo?
Impila quattro ombre a più e meno un pixel in ciascuna direzione con sfocatura zero. Ciò produce un effetto di contorno senza bisogno di -webkit-text-stroke, che non è supportato ovunque.
Rallenta la pagina?
Una singola ombra statica non costa quasi nulla. L'animazione di un'ombra di testo o l'applicazione di una grande ombra sfocata a molto testo è il punto in cui viene visualizzato il costo di ridisegno.
Viene ereditato dagli elementi figlio?
SÌ. L'ombra del testo è ereditata, quindi impostandola su un contenitore la applica a ogni discendente con testo, il che a volte è sorprendente.