Voici un effet sympa à réaliser en CSS : flouter du texte. On utilise pour cela la propriété text-shadow qu'on va détourner de sa fonction première. On va faire en sorte d'afficher uniquement l'ombre portée et de faire disparaitre le texte normal.

J'ai pour le moment trouvé deux solutions. L'une, facile à implémenter n'importe où mais qui ne fonctionne que sous Firefox. L'autre qui fonctionne sur tout navigateur qui supporte text-shadow, donc Firefox, Safari et Chrome. Mais pas évidente à utiliser dans toute les conditions.

La première méthode consiste simplement à appliquer un text-shadow sur du texte de couleur transparente :

  1. .blur {
  2. 	color: transparent;
  3. 	text-shadow: 0 0 4px rgba(0,0,0,0.8);
  4. }

Malheureusement avec le moteur de rendu Webkit, cette transparence est appliquée à l'ensemble du texte, ombre comprise, donc tout disparait. On essaiera alors la seconde solution qui consiste à décaller le texte dans une zone invisible de l'écran et de décaller dans l'autre sens et de la même distance son ombre portée :

  1. .blur {
  2. 	margin-top: -1000px;
  3. 	text-shadow: 0 1000px 4px rgba(0,0,0,0.8);
  4. }

Cette méthode a de nombreux désavantages dont l'impossibilité de sélectionner le texte. Mais elle fonctionne sur Firefox, Safari et Chrome.

Vous pouvez voir les résultats ici et la première méthode en application sur s.arcas.me avec un fallback pour Safari.

Si quelqu'un arrive à trouver un bidouille plus universelle pour faire cet effet de blur plus simplement, qu'il s'exprime !