Box Shadow Generator
Generate box shadows
Generate box shadows Funziona localmente nel tuo browser
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Il Box Shadow Generator crea un'ombra da offset, sfocatura, diffusione, colore e opacità, con un'anteprima dal vivo e CSS. Le due impostazioni che le persone confondono sono sfocatura e diffusione: la sfocatura ammorbidisce il bordo verso l'esterno e verso l'interno della forma dell'ombra, mentre la diffusione aumenta o riduce le dimensioni dell'ombra prima che si verifichi qualsiasi sfocatura. La diffusione negativa è ciò che impedisce a un'ombra morbida di sembrare un alone, motivo per cui le impostazioni predefinite qui utilizzano un piccolo valore negativo.
Where people use the
- Costruire una scala di elevazione per carte, modali e menu.
- Creare uno stato premuto o focalizzato con un'ombra inserita.
- Ammorbidire un bordo senza aggiungere un bordo reale.
- Controllare come appaiono effettivamente i valori dell'ombra di una specifica di progettazione.
How to use the
- 1
Imposta gli offset
L'offset X sposta l'ombra a destra, l'offset Y la sposta verso il basso. I valori negativi lo spostano nella direzione opposta.
- 2
Imposta sfocatura e diffusione
La sfocatura ammorbidisce il bordo. La diffusione espande l'ombra prima di sfocarla; usa una piccola diffusione negativa per un'ombra che si trova sotto l'elemento anziché attorno ad esso.
- 3
Scegli il colore e l'opacità
Il nero puro alla massima opacità appare duro. Un'opacità bassa, compresa tra l'8 e il 20%, viene interpretata come profondità piuttosto che come sporco.
- 4
Seleziona l'inserto se vuoi un'ombra interiore
L'inserto disegna l'ombra all'interno dell'elemento invece che dietro di esso, il che si adatta agli stati e ai pozzetti pressati.
- 5
Copia il CSS
La regola include il colore RGBA, quindi può essere incollata direttamente in un foglio di stile.
Suggerimenti e migliori pratiche
- Due ombre a strati sembrano molto migliori di una pesante.
- Mantieni la fonte di luce coerente: se una carta lancia in basso a destra, dovrebbero farlo tutte.
- Controlla le ombre ritagliate da un genitore con l'overflow nascosto.
Domande frequenti
Qual è la differenza tra sfocatura e diffusione?
La diffusione modifica la dimensione della forma dell'ombra prima di qualsiasi ammorbidimento, positiva per aumentare e negativa per restringere. Sfocatura quindi ammorbidisce il bordo in base al raggio specificato. Per ottenere un'ombra stretta sotto una carta, è necessaria una piccola sfocatura e una diffusione leggermente negativa.
Perché la mia ombra appare grigia e sporca?
Perché è nero puro con un'elevata opacità. Utilizza un alfa basso, compreso tra 0,08 e 0,2, e considera di colorare l'ombra verso la tonalità dello sfondo, che risulta molto più naturale.
Posso avere più di un'ombra?
SÌ. Separa diverse ombre con virgole nella stessa dichiarazione; si impilano da davanti a dietro, quindi il primo è in alto. Le ombre stratificate rappresentano il modo in cui viene costruita un'elevazione morbida e realistica.
L'ombra di un riquadro influisce sul layout?
No. Le ombre sono dipinte all'esterno del riquadro dell'elemento e non occupano spazio, quindi possono essere ritagliate da un genitore con l'overflow nascosto o da un contenitore stretto.
Animare l'ombra di una scatola è costoso?
Sì, relativamente. La modifica della sfocatura o della diffusione obbliga il browser a ridipingere l'ombra su ogni fotogramma. Per un movimento fluido, anima l'opacità o trasformalo, oppure esegui una dissolvenza incrociata tra due ombre pre-renderizzate.