Grazie ad HTML5 e CSS3 molti effetti grafici un tempo possibili e realizzabili solo attraverso l'uso di programmi come Photoshop sono oggi realizzabili con poche semplici regole CSS: sfumature, bordi arrotondati e ombre sono riconosciuti nativamente dai nuovi browser e dunque l'unico limite e solo ed esclusivamente la nostra fantasia.

Nel nostro tutorial di oggi vedremo allora come dare un effetto 3D alle nostre scritte. Il risultato che vogliamo ottenere è il seguente:

Come potete vedere l'effetto grafico è molto piacevole mentre il testo è – per l'appunto – del testo (in questo caso un H1 e un paragrafo) e dunque perfettamente indicizzabile dagli spider oltre che gestibile da JavaScript come qualsiasi altro elemento del DOM.

Vediamo il sorgente, prima dell'HTML:

    <h1>HTML5 Today</h1><br />        <p><br />            Testo in 3D che funziona su tutti i browser<br /><br />            (tranne Internet Explorer)<br />        </p>

…e poi del CSS:

        h1 {<br />                font:normal 60px Arial;<br />                color:#FFFFFF;<br />                font-weight: bold;<br />                margin: 10px;<br />                text-shadow: 0 1px 0 #ccc,<br />                    0 2px 0 #c9c9c9,<br />                    0 3px 0 #bbb,<br />                    0 4px 0 #b9b9b9,<br />                    0 5px 0 #aaa,<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 />                text-align: center;<br />            }<br />            <br />            p {<br />                font:normal 30px Arial;<br />                color:#FFFFFF;<br />                text-shadow: 0 1px 0 #ccc,<br />                    0 2px 0 #c9c9c9,<br />                    0 3px 0 #bbb,<br />                    0 4px 0 #b9b9b9,<br />                    0 5px 0 #aaa,<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 />                text-align: center;<br />            }

Come vedete il CSS è solo un po' lunghetto perchè sfrutta la "multiple shadows" per creare l'effetto di profondità, ma non c'è nulla di complicato. E adesso vi lasciamo divertire con colori, profondità ed effetti: lasciateci nei commenti i link alle vostre creazioni, saremo ben lieti di pubblicarli!