Generatore box-shadow

Come si legge la sintassi di box-shadow

I valori seguono sempre lo stesso ordine: offset orizzontale, offset verticale, raggio di sfocatura, raggio di espansione e colore. L'offset sposta l'ombra rispetto all'elemento, la sfocatura la rende morbida, l'espansione la ingrandisce (o la rimpicciolisce, con valori negativi) prima della sfocatura. La parola chiave inset porta l'ombra all'interno del riquadro, utile per effetti "incassati" su input e pulsanti premuti.

I trucchi per un'ombra realistica

Le ombre convincenti sono quasi trasparenti: resta tra il 10% e il 30% di opacità e aumenta la sfocatura invece di scurire il colore. Mantieni l'offset Y maggiore dell'offset X, perché nella realtà la luce arriva dall'alto. Per profondità extra puoi combinare più ombre separandole con la virgola: una piccola e nitida vicino all'elemento, una grande e diffusa più lontana.

Un'ombra racconta l'altezza

Nel design a livelli, l'ombra non è decorazione: dice quanto un elemento è sollevato rispetto alla pagina. Una scheda appoggiata ha un'ombra piccola e stretta, un menu aperto sopra tutto ne ha una grande e diffusa, e la differenza fra le due è quello che fa capire che cosa sta sopra a che cosa.

Per questo le ombre di un'interfaccia vanno scelte insieme, come una scala: due o tre livelli fissi (appoggiato, sollevato, in primo piano) usati sempre uguali. Un'ombra diversa su ogni elemento fa sembrare la pagina disordinata anche quando ogni singola ombra è bella.

Due ombre sono meglio di una

Le ombre convincenti sono quasi sempre due sovrapposte: una stretta e scura appena sotto l'oggetto, che ne definisce il contatto, e una larga e chiarissima che si allarga intorno. È così che si comporta la luce reale, dove c'è un'ombra netta vicino e una penombra diffusa lontano.

L'errore tipico è una sola ombra molto scura, che fa sembrare l'oggetto incollato su uno sfondo grigio. Le opacità che funzionano stanno fra il 6 e il 20%: sembra pochissimo sullo schermo del progettista, ed è esattamente il punto.

Il colore dell'ombra non è il nero

Un'ombra nera pura spegne i colori sotto di sé e su uno sfondo colorato appare sporca. L'ombra realistica prende la tinta dello sfondo, più scura e più satura: su una pagina azzurrina, un blu molto scuro invece del nero cambia il risultato più di qualunque aggiustamento del raggio.

Va poi ricordato che box-shadow non tocca il layout: l'ombra esce dal riquadro senza spingere nulla, e può finire tagliata da un contenitore con overflow nascosto. Se un'ombra sparisce senza motivo, è quasi sempre quello.

Strumenti vicini

Per arrotondare gli angoli dello stesso elemento c'è Generatore border-radius e per lo sfondo Generatore gradienti CSS. Il colore dell'ombra si sceglie con Selettore di colori.