[CSS] Testo 3D

~Sara Littner

Posted on 18/8/2012, 17:20

+4

.

User deleted

[CSS] Testo 3D
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.

Ecco un esempio:
Testo in 3D

Come vedete ha un effetto grafico molto carino, ed è un testo, essendo selezionabile.

Vediamo il sorgente del CSS:

CODICE

font:normal 60px Arial;
color:#FFFFFF;
font-weight: bold;
margin: 10px;
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);

Inserendolo in un elemento HTML come uno span o div, diventa:

CODICE

font:normal 30px Arial; color:#FFFFFF; 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);

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. Potete utilizzarlo come titolo nelle vostre schede.

Copyright - Scritto da Sara Littner