Du flou gaussien en CSS3

J’adore CSS3. Chaque jour, j’en découvre un peu plus, et chaque jour, je suis surpris par de nouvelles utilisations intelligentes et un peu détournées des propriétés. Je suis retombé récemment sur cet article expliquant comment simuler un effet de flou gaussien sur du texte. Avant de passer aux explications, regardez un peu ce que ça donne appliqué sur cette page.

Voir une démo du flou en CSS3

Je suis sympa, vous pouvez recliquer sur le même lien pour désactiver le flou. Maintenant, pour arriver à ça, il vous suffit tout simplement dans votre CSS de mettre la couleur de vos textes en transparent, et d’appliquer une ombre sur le texte à l’aide de la propriété text-shadow. Pour appliquer cet effet à toutes vos balises <p>, vous pouvez ainsi écrire le code suivant.

p
{
color:transparent;
text-shadow:0 0 5px #333;
}

Vous pouvez régler les 4 valeurs de la propriété text-shadow selon vos besoins. Elles correspondent dans l’ordre à la position horizontale de l’ombre, la position verticale de l’ombre, la taille/floutage de l’ombre, et la couleur de l’ombre.

Comme d’habitude, cette propriété n’est supportée par aucune version d’Internet Explorer (même pas IE9, non non). Vous pouvez donc ajouter les lignes suivantes.

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";

En bonus, vous pouvez créer une transition CSS3 pour donner un effet de flou progressif pour les navigateurs WebKit et Firefox 4 en ajoutant les déclarations suivantes dans votre règle CSS de floutage.

-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;

TA-DAM ! A vous la gloire avec ce magnifique effet de flou. Pour un exemple d’utilisation concret, l’auteur initial de cet effet proposait un exemple de floutage du texte derrière une lightbox. Ou sinon vous pouvez activer l’effet de flou sur cette page, et essayer de rédiger un commentaire sans faire de fautes.