css per un titolo

[ricanto]

Ciao a tutti!
Ho un problemino che vorrei risolvere e mi serve il vostro aiuto.Come posso creare un titolo come quello che ho messo in allegato usando i css?Ovviamente se c'è il modo! Mi ci sto picchiando da qualche giorno, ma non ci trovo soluzione...il prolema è che intuitivamente mi sembra anche una cosa non difficile...:master:
Potete aiutarmi?

Ciao e grazie 1000 a tutti,
Riccardo.

[pierofix]

Una soluzione che mi viene in mente potrebbe essere quella di creare uno span per ogni lettera del titolo in modo tale da poter gestire ognuna di esse facilmente. Mi sa però che non è una cosa molto sensata.

Comunque, per andare fino in fondo, ecco come farei:

XHTML
<h1>
   <span>T</span>
   <span>i</span>
   <span>t</span>
   <span>o</span>
   <span>l</span>
   <span>o</span>
</h1>


CSS
h1 span {
   background-color:#000;
   color:#fff;
   margin:0 1%;
}

[ricanto]

Grazie mille!!
Mi hai risolto veramente un grosso problema. Figurati che mi ero messo a fare una lista e poi la volevo allineare... lasciamo perdere!

Grazie ancora.
Riccardo.

[pierofix]

Ma sei proprio sicuro di voler adottare una soluzione del genere? Mi sa che si sporca un po' troppo il markup, anche se in questo caso specifico non è poi così grave.

Insomma, se la tua scelta è ponderata ben venga, altrimenti... meglio pensarci meglio.

[ricanto]

Sì, sono proprio sicuro...
Per ora non trovo un modo migliore del tuo... tutto questo per non creare delle immagini tipo quella che ho postato.
Ciao e grazie,

Riccardo.

[pierofix]

Originariamente inviato da ricanto
tutto questo per non creare delle immagini tipo quella che ho postato.

Bè, se ne può parlare. A livello di accessibilità un'immagine come titolo non è proprio consigliata ma un modo per renderla accessibile esiste, ed è l'uso (corretto) dell'attributo alt. Ecco cosa intendo per "uso corretto":

- http://joeclark.org/book/sashay/seri...Chapter06.html

Mi trovi d'accordo nell'utilizzare testo puro per queste funzioni, ma a tal fine un inquinamento troppo gravoso del markup può fare altrettanti danni.

La soluzione che ti ho proposto non mi pare poi tanto sporcacciona, ma mi lascia comunque perplesso. Tuttavia, a quanto ne so, attualmente l'unico modo per agire su ogni singola lettera è identificarla con un marcatore.

Escluderei assolutamente l'utilizzo di javascript in questa situazione.