Abbiamo già affrontato di recente il tema dell'ombreggiatura nell'articolo Page curl, usi creativi della proprietà box-shadow. Torniamo ora sulla proprietà box-shadow con un brevissimo tutorial in cui spiegheremo come ottenere un'ombra che si sviluppi su un solo lato di un box.
Di norma, infatti, applicando la proprietà box-shadow su un elemento HTML, l'ombra compare su due dei quattro lati (per default su quello destro e inferiore):
box-shadow: 5px 5px 10px 2px #333333;Assegnando valori negativi per lo spostamento sugli assi X e Y, possiamo fare in modo che l'ombra si situi sui lati superiore e sinistro:
box-shadow: -5px -5px 10px 2px #333333;Azzerando i valori per lo spostamento sia sull'asse X sia sull'asse Y e aumentando il blur otteniamo un'ombra sui quattro lati:
box-shadow: 0 0 25px #333333;Come possiamo creare, dunque, un'ombra su uno solo dei lati? Semplice, lo abbiamo fatto nel nostro primo esempio usando questo codice CSS:
box-shadow: 0 18px 14px -14px rgba(0,0,0,0.6);Analizziamo uno ad uno i valori utilizzati:
- Abbiamo impostato a 0 il valore per l'offset sull'asse orizzontale: eliminiamo così l'ombra sui lati destro/sinistro.
- Abbiamo impostato a 18px lo spostamento sull'asse verticale: essendo il valore positivo, l'ombra apparirà sul lato inferiore.
- Il valore di 14px fa riferimento alla sfocatura dell'ombra (blur).
- -14px definisce il valore per la diffusione (spread) dell'ombra.
- L'ultima parte riguarda l'impostazione del colore dell'ombra.
Il valore cruciale per ottenere l'esito che vogliamo è quello relativo alla diffusione, il quarto (-14px). In pratica, per avere un'ombra su un solo lato, è necessario inserire un valore negativo per la diffusione (spread). Tale valore deve essere uguale o poco maggiore rispetto a quello della sfocatura (14px). Aumentando il valore oltre misura, l'ombra tenderà ad attenuarsi fino a scomparire del tutto.
Nel secondo esempio possiamo notare come l'effetto renda bene anche applicando un bordo all'elemento.
Per quanto riguarda il lato su cui applicare l'ombra, basterà agire sui valori dell'offset. E dunque, per un'ombra solo sul lato superiore scriveremo (esempio 3):
box-shadow: 0 -18px 14px -14px rgba(0,0,0,0.6);Solo sul lato destro (esempio 4):
box-shadow: 18px 0 14px -14px rgba(0,0,0,0.6);Solo sul lato sinistro (esempio 5):
box-shadow: -18px 0 14px -14px rgba(0,0,0,0.6);Tutti gli esempi sono disponibili per il download.
Conclusioni e approfondimenti
La tecnica che abbiamo usato è stata proposta, tra i tanti altri, da Chris Coyer. Si tratta di una versione semplificata di quella adottata da Nicholas Gallagher in questo showcase di esempi.
Per approfondire lo studio della proprietà box-shadow, rimandiamo alla guida CSS3.
