Generatore di ombre della scatola CSS

Il generatore di ombreggiatura CSS Box è un editor visivo per la proprietà CSS Box-Shadow. Puoi regolare l'offset, il raggio di sfocatura, la diffusione del raggio, il colore e l'opacità con i cursori e vedere il risultato in diretta sul rendering su un elemento di anteprima, quindi copiare il CSS esatto. Invece di indovinare i valori dei pixel e ricaricare la pagina, dai forma direttamente l'ombra e leggi il codice che produce.

Apri questo generatore di ombre box CSS e si avvia sul preset Card, due strati che copiano come box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a; Il cursore Opacity è cotto nel colore esadecimale, quindi il 10% diventa l'1a alla fine Clicca il preset Inner e la dichiarazione cambia in box-shadow: inset 0px 2px 4px 00000033;, il look a pulsante premuto Aggiungi livello aggiunge un'ombra a 0px 4px 6px 0px #0000033, elencato per ultimo e dipinto sotto gli altri.

La proprietà della scatola-ombra è ingannevolmente profonda. Una singola dichiarazione può impilare diverse ombre, ciascuna con i propri offset, sfocatura, diffusione, colore e una parola chiave riquadro opzionale che dipinge l'ombra all'interno dell'elemento anziché all'esterno. Le ombre di interfaccia reali utilizzano quasi sempre due o più livelli per sembrare naturali, il che è noioso per scrivere a mano. Questo strumento gestisce i livelli per te e genera una dichiarazione valida per le specifiche nell'ordine corretto separato da virgole.

Tutto accade nel tuo browser. Scegli un preset, sintonizza i livelli, cambia l'anteprima tra sfondi chiari e scuri e copia la proprietà standard o un blocco che includa anche il prefisso -webkit. Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

Le ombre sono dipinte fuori dalla scatola e non occupano spazio, quindi non spingono mai i vicini in giro e verranno tagliate da qualsiasi antenato con overflow nascosto La diffusione è il valore meno compreso: cresce o riduce la forma dell'ombra prima di sfocarsi, quindi una diffusione positiva con zero sfocatura fornisce un contorno di offset solido, che è il modo in cui gli effetti di confine vengono falsificati senza influenzare il layout L'inserto sposta l'ombra all'interno dell'elemento, utile per gli stati premuti e i bagliori interni La stratificazione di diverse ombre con offset e sfocatura crescenti è il modo in cui viene costruita la profondità convincente, poiché un'unica grande sfocatura si legge come nebbia anziché come ombra Ogni strato costa tempo di rendering e le ombre che si ridipingono durante lo scorrimento o l'animazione sono una fonte comune di strappo su dispositivi a potenza inferiore.