Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

riquadri ombrati

Il CSS2 non ha una proprietà per aggiungere l'ombra sotto un riquadro. Si può provare ad aggiungere un bordo a destra ed in basso, ma non sembrerà benfatto. Comunque se si hanno due elementi annidati, si può usare quello esterno come ombra di quello interno. Per esempio, se si ha un codice HTML come questo:

<div class=back>
 <div class=section>
 <h2>Die Rose duftet - doch ob sie empfindet</h2>
 <address>Heinrich Heine (1797-1856)</address>

 <p>Die Rose duftet - doch ob sie empfindet<br>
 ...
 </div>
</div>

si può usare il DIV esterno come ombra di quello interno. Il risultato potrebbe essere come in questa pagina distinta. Prima, dare al BODY uno sfondo (verde chiaro in questo esempio), al DIV esterno uno sfondo leggermente più scuro (verde-grigio) e al DIV interno uno sfondo diverso (p.e., giallo-bianco):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Dopo, per mezzo di margini e padding, spostare il DIV interno un po' a sinistra e verso l'alto rispetto al DIV esterno:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Si deve anche spostare il DIV esterno un po' sulla destra. E se si hanno più riquadri ombra, probabilmente si vorrà anche dello spazio tra di loro:

div.back {margin: 3em 0 3em 5em}

Sostanzialmente abbiamo finito. Si può aggiungere un bordo attorno al DIV interno se si preferisce. Probabilmente si vorrà anche un po' di padding dentro di esso, p.e.:

div.section {border: thin solid #999; padding: 1.5em}

Naturalmente, si può variare la dimensione dell'ombra a piacimento.

Testo ombrato

Il CSS ha una proprietà per aggiungere ombra al testo. Essa ha quattro argomenti: il colore dell'ombra, l'offset orizzontale (positivo significa a destra), l'offset verticale (positivo significa in basso) e la sfocatura (0 significa un'ombra nitida). Per esempio:

h3 { text-shadow: red 0.2em 0.3em 0.2em }