Hace un par de meses hice una búsqueda aquí y no lo encontré ni como pregunta ni como respuesta; así que preparé un ejemplo
Código:
Como 'CSS/HTML' es muy engorroso de escribir y muy fácil de entender. Para meterlo en un código fuente será mejor usar javascript. Aquí el JS está solamente para "aclarar" el texto cuando se pasa el puntero.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Efecto blur cross-browser.</title>
<style>
body {font-size:100%; font-family:"times new roman", serif; background-color:#000000; color:#ffffff; }
#texto {position:relative; font:bold 2.5em/110% arial,
sans-serif; height:1em; width:100%; }
#borroso {position:absolute; width:100%; }
#borroso span {position:absolute; color:#009900; filter:alpha(opacity=20); moz-opacity:.2; khtml-opacity:.2; opacity:.2; }
#blur0 {top:-2px; left:-2px; }
#blur1 {top:2px; left:-2px; }
#blur2 {top:-2px; left:2px; }
#blur3 {top:2px; left:2px; }
#blur4 {top:-4px; left:-4px; }
#blur5 {top:4px; left:-4px; }
#blur6 {top:-4px; left:4px; }
#blur7 {top:4px; left:4px; }
</style>
<script>
var titulo , espanes ;
function inicia(){
titulo = document.getElementById("borroso");
espanes = titulo.getElementsByTagName("span").length - 1;
titulo.getElementsByTagName("span")[espanes].style.visibility = "hidden";
for(b=0; b<espanes; b++){
titulo.getElementsByTagName("span")[b].style.visibility = "visible";
}
}
function aclara(){
for(b=0; b<espanes; b++){
titulo.getElementsByTagName("span")[b].style.visibility = "hidden";
}
titulo.getElementsByTagName("span")[espanes].style.visibility = "visible";
}
function borronea(){
for(b=0; b<espanes; b++){
titulo.getElementsByTagName("span")[b].style.visibility = "visible";
}
titulo.getElementsByTagName("span")[espanes].style.visibility = "hidden";
}
onload = inicia;
</script>
</head>
<body>
<h2>Efecto <i>blur</i>. (IE6/7 , FF2 , Op9 , Saf? , Kon?)</h2>
<p id="texto" style="position:relative; font:bold 2.5em/110% arial, sans-serif;"
onmouseover="aclara()" onmouseout="borronea()">
<span id="borroso">
<span id="blur0">█QWERTYUIOP•</span>
<span id="blur1">█QWERTYUIOP•</span>
<span id="blur2">█QWERTYUIOP•</span>
<span id="blur3">█QWERTYUIOP•</span>
<span id="blur4">█QWERTYUIOP•</span>
<span id="blur5">█QWERTYUIOP•</span>
<span id="blur6">█QWERTYUIOP•</span>
<span id="blur7">█QWERTYUIOP•</span>
<span id="blur8" style="color:#009900; filter:alpha(opacity=100); moz-opacity:1;
khtml-opacity:1; opacity:1;">█QWERTYUIOP•</span>
</span>
</p>
<b>Cambia al pasar el puntero.</b>
</body></html>
Al igual que con todo efecto que usa capas superpuestas, habrá que agregar algún método para que al seleccionar y copiar nos llevemos sólo una; y que el blureado se vea en pantallas, porque no tiene sentido en voz, braille o hasta papel.
El filtro alpha( opacity ) tiene la sintaxis de IE4 porque funciona al menos hasta la versión 6; pero el que quiera la puede actualizar.
:
, enhorabuena... (la verdad es que solo lo ví en explorer, pero viendo el código no creo que nos estés engañando 
)
?
