Creare testo con effetto in 3 dimensioni con il CSS3.

Come creare del testo in 3D utilizzando solo il CSS3 e l'HTML.

Lo sviluppo del linguaggio CSS3 ha dato agli web designer la possibilità di creare effetti speciali solo con tale linguaggio senza utilizzo di nessun programma di grafica. Ricordo che con il CSS3 si possono ingrandire le immagini al passaggio del mouse, pubblicare delle immagini che ruotano al passaggio del cursore, creare forme geometriche le più diverse, far ruotare le immagini quando ci si clicca sopra o infine mostrare un testo sopra una immagine senza l'utilizzo di grafica.  

In questo breve post vediamo come sia possibile realizzare un testo in 3 dimensioni esclusivamente con queste tecniche. Il CSS3 si può inserire direttamente in un post o in una pagina statica tra i tag <style> e </style> oppure incollarlo direttamente nel modello subito sopra alla riga ]]></b:skin> in Modello > Modifica HTML senza quei due tag. Nel caso della presenza di una regola nel modello per avere un testo in 3 dimensioni basterà indicare la classe di stile in un paragrafo che richiamerà il CSS3.

Nel seguito indicherò il codice necessario per l'utilizzo in un post o in una pagina statica che però potrà anche essere incollato nel modello limitatamente al CSS3 in modo da richiamarlo all'occorrenza. A chi non ha capito quasi nulla di questa premessa consiglio di leggere il mio ebook gratuito Guida all'HTML. 

Andando su HTML accanto a Scrivi nell'Editor di Blogger e incollando questo codice

<style>
.testo_3d {
  font: bold 80px/1 Trebuchet MS;
  color: #be8f47;
  text-shadow: 0  2px  0   #694e25,
                     0  4px  0   #5c4521,
                     0  6px  0   #503c1c,
                     0  8px  0   #433218,
                     0 10px  0   #372913,
                     0 12px  0   #2a1f0f,
              3px 8px 15px rgba(0,0,0,0.1),
              3px 8px  5px rgba(0,0,0,0.3); }
</style>
<div class="testo_3d">TESTO 3D</div>

si ottiene questo risultato

Per la sua realizzazione occorre utilizzare il tool Oto255 per creare una ombreggiatura sfasata di 2 pixel progressivamente con un colore via via più scuro. Se si vuole usare nel template si incolla nel modello sopra alla riga precedentemente indicata solo il codice evidenziato di giallo.  Per richiamare il testo in 3d basterà incollare in modalità HTML la riga  <div class="testo_3d">TESTO 3D</div> con TESTO 3D ovviamente modificabile. Si possono anche usare i tag <p class="testo_3d">TESTO 3D</p>o <span class="testo_3d">TESTO 3D</span>.

Chi ha delle difficoltà a usare il tool Oto255 può anche usare questo codice

<style>
/* Testo in 3 dimensioni */ 
.testo3d {
font-family: Georgia; /* Famiglia di caratteri */
line-height: 1.1em; /* Altezza della riga */ 
color: #776413; /* Colore del testo */ 
font-weight:bold; /* Grassetto */
font-size: 64px; /* Dimensione caratteri */
text-shadow:0px 0px 0
rgb(212,212,212),1px 1px 0
rgb(184,184,184),2px 2px 0
rgb(156,156,156),3px 3px 0
rgb(128,128,128), 4px 4px 0
rgb(100,100,100),5px 5px 4px
rgba(0,0,0,0.45),5px 5px 1px
rgba(0,0,0,0.5),0px 0px 4px
rgba(0,0,0,.2); /* Ombreggiatura del testo per il 3D */}
</style>
<p class="testo3d">Effetto tridimensionale</p>

che produce questo effetto

Accanto a ciascun parametro c'è un commento che indica il campo di azione del tag. In questo caso si è utilizzata una ombreggiatura grigia che può andar bene con tutti i colori del testo. Per testare questo o altri codici HTML vi consiglio di usare il tool Real Time HTML Editor che ho usato anche per realizzare gli screenshot presenti nell'articolo.