La maggior parte degli effetti di testo CSS che sembrano complicati sono fatti da una proprietà Il segno al neon su una pagina di destinazione, il contorno rigido sul titolo di un gioco, la scritta arancione impilata che sembra una copertina di un disco degli anni '70: ognuno di questi è un singolo text-shadow dichiarazione con diversi livelli separati da virgole La sintassi è breve La parte difficile è raccogliere offset e valori di sfocatura che leggono bene e ricordare quale strato dipinge sopra.
Questa guida copre il text-shadow grammatica, come funziona la stratificazione, le ricette dietro gli effetti comuni con i valori esatti che usano e gli errori che rendono il testo ombreggiato difficile da leggere o lento da renderizzare Ogni esempio può essere ricostruito nel Generatore di ombre di testo CSS, che mostra il risultato in diretta e scrive la dichiarazione per te.
tl; dr:
text-shadowprende un elenco di ombre separato da virgole, ciascuna scritta comeoffset-x offset-y blur-radius color. La prima ombra nell'elenco si dipinge sopra Non ha valore di diffusione e noninsetparola chiave, a differenza dibox-shadow. I bagliori sono diverse ombre a zero offset con sfocatura crescente, i contorni sono quattro ombre dure da un pixel e il testo 3D è una pila di ombre dure ciascuna con un pixel più lontano Il Generatore di ombre di testo Toolz li costruisce con cursori e otto preset, lato client, gratuiti, senza registrazione.
Qual è la proprietà di testo-ombra CSS?
la text-shadow la proprietà dipinge una o più ombre dietro i glifi di un elemento' s testo È definito nel W3C Modulo di decorazione del testo CSS Livello 3e il suo valore è l'uno o l'altro none o una lista di ombre separata da virgole.
Ogni ombra ha fino a quattro parti:
| Parte | Richiesto | Quello che fa | Valori consentiti |
|---|---|---|---|
| Offset orizzontale | certo | Sposta l'ombra a destra (positivo) o a sinistra (negativo) | Qualsiasi lunghezza, ad es. 2px, -0.1em |
| Offset verticale | certo | Sposta l'ombra verso il basso (positivo) o verso l'alto (negativo) | Qualsiasi lunghezza |
| Raggio sfocatura | No, per impostazione predefinita 0 |
Ammorbidisce il bordo; più grande significa più sfocato | Zero o una lunghezza positiva Negativo non è valido |
| Colore | No, per impostazione predefinita currentColor |
Colore dell'ombra, compresa la trasparenza | Qualsiasi colore CSS |
Il colore può andare per primo o per ultimo. text-shadow: #000 1px 1px e text-shadow: 1px 1px #000 sono la stessa ombra Se si lascia il colore fuori, l'ombra prende il testo's proprio colore, che è raramente quello che si desidera per un'ombra goccia ma a portata di mano per un rapido bagliore nel colore del testo.
Un'ombra non cambia mai layout Non spinge gli elementi vicini lontano o fa crescere l'elemento' s box, quindi una grande sfocatura può fuoriuscire fuori dalla scatola e farsi tagliare da un genitore con overflow: hidden.
In cosa differisce text-shadow da box-shadow?
text-shadow segue la forma di ogni lettera, mentre box-shadow segue il rettangolo della casella di bordo element's. Questa è la differenza pratica e decide per quale ricerca raggiungere. Anche la grammatica differisce.
| caratteristica | text-shadow |
box-shadow |
|---|---|---|
| Forma dell'ombra | Ogni contorno di glifi | L'elemento's box, compresi gli angoli arrotondati |
| Raggio di diffusione | Non disponibile | Sì, quarta lunghezza |
inset parola chiave |
Non disponibile | certo |
| Strati multipli | Sì, separati da virgole | Sì, separati da virgole |
| Ordine di vernice | Prima elencato in cima | Prima elencato in cima |
| Colore predefinito | currentColor |
currentColor |
| Uso tipico | Intestazioni, loghi, leggibilità sulle immagini | Carte, bottoni, elevazione |
Il valore di spread mancante è il motivo per cui i contorni del testo necessitano di quattro ombre invece di una. Con box-shadow puoi scrivere 0 0 0 2px black per far crescere un anello solido Con il testo non c'è modo di espandere il glifo, quindi lo falsifichi compensando le copie in diverse direzioni Se stai modellando il contenitore piuttosto che le parole, il guida generatore ombra box copre gli strati sparsi, inseriti e di elevazione.
Come funziona la stratificazione di più ombre di testo?
Una singola dichiarazione può contenere tutte le ombre che vuoi, separate da virgole, e il browser dipinge la prima più vicina allo spettatore, L'ultima ombra della lista si trova sul retro Il testo stesso le dipinge sempre sopra tutte.
Che l'ordinamento conta ogni volta che i livelli si sovrappongono Confronta queste due dichiarazioni:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
Nel primo, la copia nera nitida rimane affilata e la foschia gialla si trova dietro di essa Nel secondo, il bagliore giallo si lava sopra la copia nera e la ammorbidisce Stesse ombre, aspetto diverso.
Il generatore segue la stessa regola Il livello 1 nelle schede dei livelli è la prima ombra nell'output, quindi dipinge sopra Aggiungendo un livello lo si aggiunge alla fine dell'elenco, dietro gli altri Per spostare un livello in avanti lo si elimina e lo si ricrea, oppure si modifica a mano il CSS copiato.
Quali valori scrive il generatore Toolz?
la generatore di ombre di testo dà a ogni livello cinque controlli e scrive una dichiarazione in un formato fisso Sapere che il formato aiuta quando si incolla il risultato in una base di codice con le proprie convenzioni.
| Controllo | Gamma | Passo | Scritto come |
|---|---|---|---|
| Offset X | da -50 px a 50 px | 1px | Npx |
| Offset Y | da -50 px a 50 px | 1px | Npx |
| Sfocare | da 0 px a 100 px | 1px | Npx, compreso 0px |
| Colore | Raccoglitore di colori | - | Esagono a 6 cifre |
| Opacità | dallo 0% al 100% | 1% | Aggiunto come due cifre esadecimali dopo il colore |
L'opacità viene piegata nel colore come valore esadecimale a 8 cifre, seguendo il CSS Modulo Colore Livello 4 notazione esadecimale. Le ultime due cifre sono il canale alfa su una scala da 0 a 255, quindi lo strumento moltiplica l'opacità per 255, arrotonda e si converte in esadecimale.
Ecco come funziona per alcune opacità:
| Cursore dell'opacità | Volte 255 | Arrotondato | Hex alfa | Colore esempio |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229,5 | 230 | e6 |
#4466eee6 |
| 70% | 178,5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89.25 | 89 | 59 |
#00000059 |
| 25% | 63,75 | 64 | 40 |
#00000040 |
Ogni browser corrente legge l'esagono di 8 cifre Se devi supportare un browser molto vecchio, riscrivi il colore come rgba() dopo aver copiato: #00000099 diventa rgba(0, 0, 0, 0.6).
Lo strumento accetta solo l'input del cursore e del raccoglitore, quindi i valori sono pixel interi Per un'ombra misurata in em, che si ridimensiona con la dimensione del carattere, copia il CSS e scambia le unità nel tuo foglio di stile. UN 2px offset su 16px corpo di testo è 0.125em.
Come si crea un effetto di testo al neon glow?
Un bagliore al neon è costituito da diverse ombre con offset zero, lo stesso colore brillante e sfocatura crescente Ogni strato aggiunge un alone più ampio e debole e insieme sembrano luce che sanguina nell'aria circostante.
Il generatore si apre sul suo preset Neon Glow, che produce questo
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Tre strati, sfocatura raddoppiando ogni volta (7, 14, 28), opacità scendendo dal 100% al 90% al 70% Il livello stretto 7px dà alle lettere un nucleo luminoso, e il livello 28px diffonde il colore su uno sfondo scuro con testo bianco questo si legge come un tubo acceso Su uno sfondo chiaro la maggior parte dell'effetto scompare, motivo per cui l'anteprima ha un toggle Light bg/ Dark bg: controlla entrambi prima di spedire un bagliore a un sito con un interruttore tema.
Per rendere il bagliore più forte, aggiungere un quarto strato a sfocatura 56px o ripetere due volte il livello 7px Ripetendo un livello si impila la sua opacità e rende il nucleo più intenso senza allargarlo.
Come si delinea il testo con text-shadow?
Posiziona quattro ombre dure (sfocatura 0) un pixel fuori su ogni diagonale La loro sovrapposizione traccia il bordo di ogni glifo.
Il preset di Outline scrive
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
Questo funziona bene a un pixel A due o tre pixel gli spazi iniziano a essere mostrati nei punti medi delle curve e dei bordi dritti, perché le quattro copie coprono solo le diagonali Per un contorno più spesso, aggiungi altri quattro strati sugli assi diritti (0 -2px, 2px 0, 0 2px, -2px 0) quindi otto copie circondano ogni lettera.
C'è un'alternativa non-ombra. -webkit-text-stroke disegna un tratto reale lungo il percorso del glifo ed è supportato dai browser attuali nonostante il suo prefisso È centrato sul contorno, quindi mangia in lettere sottili, ed è specificato nello standard di compatibilità WHATWG piuttosto che in un modulo CSS Per i contorni piccoli e nitidi sul testo visualizzato, il trucco a quattro ombre rimane l'opzione più prevedibile.
Come si fa a fare testo 3D o estruso?
Impila diverse ombre dure nello stesso colore, ciascuna sfalsa un pixel più in basso e a destra Ogni copia aggiunge un pixel di profondità e l'occhio legge la pila come il lato di una lettera solida.
Il preset Retro 3D:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
Tre strati arancioni costruiscono un'estrusione a tre pixel e un quarto strato nero con un'opacità del 25% si trova un pixel più fuori come un'ombra di contatto che fonda le lettere Per un'estrusione più profonda, continua ad aggiungere strati arancioni con offset 4, 5, 6 e sposta lo strato scuro fino alla fine Dodici strati per un'estrusione 12 px è normale per una rotta da grande eroe.
Il preset Long Shadow utilizza la stessa idea con lacune e opacità in dissolvenza:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
Gli offset crescono (1, 3, 6, 10) mentre l'opacità diminuisce (20%, 15%, 10%, 6%), quindi l'ombra si allontana diagonalmente invece di formare un blocco solido.
Quale ricetta testo-ombra si adatta a quale effetto?
Ecco tutti gli otto preset nel generatore, con l'idea dietro ciascuno in modo da poterli adattare.
| Scaldare | Strati | Fuorigioco | Sfocare | Idea |
|---|---|---|---|---|
| Morbido | 1 | 0, 2 volte | 4px | Sottile ombra di caduta al 35% di nero, sicuro per la maggior parte delle intestazioni |
| Difficile | 1 | 2px, 2px | 0 | Copia offset croccante al 60% nero, un look a stampa piatta |
| Neon Glow | 3 | 0,0 | 7, 14, 28 px | Stesso colore, sfocatura crescente, per la luce sul buio |
| Retro 3D | 4 | 1 a 4 px diagonale | 0 | Copie cartacee a gradini più una debole ombra di contatto |
| Linea del contorno | 4 | +/-1px diagonali | 0 | Quattro copie che tracciano il bordo del glifo |
| Goffratura | 2 | -1 px/-1 px e 1 px/1 px | 0 | Evidenziazione bianca in alto a sinistra, tonalità scura in basso a destra |
| Fuoco | 3 | 0, -1/ -2 / -4 px | 4, 10, 18 px | Dal giallo all'arancione al rosso, che sale verso l'alto |
| Lunga Ombra | 4 | 1, 3, 6, 10 px diagonale | 0 | Divario crescente, opacità in dissolvenza |
Emboss è quello che le persone leggono maleAccoppia un'ombra chiara verso l'alto e verso sinistra con un'ombra scura verso il basso e verso destra, che imita la luce dall'alto a sinistra che colpisce le lettere in rilievo Scambia i due colori e il testo sembra premuto nella pagina invece, il classico effetto letterpress Entrambi funzionano solo quando il colore del testo è vicino al colore di sfondo; sul testo ad alto contrasto le luci svaniscono.
Il fuoco è l'unico preset con offset verticali negativi Ogni strato si sposta più in alto e diventa più sfocato e rosso, quindi il calore sembra salire dalle lettere.
L'ombra del testo danneggia la leggibilità o l'accessibilità?
Può, e il rischio cresce con sfocatura e offset Un'ombra non cambia il rapporto di contrasto che misura WCAG, che viene calcolato tra il colore del testo e il colore di sfondo Il WCAG 2.1 contrasto minimo chiede 4,5:1 per il testo normale e 3:1 per il testo di grandi dimensioni, e un bagliore non ti aiuta a soddisfarlo sulla carta.
In pratica, una sottile ombra scura dietro un testo chiaro su una foto occupata rende le lettere più facili da individuare, perché separa i bordi del glifo dall'immagine Un bagliore pesante su un testo piccolo fa il contrario: l'alone riempie i contatori di lettere come & quot; e" e & quot; a" e la parola diventa poltiglia.
Alcune linee guida che reggono:
- Mantieni sottili le ombre del testo del corpo Qualcosa del tipo
0 1px 2px rgba(0, 0, 0, 0.3)è abbondanza. - Salva gli effetti multistrato per il testo di visualizzazione di grandi dimensioni, circa 32 px e oltre.
- Controlla l'effetto sia su sfondi chiari che scuri se il tuo sito ha un'attivazione/disattivazione del tema.
- Non fare affidamento sull'ombra per salvare il contrasto basso Fissare prima il colore del testo.
- Prova alla dimensione più piccola che la direzione raggiunge su un telefono, dove l'ombra è proporzionalmente più grande.
Cosa rallenta l'ombra del testo e quali sono gli errori comuni?
La sfocatura è la parte costosa Ogni strato sfocato deve essere rasterizzato e sfocato su ogni riverniciatura, e le scale di costo con raggio di sfocatura e la quantità di testo Il riferimento MDN per text-shadow copre la sintassi Il lato delle prestazioni è semplice da ragionare: un bagliore a tre strati su una singola intestazione è economico, e lo stesso bagliore su ogni paragrafo di un lungo articolo, ridipinto durante lo scorrimento, è una fonte comune di strambo sui telefoni a bassa potenza.
Errori che si manifestano ancora e ancora:
| Errore | Riassortimento | Fix |
|---|---|---|
Scrivere un valore di spread come 0 0 4px 2px red |
Tutta la dichiarazione viene ignorata | Rimuovere la quarta lunghezza; l'ombra di testo non ha diffusione |
Aggiungendo inset |
Dichiarazione ignorata | Non supportato sul testo; utilizzare invece una goffratura più leggera |
Sfocatura negativa, ad es. -2px |
Dichiarazione ignorata | Sfocatura deve essere zero o positivo |
| Comme mancanti tra i livelli | Dichiarazione ignorata, nulla rende | Separa ogni ombra con una virgola |
| Bagliore tagliato ai bordi | Halo tagliato in linea retta | Genitore ha overflow: hidden; aggiungere imbottitura |
| Glow invisibile | Sembra che non succeda nulla | Bagliore chiaro su sfondo chiaro; prova su scuro |
Prefisso fornitore -webkit-text-shadow |
Innocuo ma inutile | Usare piano text-shadow; non ha bisogno di prefisso |
Vale la pena sottolineare i primi tre Una singola parte non valida invalida l'intera dichiarazione, non solo quel livello, quindi un errore di battitura nel livello quattro di un effetto 3D a dodici strati rimuove tutti e dodici L'output di generator' s è sempre valido, che è uno dei motivi per costruire lo stack lì e incollarlo.
Quando si dovrebbe usare un generatore invece di scrivere testo-ombra a mano?
Una singola ombra morbida è più veloce da digitare che da cliccare Qualsiasi cosa con tre o più strati è più veloce da costruire visivamente, perché stai giudicando un look, e un look è difficile da giudicare dai numeri Il generatore è utile anche per imparare: scegli un preset, cambia un livello e guarda quale parte dell'effetto si muove.
Il generatore Toolz funziona interamente nel browser L'anteprima, l'elenco dei livelli e il CSS sono tutti calcolati sulla pagina, non viene caricato nulla e continua a funzionare offline una volta caricato È gratuito, nessuna registrazione Copia CSS viene conteggiato rispetto a una tolleranza di utilizzo giornaliera, come altri strumenti sul sito; la modifica e l'anteprima non lo sono.
Ciò che non fa: non ha em oppure rem unità, nessun campo numerico digitato, nessun drag-to-reorder per i livelli e nessun carattere personalizzato nell'anteprima Per quelli, copia la dichiarazione e regolala nel tuo foglio di stile o nei tuoi strumenti di sviluppo del browser.
Se l'effetto che si desidera è un elemento sfocato o ricolorato piuttosto che un'ombra, Filtri CSS come ad esempio drop-shadow() e blur() applicare a elementi interi, comprese le immagini I pannelli smerigliati dietro il testo sono un lavoro per il generatore glassmorphism, e morbidi bottoni estrusi appartengono al generatore neumorfismo. Il set completo di builder CSS visivi è sul Hub degli strumenti CSS, e il Guida al generatore di gradiente CSS si abbina bene agli effetti di testo quando si desidera uno sfondo sfumato dietro un titolo luminoso.
Un esempio funzionante: un titolo di eroe leggibile sopra una foto
Supponiamo che tu abbia un testo bianco 64 px sopra una foto luminosa sulla spiaggia e che le lettere continuino a scomparire nella sabbia L'obiettivo è prima la leggibilità, poi lo stile.
Inizia nel strumento testo-ombra con il preset Soft: 0px 2px 4px #00000059. Su un'immagine occupata che è troppo debole Aumentare l'opacità al 60% e sfocare a 8px, che dà 0px 2px 8px #00000099. I bordi si separano dallo sfondo, ma i tratti sottili sfarfallano ancora.
Aggiungere un secondo strato con offset zero, sfocatura 2px e 50% nero: 0px 0px 2px #00000080. Poiché l'hai aggiunto per secondo, dipinge dietro il primo strato, ma abbraccia il bordo del glifo e dà ad ogni tratto un sottile bordo scuro Il risultato:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
Due strati, entrambi economici da renderizzare, e il titolo regge su sabbia, cielo e surf, Su un telefono dove l'intestazione scende a 36px, gli stessi valori di pixel sono proporzionalmente più pesanti; convertendo in em li tiene al passo (0 0.03em 0.125em a 64 px).
