Ho trascorso circa quaranta minuti una volta cercando di abbinare un'ombra da un file Figma Il designer mi aveva dato un colore, un offset X e Y, una sfocatura e uno spread, che è tutto ciò di cui hai bisogno, e ancora non riuscivo a farlo sembrare giusto L'ombra nel browser era più pesante e piatta del mockup, e continuavo a spingere il raggio della sfocatura su e giù in modo che potesse risolverlo.
Non lo farebbe, perché il mockup aveva due ombre impilate Uno scuro stretto per il contatto, uno largo morbido per la luce ambientale Figma li mostrava come strati separati in un pannello che avevo collassato Una volta che li ho scritti come una coppia separata da virgole la partita è stata istantanea.
Questo è il problema delle proprietà CSS in questa guida. Nessuno di essi è complicato. Tutti hanno uno o due comportamenti che non sono evidenti dalla sintassi e puoi perdere un pomeriggio a causa di uno qualsiasi di essi. Questa guida è quei comportamenti, scritti.
Ogni generatore collegato qui viene eseguito nel tuo browser, aggiorna un'anteprima dal vivo mentre trascini e ti consegna il CSS. Li costruisco su [Toolz.dev](/e li uso costantemente, soprattutto perché leggere una scorciatoia a quattro valori è più difficile che guardare un rettangolo.
tl; dr: maneggiare Ombra scatola per profondità, Testo Ombra per bagliore e contorni, Raggio di confine per angoli compresi quelli ellittici, Filtri CSS per effetti di sfocatura, luminosità e colore, Glassmorfismo per pannelli smerigliati, Neumorfismo per superfici morbide rialzate, Gradienti per sfondi, e il Convertitore di unità CSS quando hai bisogno di px in rem. Tutti loro corrono lato client con un'anteprima live Le due regole che vale la pena portare: le ombre reali sono stratificate, e
backdrop-filterha bisogno di qualcosa dietro per sfocare.
Di quale generatore ho bisogno?
| VUOI | Proprietà | strumento |
|---|---|---|
| Una carta che si solleva dalla pagina | box-shadow |
Ombra scatola |
| Testo luminoso, delineato o in rilievo | text-shadow |
Testo Ombra |
| Angoli arrotondati o a forma di pillola | border-radius |
Raggio di confine |
| Sfocare, offuscare, desaturare o tingere un elemento | filter |
Filtro CSS |
| Un pannello smerigliato sopra una foto | backdrop-filter |
Glassmorfismo |
| Un pulsante morbido che sembra premuto sulla superficie | stratificato box-shadow |
Neumorfismo |
| Uno sfondo di transizione colore | linear-gradient |
Gradiente |
| Per trasformare 24px in rem | nessuno | convertitore di unità |
Il resto di questa guida è quello che ognuno fa e dove morde.
Come funziona box-shadow?
La stenografia è di cinque valori e un colore:
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/* │ │ │ │ └ colour */
/* │ │ │ └ spread: grow or shrink */
/* │ │ └ blur: 0 is a hard edge */
/* │ └ vertical offset */
/* └ horizontal offset */
Gli offset muovono l'ombra La sfocatura ammorbidisce il suo bordo, diffondendolo verso l'esterno di circa la metà del valore di sfocatura in ciascuna direzione La diffusione cresce o riduce l'ombra prima che la sfocatura venga applicata, e una diffusione negativa è il trucco per un'ombra che si trova nascosta sotto un elemento anziché aloneggiarlo.
La parte che manca alla gente: le ombre si accumulano. Un elenco separato da virgole restituisce la prima ombra in alto in avanti:
box-shadow:
0 1px 2px rgb(0 0 0 / 0.20), /* contact: tight, darker */
0 8px 24px rgb(0 0 0 / 0.12); /* ambient: wide, lighter */
Quella coppia è il motivo per cui un'ombra del designer's sembra migliore della tua Un'ombra si legge come un adesivo Due si legge come un oggetto con peso Il Generatore di ombre a scatola ti consente di aggiungere livelli e trascinarli separatamente, che è l'unico modo sano per sintonizzarli.
inset sposta l'ombra all'interno della casella di bordo, che è il modo in cui si ottiene un input che sembra incassato, o la metà interna di una superficie neumorfica.
Una nota di performance che mi ha morso su progetti reali: animare box-shadow forza una riverniciatura ogni fotogramma Se si desidera che una carta si sollevi al passaggio del mouse, animare transform e sbiadire in modo incrociato un secondo elemento che tiene l'ombra più grande Il Riferimento MDN box-shadow documenta la sintassi per intero.
A cosa serve l'ombra di testo oltre alle ombre cadenti?
Stessa idea, un valore in meno. text-shadow non ha diffusione:
text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
I suoi usi interessanti non sono affatto ombre.
Contorni. Quattro ombre dure a zero sfocatura, una per diagonale, fingono un tratto attorno al testo È più pesante di -webkit-text-stroke ma funziona ovunque e rende al di fuori del glifo invece di dividere la differenza:
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
Distinzione. Zero offset, grande sfocatura, colore saturo, ripetuto due o tre volte per costruire l'intensità.
Leggibilità sulle immagini. Una singola ombra scura morbida sotto testo bianco ti compra il contrasto quando lo sfondo è una foto che non controlli Non è un sostituto di una corretta mischia, e non salverà un rapporto di contrasto non funzionante, ma impedisce ai discendenti di scomparire in una macchia luminosa.
Costruisci tutti e tre sul Generatore di ombre di testo. Se stai inseguendo un requisito di contrasto anziché un effetto, controlla il risultato WCAG con il Controllore del contrasto del colore invece di guardarlo.
Perché il raggio di confine assume otto valori?
La maggior parte delle persone ne usa uno La forma completa è composta da due gruppi di quattro, separati da una barra:
border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/* ─────horizontal──── ──────vertical───── */
Prima della barra: il raggio orizzontale di ogni angolo, in senso orario dall'alto a sinistra Dopo di esso: il raggio verticale Dare entrambi e ogni angolo diventa un'ellisse piuttosto che un quarto di cerchio È così che si ottengono forme organiche del blob senza un SVG.
Due comportamenti che vale la pena conoscere.
Le percentuali si risolvono contro assi diversi. Un raggio orizzontale in % è una percentuale dell'elemento's larghezza, quella verticale della sua altezza Così border-radius: 50% su un rettangolo dà un'ellisse, non un rettangolo arrotondato, che sorprende le persone la prima volta.
Il browser scala i raggi verso il basso quando si sovrappongono. Se due raggi adiacenti si sommano a più del lato che condividono, tutti i raggi vengono ridotti proporzionalmente fino a quando non si adatta Non è possibile traboccare la forma, motivo per cui border-radius: 9999px produce in modo affidabile una pillola.
la Generatore di raggi di confine espone tutti gli otto valori con cursori per angolo ed emette la scorciatoia valida più breve, che vale la pena avere perché scrivere la forma barra a mano è davvero spiacevole.
Cosa possono fare i filtri CSS e quanto costano?
filter applica le operazioni grafiche a un elemento e a tutto ciò che vi è all'interno:
filter: blur(4px) brightness(1.1) saturate(1.2);
Le funzioni compongono da sinistra a destra, e l'ordine cambia il risultato Sfocatura poi schiarimento non è la stessa cosa di schiarimento poi sfocatura.
| Funzione | Fa | Guarda per |
|---|---|---|
blur() |
Blur gaussiano | Costoso a grandi raggi; sfoca i bordi verso l'esterno |
brightness() |
Multipli leggerezza | Sopra 1 clip evidenzia al bianco |
contrast() |
Spinge i valori dal grigio medio | Crushes dettaglio veloce |
grayscale() |
Rimuove la saturazione | Più economico di un bene duplicato |
sepia() |
Mappa tono caldo | Combinare con hue-rotate() per altre tinte |
hue-rotate() |
Cambia la tonalità di un angolo | Non preserva la leggerezza percepita |
drop-shadow() |
Ombra che segue alfa | A differenza di box-shadow, segue la forma reale |
Quell'ultima riga è quella che vale la pena ricordare. box-shadow ombreggia la casella di bordo, quindi un PNG trasparente di un logo ottiene un'ombra rettangolare. filter: drop-shadow() traccia il canale alfa e ombreggia il logo stesso.
Il costo è reale I filtri spingono un elemento sul proprio strato di compositing, e blur() in particolare è costoso su una vasta area Fine su un pulsante Pensa due volte su una sovrapposizione a tutta pagina su un telefono di fascia bassa. MDN's riferimento al filtro elenca ogni funzione e il suo comportamento di interpolazione.
Prova combinazioni sul Generatore di filtri CSS, che mostra l'anteprima e la dichiarazione esatta fianco a fianco.
Come faccio a costruire un pannello di glassmorphism che funziona?
Il vetro smerigliato è una proprietà che fa il lavoro:
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter filtra ciò che è dietro l'elemento piuttosto che l'elemento stesso. Da ciò derivano tre cose, che rappresentano quasi ogni & quot; perché il mio bicchiere sembra una scatola grigia" domanda.
Ha bisogno di qualcosa dietro. Su un colore di sfondo piatto, uno sfondo sfocato è lo stesso colore piatto. L'effetto esiste solo su una foto, un gradiente o un contenuto sovrapposto.
Lo sfondo deve essere traslucido. Uno sfondo completamente opaco nasconde completamente lo sfondo sfocato Da qualche parte tra il 10% e il 25% di bianco è la gamma abituale.
La saturazione è ciò che lo vende. Il vero vetro concentra il colore. saturate(180%) accanto alla sfocatura c'è la differenza tra vetro smerigliato e una macchia.
Aggiungi il bordo dell'attaccatura dei capelli perché il vetro ha un bordo e controlla il contrasto prima della spedizione: il testo su una foto sfocata passa o fallisce a seconda della foto e un pannello che si legge perfettamente sulla tua immagine dell'eroe potrebbe essere illeggibile su quella successiva.
la Generatore di Glassmorphism anteprime su un'immagine reale, che conta qui più che per qualsiasi altro effetto in questa guida.
Vale la pena usare il neumorfismo?
Il neumorfismo, o interfaccia utente morbida, fa sembrare gli elementi estrusi dallo sfondo anziché fluttuare sopra di esso Due ombre, angoli opposti, una più chiara della superficie e una più scura:
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
Scambiateli con uno stato premuto o usate inset su entrambi per un look scolpito.
La tecnica ha un vincolo difficile: l'elemento e il suo sfondo devono essere dello stesso colore. L'effetto è interamente costituito dalle due ombre, quindi un pulsante neumorfico su uno sfondo diverso smette di leggere come estruso e inizia a leggere come rotto.
Ha anche un problema di accessibilità su cui vale la pena essere onesti L'intera estetica è a basso contrasto per costruzione, e un pulsante la cui unica affordance è un'ombra morbida può fallire WCAG's requisito di contrasto non testuale per componenti interattivi Se lo si utilizza, dare ai pulsanti un bordo reale o uno stile di messa a fuoco che non dipende dall'ombra.
la Generatore di neumorfismo deriva entrambi i colori delle ombre dal colore della superficie, che è la parte difficile da fare a mano.
Quando ho bisogno di un convertitore di unità?
Più spesso di quanto si potrebbe pensare, perché gli strumenti di progettazione parlano px e un buon CSS spesso non lo fa.
rem è relativo alla dimensione del carattere root, quindi un layout in formato rem si ridimensiona quando un utente cambia il browser e la dimensione del testo predefinita di #39;s. em è relativo al elemento's dimensione del carattere, che lo rende utile per il riempimento che dovrebbe tenere traccia del proprio testo e infido quando si compone attraverso elementi nidificati.
L'aritmetica è banale Farlo quaranta volte mentre si traduce una specifica è dove gli errori si insinuano, specialmente se la dimensione della radice non è 16px Il Convertitore di unità CSS prende una radice configurabile e mostra ogni unità contemporaneamente.
Per le pendenze, il Generatore di sfuma copre lineare, radiale e conico e c'è una scrittura più lunga nel Guida al gradiente CSS.
Metterli insieme: una carta, iniziare a finire
Le proprietà sono raramente usate da sole Ecco una scheda che ne utilizza quattro, costruita nel modo in cui la costruirei.
Inizia con la forma e l'ombra a riposo:
.card {
border-radius: 12px;
background: #fff;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
transition: transform 150ms ease, box-shadow 150ms ease;
}
Ancora due ombre, entrambe leggere Una carta a riposo dovrebbe essere appena sollevata Salva il dramma per lo stato di hover.
.card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
}
la translateY fa la maggior parte del lavoro percepito Il movimento si legge come sollevamento in modo più convincente di quanto faccia un'ombra più grande, ed è economico perché le trasformazioni sono composte anziché ridipinte.
Se la scheda si trova su una foto invece che su una pagina piatta, scambiare lo sfondo bianco con vetro:
.card {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
}
Nota cosa è cambiato e cosa no. Il raggio e le ombre si trascinano intatti Si differenzia solo il trattamento superficiale, che è il modello mentale utile: forma e profondità sono una decisione, superficie è un'altra.
E il supporto del browser e i fallback?
La maggior parte di questo è vecchio e sicuro. box-shadow, text-shadow, border-radius e filter sono stati supportati ovunque per anni, e puoi scriverli senza pensarci due volte.
backdrop-filter vale la pena gestire l'eccezione Il supporto è ampio ora, ma è l'unica proprietà qui che produce un risultato dall'aspetto veramente rotto quando manca: un pannello con uno sfondo bianco al 15% e senza sfocatura è un pallido striscio su una foto Custodiscilo:
.glass {
background: rgb(255 255 255 / 0.85); /* readable fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
}
}
Il fallback è un pannello per lo più opaco, che non è l'effetto ma è perfettamente utilizzabile La versione potenziata si applica solo dove il browser può consegnarlo. MDN' @supports riferimento copre la sintassi e vale la pena raggiungerla per qualsiasi momento in cui una proprietà ha una modalità di guasto visivamente interrotta anziché semplicemente più semplice.
Come faccio a mantenere gli effetti coerenti in un progetto?
La modalità di fallimento su una base di codice reale non è una cattiva ombra Sono quattordici ombre leggermente diverse, perché tutti coloro che avevano bisogno di una carta hanno scritto la propria.
Definirli una volta come proprietà personalizzate e utilizzare i nomi:
:root {
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
--radius: 12px;
}
.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }
Di solito bastano tre passaggi ombra, se ti ritrovi ad aggiungerne un quarto, spesso è perché un componente ha bisogno di un diverso elevazione piuttosto che un'ombra diversa, e la risposta è riutilizzare un passaggio esistente.
Questo rende anche trattabile la modalità oscura Le ombre che funzionano sul bianco sono vicine all'invisibile su una superficie scura, dove la profondità di solito proviene da un bordo più chiaro o da un sottile bagliore invece Ridefinire i token all'interno di una query multimediale e ogni componente segue:
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}
}
Genera ogni valore una volta con gli strumenti sopra, incollalo nel blocco token e smetti di pensarci Questo è il punto centrale di avere un generatore: non per scrivere CSS non potresti scrivere a mano, ma per smettere di dedicare attenzione a valori che necessitano di essere decisi solo una volta.
Dove questi effetti causano problemi di accessibilità
Ogni proprietà in questa guida manipola il contrasto e il contrasto è la cosa su cui si basano principalmente i requisiti di accessibilità Quattro trappole specifiche.
I componenti interattivi necessitano di confini visibili. WCAG 2.2 richiede contrasto 3:1 per le parti di un controllo che lo identificano Un pulsante il cui unico bordo è un'ombra morbida può fallire, che è il problema strutturale con il neumorfismo e la ragione per cui un bordo o un anello di messa a fuoco solido non è opzionale lì.
I pannelli di vetro ereditano il loro sfondo's problema di contrasto. Il testo su un pannello smerigliato è leggibile o meno a seconda della foto dietro di esso e la foto cambia spesso Prova contro la tua immagine peggiore, non il tuo eroe Sollevando il pannello's l'opacità di sfondo è di solito una soluzione migliore rispetto a rendere il testo più audace.
I filtri cambiano contrasto silenziosamente. brightness() e contrast() applicato ad un contenitore valga anche per il testo al suo interno A filter: brightness(1.15) su una carta per farla scoppiare può tranquillamente spingere il testo del corpo sotto la soglia 4,5:1 Controlla dopo con il Controllore del contrasto del colore, non prima.
Non lasciare che un'ombra sia l'unico indicatore di stato. Se si passa il mouse, la messa a fuoco e la pressione differiscono solo per la profondità dell'ombra, gli utenti della tastiera e chiunque abbia problemi di vista perdono la distinzione. Abbina il cambio ombra a una trasformazione, un contorno o uno spostamento di colore.
Niente di tutto ciò rende gli effetti inutilizzabili, li rende cose da verificare piuttosto che supporre, che richiede circa un minuto per componente con un controllore di contrasto aperto.
Questi strumenti inviano il mio lavoro da qualche parte?
No. Ogni generatore qui funziona interamente nel browser. Non c'è alcun passaggio di caricamento né alcun viaggio di andata e ritorno del server, motivo per cui rispondono istantaneamente mentre trascini un cursore. Questo è lo stesso motivo per cui il resto del catalogo funziona offline, trattato nel Guida alla privacy dei dati.
Errori comuni
- Un'ombra invece di due. La singola differenza più visibile tra un'ombra scritta a mano e una progettata.
- Animando
box-shadowin volo stazionario. Ridipinge ogni fotogramma Animatetransforme sbiadire invece. backdrop-filtersu tinta unita. Niente da sfocare, quindi non succede nulla.- Sfondo opaco su un pannello di vetro. Nasconde l'effetto che hai appena scritto.
- Neumorfismo su uno sfondo non corrispondente. L'illusione dipende dal fatto che siano identici.
border-radius: 50%aspettando un rettangolo arrotondato. Su un elemento non quadrato si ottiene un'ellisse.- Spedizione di uno qualsiasi di questi senza un controllo del contrasto. Ombre e vetro riducono entrambi il contrasto ed entrambi sono facili da sovra-sintonizzare su un buon monitor.
