Aggiustando il raggio e l'offset della proprietà CSS3 box-shadow si possono ottenere interessanti effetti visivi, compreso quello dei bordi multipli e annidati a formare una cornice. Vediamo come.
Il codice è molto semplice:
#box {
width: 8em;
font-size: 2em;
font-family: Arial, sans-serif;
text-align: center;
padding: 2em 1em;
margin: 2em auto;
background: #ccc;
border-radius: 2px;
box-shadow:
0 0 0 2px #000,
0 0 0 3px #999,
0 0 0 9px #aaa,
0 0 0 10px #666,
0 0 0 16px #333,
0 0 0 18px #000,
0 2px 6px 18px rgba(0,0,0,0.5);
}
Il segreto di questa tecnica sta nell'uso dei valori multipli di questa proprietà e dell'incremento progressivo del raggio dell'ombra assegnata al box. Questa tecnica è stata originariamente presentata da Craig Buckler in questo articolo.
Potete visionare l'esempio finale in questa pagina.