Effetto ombra su testo con i Css

Autore: Luca Ruggiero | Tell a Friend Corso HTML Impara il linguaggio di marcatura per il Web. Corso CSS Web Design ed Accessibilità secondo il W3C! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

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>