Effetto ombra su testo con i Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

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.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (47.859)

:: Referenze dei fogli di stile Css (41.725)

:: Menu ad effetto mouseover con i Css (39.069)

:: Effetti sui link con i Css (29.539)

:: Testo verticale coi Css (19.848)

:: Angoli smussati in un box coi Css (18.827)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.114)

:: Box con effetto ombra con i CSS3 (16.113)

:: Stilizzare i form Html con i Css (15.868)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.516)

IN EVIDENZA
DOWNLOAD