Come creare testo in tre dimensioni con il CSS3.

Come creare un testo con effetto 3d mediante l'uso del CSS3.

In  un precedente post abbiamo visto come inserire una ombreggiatura in un testo e in questo articolo vedremo come sia possibile aggiungere tutta una serie di ombre e utilizzarle per la creazione di un effetto 3D esclusivamente mediante l'utilizzo del CSS3. Si usa il tag text-shadow che può essere personalizzato con 4 parametri. Il primo rappresenta lo scostamento orizzontale, il secondo lo scostamento verticale, il terzo il "blur" ovvero il grado di sfumatura mentre il quarto non è altro che il codice del colore. Si possono inserire altre ombre usando la stessa sintassi dopo ver inserito una virgola alla fine del primo attributo. 

Per fare un esempio se si incolla questo codice in un widget o in un articolo in Modalità HTLM

<style>
.ombreggiatura {
   color: white;
   font: bold 52px Georgia;
   text-shadow: 1px 1px 3px #036,
                2px 2px 3px #06c,
               3px 3px 3px #39f;
}
</style>
<div class="ombreggiatura">Testo con ombra</div>

si otterrà questo risultato

Sono state inserite 3 ombre rispettivamente da 1, 2 e 3 pixel con sfumatura di 3 pixel.  A questo stesso codice possiamo inserire anche un effetto hover in questo modo 

<style>
.ombreggiatura {
   color: white;
   font: bold 52px Georgia;
   text-shadow: 1px 1px 3px #036,
                2px 2px 3px #06c,
                3px 3px 3px #39f;
}
.ombreggiatura:hover {
   cursor:pointer;
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #fe4902,
                2px 2px #fe4902,
                3px 3px #fe4902,
                4px 4px #fe4902,
                5px 5px #fe4902,
                6px 6px #fe4902;
}
</style>
<div class="ombreggiatura">Testo con ombra</div>

che porta a questo risultato

Con il CSS3 possiamo anche inserire delle transizioni per passare da una ombreggiatura a un'altra dopo un tempo determinato. Il codice precedente si dovrebbe modificare in questo modo

<style>
.ombreggiatura {
   color: white;
   font: bold 52px Georgia;
   text-shadow: 1px 1px 3px #036,
                2px 2px 3px #06c,
                3px 3px 3px #39f;
-webkit-transition:    all 0.3s ease-out;
   -moz-transition:    all 0.3s ease-out;
   -ms-transition:     all 0.3s ease-out;
   -o-transition:      all 0.3s ease-out;
}
.ombreggiatura:hover {
   cursor:pointer;
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #fe4902,
                2px 2px #fe4902,
                3px 3px #fe4902,
                4px 4px #fe4902,
                5px 5px #fe4902,
                6px 6px #fe4902;
}
</style>
<div class="ombreggiatura">Testo con ombra</div>

dove è stata impostata una transizione di 0.3s vale a dire di 3 decimi di secondo. Con questo codice l'ombreggiatura aumenterà di 3 pixel quando ci si passerà sopra con il mouse.

EFFETTO 3D PER IL TESTO

 

Finalmente vediamo come sia possibile realizzare un testo in tre dimensioni. Il codice è il seguente

<style>
#ombra_3D h1{
font:normal 60pt Georgia;
color:#FFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
#ombra_3D p{
font:normal 40pt Georgia;
color:#FFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
<div align="center"><div id="ombra_3D">
<h1>Titolo 3D</h1>
<p>Paragrafo in 3d</p>
</div>
</div>

e produce questo risultato

Ho inserito due tag evidenziati di giallo per centrare il testo e due regole una per il titolo (h1)e un'altra per i paragrafi (p). Naturalmente possono essere usati tutti i colori che si vuole. A tale scopo è consigliabile l'utilizzo del tool Oto255 per trovare tutte le tonalità di colore a partire da uno dato. Nel codice precedente è stata utilizzata la simbologia RGBA nei codici dei colori in modo da rendere le ombre via via sempre più trasparenti. Si può facilmente convertire un codice esadecimale in codice RGB.