Generatore di CSS box-shadow

Come funziona

Box-shadow richiede quattro numeri e un colore in un ordine preciso, e la differenza tra un'ombra che dà profondità e una che sembra un adesivo sta tutta in quei numeri. Vederla cambiare mentre trascini è molto più veloce che andare a tentativi.

Cosa significano i quattro numeri

In ordine: scostamento orizzontale, scostamento verticale, raggio di sfocatura e diffusione. Gli scostamenti spostano l'ombra; la sfocatura ne ammorbidisce il bordo; la diffusione la allarga o la restringe prima della sfocatura. Una diffusione negativa tira dentro l'ombra, ed è così che ottieni un'ombra compatta sotto una card senza che sbordi sui lati.

Farla sembrare reale

La luce di solito viene dall'alto, quindi un piccolo scostamento verticale positivo senza scostamento orizzontale appare naturale. Ombre grandi e molto trasparenti appaiono come una profondità morbida; ombre piccole, scure e nette sembrano un adesivo ritagliato. Gli oggetti reali proiettano ombre più sfocate quanto più sono lontani dalla superficie: una sfocatura maggiore suggerisce un elemento più alto.

Ombre interne

Un'ombra interna viene disegnata dentro l'elemento anziché fuori, ed è così che si creano pulsanti premuti, campi di input e pannelli incassati. Valgono gli stessi quattro numeri, solo rivolti verso l'interno.

Più ombre insieme

CSS accetta un elenco separato da virgole, e sovrapporne due, una compatta e scura, una ampia e tenue, ha un aspetto decisamente migliore di una sola. Questo generatore ne produce una; incolla due ombre insieme tu stesso per l'effetto a strati.