Bonjour à tous,
Toujours dans cette même problématique de créer un titre en image en restant valide et accessible, mais aussi en gardant un code propre et une sémantique optimale, j'ai testé une solution simple et efficace qui semble élégante et fonctionnelle.
Je suis d'ailleurs étonné de n'avoir vu cette technique nulle part ailleurs, méthode pourtant basique.
L'idée est basée comme d'habitude sur un arrière-plan graphique et un décalage du texte, la différence étant qu'elle ne demande aucun ajout de balises (span ou autres) et qu'elle est très simple à mettre en place (par rapport à la méthode du logo clippé par exemple). Pour l'exemple, mettons que notre image mesure 200px de large et 50 de haut. En gros, ça donnerait quelque chose comme ceci:
Qu'en pensez-vous? La technique existe probablement déjà, mais je n'ai honnêtement jamais vu un site l'utiliser ou même en parler.
Cordialement,
Benjamin
Toujours dans cette même problématique de créer un titre en image en restant valide et accessible, mais aussi en gardant un code propre et une sémantique optimale, j'ai testé une solution simple et efficace qui semble élégante et fonctionnelle.
Je suis d'ailleurs étonné de n'avoir vu cette technique nulle part ailleurs, méthode pourtant basique.
L'idée est basée comme d'habitude sur un arrière-plan graphique et un décalage du texte, la différence étant qu'elle ne demande aucun ajout de balises (span ou autres) et qu'elle est très simple à mettre en place (par rapport à la méthode du logo clippé par exemple). Pour l'exemple, mettons que notre image mesure 200px de large et 50 de haut. En gros, ça donnerait quelque chose comme ceci:
[b][#black]HTML[/#][/b]
<h1>Titre de section</h1>
[b][#black]CSS[/#][/b]
h1 {background:url(image.png); width:0; height:50px; padding-left:200px; overflow:hidden;}
Qu'en pensez-vous? La technique existe probablement déjà, mais je n'ai honnêtement jamais vu un site l'utiliser ou même en parler.
Cordialement,
Benjamin
