In questo articolo vediamo uno degli effetti creativi che è possibile implementare con la proprietà box-shadow. Anche se può sembrare strano affiancare questa proprietà al concetto di bordi multipli, vedremo che il modo ad oggi più rapido e semplice per circondare un box con più bordi di colore diverso consiste esattamente nell'uso della proprietà con cui in genere realizziamo le ombreggiature.
Rimanendo in attesa di una proprietà ad hoc o della modifica di quelle attuali, vediamo come procedere.
Lo screenshot mostra un box circondato da tre bordi spessi 4px ciascuno. Dall'interno verso l'esterno: nero, rosso, verde.
Questo il codice che abbiamo usato nella demo:
border: 4px solid black;
-webkit-box-shadow: 0 0 0 4px red, 0 0 0 8px green;
-moz-box-shadow: 0 0 0 4px red, 0 0 0 8px green;
box-shadow: 0 0 0 4px red, 0 0 0 8px green;Il bordo nero lo abbiamo creato usando la sintassi standard con la proprietà border. È il bordo che vedranno tutti, anche gli utenti che navigano con browser che non supportano box-shadow (IE7 e IE8 sono gli indiziati principali). Per questi browser le vie da seguire sono due:
- lasciare il box con il bordo semplice, quello creato con
border; - usare una libreria come CSS3 PIE per estendere il supporto di
box-shadowsu IE < 9 verificando che il risultato sia accettabile.
Per creare gli altri due bordi, infatti, abbiamo usato proprio box-shadow:
box-shadow: 0 0 0 4px red, 0 0 0 8px green;La sintassi da seguire prevede di assegnare il valore 0 per lo spostamento sugli assi X e Y, come pure per il blur (terzo valore), dando una dimensione solo per il quarto valore, quello relativo alla diffusione dell'ombra (spread). Con questa sintassi, in pratica, andiamo a creare un'ombra completamente piatta che si estende su tutti e quattro i lati del box.
Dal momento, poi, che per un elemento è possibile definire più ombre, possiamo aumentare a piacere il numero di bordi così ottenuti. Con un'unica accortezza: il valore dello spread per le ombre successive, deve essere sempre superiore rispetto a quello dell'ombra precedente. Questo perché ciascuna ombra va a collocarsi su un livello inferiore rispetto a quello dell'ombra che lo precede, per cui per rendere il bordo visibile dobbiamo aumentarne lo spessore.
Meglio far parlare un esempio:
box-shadow: 0 0 0 4px red, 0 0 0 8px green, 0 0 0 8px blue;Nella seconda demo non vedremo alcun bordo blue, perché il valore di 8px è uguale a quello dell'ombra che precede. L'ombra/bordo in realtà c'è, ma non si vede, è nascosta sotto l'ombra/bordo verde.
Aggiustiamo tutto così
box-shadow: 0 0 0 4px red, 0 0 0 8px green, 0 0 0 12px blue;e il gioco è fatto (esempio 3).
Tutti gli esempi sono disponibili per il download.
Approfondimenti
Un po' di link prima di chiudere:
