Ormai è cosa ben nota che gli effetti sul testo di possono facilmente gestire con l’ausilio dei CSS, ma molto spesso questi sono dei semplici accostamenti oppure sfumature di uno stesso colore con cui è scritto il testo principale.

Esiste però la possibilità di utilizzare anche delle immagini abbinate con i nostri fogli di stile per riuscire ad avere un qualche risultato più gradevole.
Questa soluzione può essere utilizzata molto facilmente per i titoli delle nostre pagine web, impostando poche linee guida si potrà vedere un risultato simile a questo esempio.

Lavoriamo sull’elemento H2, e impostiamo delle semplici regole che permettono il classico controllo all’interno dei documenti web:

h2 {
  font:3em/1em Trebuchet MS, sans-serif;
  font-weight: bold;
  margin:0;
  position:relative;
  overflow:hidden;
  text-transform:uppercase;
  float:left;
  color:#333;
}

Per questo codice niente da dire, forse l’unico elemento degno di nota è la proprietà text-transform:uppercase; che trasforma tutto il testo riferito a questa proprietà in maiuscolo.

Questo codice va abbinato insieme all’elemento span che si accompagna a H2, di maniera da ottenere un miglior risultato:

h2 span {
  position:absolute;
  width: 100%;
  height: 5em;
  background-image: url(“shine.png”);
  background-position:top;
  background-repeat:repeat-x;
}

E’ in questa parte di codice CSS che si nota come si può impostare un’immagine di sfondo al testo, in questo caso ho codificato il foglio di stile in maniera che la stessa immagine venga posizionato in alto e venga ripetuto in orizzontale.

Il risultato finale di questa tecnica si può vedere in questo esempio.

Il fattore IE

Purtroppo il fatto di utilizzare un’immagine in formato PNG non permette una buona visualizzazione con il browser di casa Microsoft; per evitare spiacevoli aspetti grafici ho deciso di impedire a IE di leggere il codice con l’immagine, utilizzando un semplice selettore universale *, questo viene letto da browser datati, mentre viene completamente ignorato da quelli più recenti.

Quindi sfruttando questa caratteristica si può decidere di controllare l’elemento H2 ed impedirgli di visualizzare l’immagine di sfondo:

*h2 span {background:none;}

Prova a visualizzare questa pagina d’esempio sia con Mozilla/Firefox che con Internet Explorer, e noterai che il testo presenta le stesse caratteristiche, tranne la lucidità data dall’immagine.

E’ da considerare che al momento in cui sto scrivendo questo articolo la Microsoft ha rilasciato la Internet Explorer 7, il quale dovrebbe supportare il formato PNG delle immagini; per saperne di più sulle nuove caratteristiche di IE7 vi consiglio questo articolo di Alessandro.

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.