Creare un effetto ombra su testo con i CSS

In effetti questo potente linguaggio ci permette di realizzare quanto ho appena scritto. Con un programma di grafica si impiegano 5 minuti per avere tale effetto; lo stesso tempo, e forse meno, ci vuole per scrivere pochissimo codice, con la differenza che i CSS lo rendono meno pesante.

Si veda questo esempio. Esso non è altro che un semplice titolo "H1" inserito nella pagina.

Adesso facciamo in modo tale da renderlo più simpatico. Non dobbiamo fare altro che assegnare delle classi allo stesso tag "H1" e richiamarle anche in diversi punti della pagina o in più pagine dello stesso sito. Ecco il codice:

 <style type="text/css">
body{
margin:0;
padding:0;
}
h1.ombra1{
color: #73848c;
font-family:Verdana, Arial, sans serif;
font-size:50px;
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
}
h1.ombra2{
color: #ddd;
font-family:Verdana, Arial, sans serif;
font-size:50px;
position: absolute;
left: 15px;
top: 15px;
z-index: 1;
}
</style>

Questo è tutto il codice che ci serve. La parte di codice alla quale prestare attenzione e che ci permette di avere l' ombra sul testo è questa qui:

 position: absolute;
left: 10px;
top: 10px;
z-index: 2;

Ho preso questo codice dalla classe "h1.ombra1"; non si è, fatto altro che dichiarare la posizione nella pagina con il posizionamento assoluto, spostato dal bordo sinistro di 10 pixel ed altrettanti pixel dall' alto.

Con la seconda classe, "h1.ombra2", andiamo a dichiarare un' altra formattazione, vale a dire che deve essere sempre posizionata in maniera assoluta, ma spostata questa volta, di 15 pixel da sinistra e 15 pixel dall' alto, ovviamnte assegnando un colore diverso. Nel corpo della pagina, si devono richiamare le 2 classi in questo modo:

 <h1 class="ombra1">Testo</h1>
<h1 class="ombra2">Testo</h1>

L' esempio finale mostra quanto descritto fin'ora.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati