Grégocentrique

Image-replacement? Non!

Alors que je cherchais un moyen subtil d’illustrer le jeu de mot tout en finesse Flou RSS, je décidai de rendre le titre flou. La première solution qui s’offrit à moi était bien entendu un classique image-replacement. En deux temps trois mouvement mon image était en place, mais comme tous les image-replacements elle présentait quelques inconvénients :

• La couleur de fond ne pouvait plus varier sans que je ne doive refaire l’image.
• Même chose pour la couleur de police.
• Même chose pour la taille de police.
• Elle impliquait des contraintes de taille sur le bloc de titre.

C’est alors que j’ai pensé regarder du côté de CSS3.

Tu connais pas CSS3 mec?

Ayant vite découvert qu’aucun effet n’incluait nativement le flou, je me suis tourné vers la propriété text-shadow, car tout bon utilisateur de Photoshop sait qu’un flou peut tout à fait faire office d’ombre, et presque vice et versa. J’investiguai donc de ce côté en tentant la propriété CSS suivante :

p
{
  text-shadow : 0 0 0.2em black;
}

Avec le résultat suivant.

Ah ouais on voit bien l’ombre. Mais pour l’effet de flou c’est quand même un peu raté, finalement on voit trop le texte.

Bon sang ne saurait mentir mais c’est bien sûr!

Si on voit trop le texte, c’est qu’il faut l’enlever! J‘échafaudai alors un plan machiavélique à base de padding, d’ overflow : hidden et de décalage vertical de text-shadow, de façon à dissimuler le texte hors de la balise h3 et de décaler l’ombre de façon à ce qu’elle soit visible. Si j’avais travaillé à l‘époque avec text-indent plutôt qu’avec de padding, cette solution aurait donné :

 p
{
  text-shadow : 50em 0 0.2em black;
  text-indent : -100em;
}

Et cette solution fonctionne.

C’est d’ailleurs celle-ci qui est toujours en vigueur dans mon footer, car je suis beaucoup trop fainéant pour l’y avoir remplacé par la dernière solution, encore meilleure.

Et la transparence fût.

Quelques jours plus tard, tandis que je m’ennuyais sur mon lieu de présence de 9h30 à 18h, j’essayais une autre solution, qui consistait à appliquer la couleur transparent au texte.

p
{
  color : transparent;
  text-shadow : 0 0 0.2em black;
}

Ce fût un succès.

Et supérieur au précédent, pour la simple et bonne raison que mon texte était devenu sélectionnable.

J’espère que vous êtes contents.

Voilà, tout ça pour pas grand chose me direz-vous? Certes. Mais ça faisait quelques temps que je voulais partager cette trouvaille, non sans une certaine fierté puisque je ne suis même pas aller voir sur le net si d’autres amateurs de bons mots y avaient eux aussi pensé.