La proprietà CSS3 text-shadow accetta fino a quattro dichiarazioni diverse di ombreggiature sul testo, ciascuna separata da una virgola. Possiamo sfruttare questa sua caratteristica per creare l'effetto del testo intagliato sullo sfondo che appare in leggero rilievo. Vediamo come.
Partiamo dal seguente elemento HTML:
<h1>Test</h1>
e applichiamo i seguenti stili:
h1 {
width: 5em;
height: 5em;
font: normal 4em 'Arial Black', Arial, sans-serif;
background: #565656;
color: #fff;
text-align: center;
text-transform: uppercase;
line-height: 5;
text-shadow: 2px 0 2px #333, 0 2px 2px #000;
}
text-shadow ha questa sintassi:
text-shadow: x y raggio colore;
x e y si riferiscono allo scostamento orizzontale e verticale dell'ombra, raggio è l'ampiezza dell'ombra e colore è il valore di colore dell'ombra.
Nel nostro esempio abbiamo usato due ombre, alternando lo scostamento orizzontale e verticale e modificandone il valore del colore (più chiaro, più scuro). L'effetto finale è il seguente:
[caption id="attachment_2512" align="aligncenter" width="320" caption="L'effetto finale ottenuto con text-shadow"]
[/caption]