In onore del film (ri)visto ieri sera, ecco un effetto di testo impensabile fino all'avvento di HTML5 e CSS3:

Niente grafica, niente immagini, no Flash, nessun trucco e nessun inganno: il metodo semplice ed estremamente efficace per ottenere un effetto del genere è utilizzare multiple shadows, ovvero specificare più di un'ombra (con una profondità differente) e creare così l'effetto 3D visto sopra.

Insomma, un codice del genere:

h1 {<br />    <span style="display: none;"> </span>    color: #CF0C14;<br />        font: bold 80px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;<br />    <br />    <span style="display: none;"> </span>    text-shadow:<br />    <br />            /* ombre "solide" per creare l'effetto 3D */<br />            0 1px 0 #78AF00,<br />            0 2px 0 #8ABF17,<br />            0 3px 0 #9ECF33,<br />            0 4px 0 #B3DF53,<br />            0 5px 0 #C9EF77,<br />            0 6px 0 #D7EFA4,<br />    <br />            /* ombre "vere" per creare l'effetto ombra vero e proprio */<br />            0 6px 1px rgba(0,0,0,.1),<br />            0 0 5px rgba(0,0,0,.1),<br />            0 1px 3px rgba(0,0,0,.3),<br />            0 3px 5px rgba(0,0,0,.2),<br />            0 5px 10px rgba(0,0,0,.25),<br />            0 10px 10px rgba(0,0,0,.2),<br />            0 20px 20px rgba(0,0,0,.15);<br />    }

Semplice, efficace, visivamente carino e funzionante su tutti i browser in circolazione – Safari, Opera, Firefox, Chrome – ad eccezione ovviamente dei prodotti Microsoft.