Corsi on-line

Testo tridimensionale con CSS3

Una soluzione grafica interessante, ma della quale non bisognerebbe comunque abusare, è quella che permette di restituire a video del testo tridimensionale senza il ricorso ad immagini o a script JavaScript, cioè facendo riferimento unicamente alle proprietà messe a disposizione da CSS3; un approccio del genere può rivelarsi particolarmente adatto dal punto di vista dell’ottimizzazione dei contenuti da parte dei motori di ricerca, questo perché, nonostante il rendering 3D, ciò che verrà indicizzato sarà comunque puro testo.

BlogMrWeb

Nel caso specifico del nostro esempio ci occuperemo di stilizzare una semplice stringa delimitata dal tag h1, inutile dire che il medesimo criterio potrà essere applicato anche a testi compresi tra altri elementi HTML, come per esempio p per la paragrafazione o span per la stilizzazione di singole porzioni di testo; il markup associato alle regole di stile potrà essere quindi il seguente:

<h1>Blog.MrWebMaster.it</h1>

Dato che stiamo agendo su un tag specifico, non avremo la necessità di ricorrere ad alcuna classe specifica, per cui all’interno del nostro foglio di stile o tra gli stili di pagina potremo inserire quanto segue:

 h1 {
font:normal 55px Arial;
color:#fffff0;
font-weight: bold;
margin: 15px;
text-shadow: 0 1px 0 #ddd,
0 1px 0 #b0b0b0,
0 2px 0 #c1c1c1,
0 3px 0 #b0b0b0,
0 4px 0 #a9a9a9,
0 5px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 2px 5px rgba(0,0,0,.2),
0 3px 8px rgba(0,0,0,.25),
0 8px 8px rgba(0,0,0,.2),
0 18px 20px rgba(0,0,0,.15);
text-align: left;
}

Alla base della trasformazione tridimensionale del testo (che possiamo visualizzare nell figura proposta in precedenza), contribuirà in particolare la proprietà text-shadow, essa infatti associa una o più ombre ad un testo, a loro volta queste ultime potranno essere associate a dei valori (per l’ombreggiatura verticale e orizzontale) e, opzionalmente, ad un colore

Tale proprietà è supportata da tutti i browser per la navigazione Web più utilizzati, ma per quanto riguarda Internet Explorer sarà necessario disporre come minimo delle versione 10.

Post correlati
I più letti del mese
Tematiche