Grégocentrique

Un mec en slip c'est toujours marrant.

Grégocentrique est un site avec des grosses écritures orange, des BD, des photomontages absolument géniaux et un blog sans intérêt mêlant maladroitement introspection contemplative et volonté d’affirmation de ma personalité numérique.

Un effet de flou avec CSS3

Beaucoup de gens m’interpellent dans la rue pour me demander comment j’ai fait cet effet de flou sur la police de caractère dans le panneau Flous RSS de mon footer. L’autre matin une petite vieille m’a même lancé devant l‘étal des fruits et légumes que ce n‘était qu’un simple image-replacement et qu’elle en faisait déjà des comme ça en 2006.

Je lui ai rétorqué laisse-moi rire Mamie, mais non, ce n’est pas un image-replacement, et je lui ai expliqué toute l’histoire.

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.

Ombre sur texte en CSS3

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.

Il est flou Afflelou

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é.

Commentaires vides de sens (2)

Tom

Le 03.11.2010 à 08h50 #

Mais vous êtes flou!

Liliwak

Le 28.05.2013 à 18h36 #

Il est flou l’affreux loup …

Paie ton commentaire

L'adresse email n'apparaîtra jamais sur le site et je ne m'en servirai que pour vous envoyer des photos de moi nu. Accessoirement, elle permet d'afficher votre gravatar.