CSS3: l’ombra sui box

Per molti anni uno dei principali motivi di discussione fra designer e sviluppatori era legato alle ombre inserite nei layout e di una discreta complessità da montare nelle pagine html, comunque facendo ricorso alla grafica tradizionale con le inevitabili scomodità del caso.

CSS3 propone una soluzione a questo problema introducendo la possibilità di gestire le ombre. L’istruzione cardine è questa:

box-shadow: 5px 5px 10px 2px #333333;

Esaminiamola nel dettaglio: i primi due valori indicano rispettivamente lo spostamento orizzontale e quello verticale, valori positivi spostano l’ombra verso destra e verso il basso, mentre valori negativi spostano l’ombra verso sinistra e verso l’alto. Il terzo valore rappresenta il grado di sfocatura, valori più bassi determinano ombre più nette. Il quarto valore imposta il grado di diffusione dell’ombra, più è alto e più l’ombra tende ad espandersi. L’ultimo valore, ma questo è abbastanza scontato, rappresenta il colore dell’ombra.

In pratica