Effetto ombra su testo con i Css

Design di siti Web con HTML e CSS 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>

TAGS - ombra su testo