Possiamo creare l'effetto del testo tridimensionale (3D) utilizzando la proprietà CSS3 text-shadow con la sua sintassi estesa che accetta valori multipli. Vediamo come.
Il codice CSS è estremamente semplice:
#header {
background: #ddd;
padding: 2em;
width: 400px;
border: 1px solid #bbb;
border-radius: 5px;
margin: 0 auto;
}
#header h1 {
font-size: 4em;
font-weight: bold;
text-align: center;
margin: 0;
color: #fff;
text-shadow:
-1px 1px 0 #ddd,
-2px 2px 0 #c8c8c8,
-3px 3px 0 #ccc,
-4px 4px 0 #b8b8b8,
-4px 4px 0 #bbb,
0px 1px 1px rgba(0,0,0,.4),
0px 2px 2px rgba(0,0,0,.3),
-1px 3px 3px rgba(0,0,0,.2),
-1px 5px 5px rgba(0,0,0,.1),
-2px 8px 8px rgba(0,0,0,.1),
-2px 13px 13px rgba(0,0,0,.1)
;
}
Come si può notare, abbiamo usato valori negativi per far emergere l'ombra al di fuori dei limiti del testo. Potete visionare l'esempio finale in questa pagina.