Des titres en images
Par Laurentj le mercredi, décembre 17 2003, 14:03 - Technologies Web - Lien permanent
On peut voir beaucoup de techniques à droite, à gauche, pour pouvoir faire des titres en images tout en restant accéssible. On a par exemple :
Celle là (bof, sémantiquement, est-ce vraiment bien ?..)
<h1><img src="" alt="mon titre" /></h1>
Ou celle là en mettant un display:none; sur le span et un background-image sur le h1 ( méthode FIR expliquée sur stopdesign ) :
<h1><span>mon titre</span></h1>
Je pense toutefois avoir trouvé la meilleure méthode, en scrutant la feuille CSS du nouveau design du blog de David Hyatt (M'sieur Safari et Mozilla) :
<h1>mon titre</h1>
Pour transformer en image, rien de plus simple : utiliser text-indent avec une valeur négative et overflow:hidden pour éviter d'éventuelle surprises :
h1 { text-indent:-100em; background-image:url(monimage.png); overflow:hidden; width:..... }
Plus sémantique et plus accéssible, on ne peut pas mieux faire, n'est ce pas ;-) Cela évite les problèmes posés par un display:none ou visibility:hidden et on est loin des méthodes superes lourdes en javascript (beurk :-/)
Commentaires