Come creare un testo in 3D solo con i fogli di stile.

Avverto subito che questo metodo di inserimento di un testo in tre dimensioni con relativa ombreggiatura non funziona con Internet Explorer e c'è francamente da stupirsi come la Microsoft continui a non supportare nel browser della casa molti comandi che servono per migliorare e rendere più attrattivo il contenuto delle pagine web. Si tratta di una strategia veramente incomprensibile. Detto questo a beneficio di quei masochisti che usano ancora quel browser, passo a mostrare come si possa creare del testo ombreggiato in 3D esclusivamente con i CSS. 
Si tratta di una alternativa a una immagine che ha un tempo di caricamento molto superiore a quello di un semplice testo sia pure arricchito con un foglio di stile.

Dopo aver scelto il colore del testo, poniamo #be8f47, apriamo il tool online Oto255.com (leggi il Tutorial di Oto255) e troviamo sei tonalità di colore più scure di quella data:

#694e25 #5c4521 #503c1c #433218 #372913 #2a1f0f

Adesso creiamo un codice di questo genere

<style>
.ombra {
  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="ombra">TESTO 3D</div>

dove possiamo modificare la dimensione dei caratteri (80), la famiglia di font (Trebuchet MS) e dove sono state inserite delle ombre con i colori appena trovati tramite Oto255 con uno sfasamento progressivo di 2px in 2px verso destra.
Le ultime due righe del foglio di stile introducono due sfocature (blur) di colore nero rispettivamente di 15 e 5 pixel e con opacità del 10% e del 30%. Queste righe finali servono per dare un effetto tridimensionale alla scritta ma possono anche essere eliminate. In questo caso bisogna ricordarsi che l'attributo text-shadow deve comunque terminare con il punto e virgola evidenziato di viola.
Se si incolla tale codice in un post in Modalità HTML di ha un effetto di questo tipo

TESTO 3D

visibile con tutti i browser tranne che con Internet Explorer.