La idea es crear un borroneado que no funcione solamente en
IExplorer, y -de ser posible- que mejore un poco la vista de los filtros
blur y
motionblur, que es bastante floja.
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:
<!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>
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.
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.