Effetto ombra su testo

Molti siti utilizzano intitolazioni testuali con effetto ombra, nella maggior parte dei casi si tratta di immagini che possono rallentare il caricamento della pagina vediamo com'è possibile creare lo stesso effetto usando un testo, sicuramente più leggero.

Creiamo due Tag di testo Html in cui inseriamo lo stesso testo, assegniamogli tutte le caratteristiche di stile del caso, sicuramente colori diverso, poi posizioniamole dinamicamente in modo che siano lievemente sovrapposte.

Nel caso in cui si voglia assegnare lo stesso stile ad elementi in più pagine, conviene creare due classi diverse e richiamarle sull'uno e sull'altro Tag di testo che compongono la scritta vera e propria, e l'ombra.

Vediamo un esempio:

<style type="text/css">
   h3.Ombra_01 {
      color: #000000;
      font: Bold 50px Arial;
      position: Absolute;
      left: 10px;
      top: 10px;
      z-index: 1;
   } 
   h3.Ombra_02 {
      color: #CCCCCC;
      font: Bold 50px Arial;
      position: Absolute;
      left: 15px;
      top: 15px;
      z-index: -1;
   } 
</style>

<h3 class="Ombra_01">Effetto ombra su testo</h3>
<h3 class="Ombra_02">Effetto ombra su testo</h3>

E' facile notare che le parti evidenziate in rosso sono lievemente diverse nelle due classi: rispetto alla primo, la seconda è posizionata dinamicamente con margini sinistro e superiore maggiore rispetto al primo, ed è indicizzato in maniera da trovarsi al di sotto del primo livello.

Autore: Luca Ruggiero