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
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
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 questo showcase
Per approfondire lo studio della proprietà box-shadow
guida CSS3
