Y no hay caso. Ahora en
Opera 9.5 otra vez se ve mal. No sé por qué tiene una interpretación diferente de
opacity, pero si a las capas no les pongo un fondo me borronea el texto contra el fondo negro del contenedor. Y se desdibuja mal.
Al final les terminé poniendo un fondo blanco (que se ve mejor que el negro) solamente para
Opera.
Código HTML:
<!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%; background-color:#ffffff; }
#borroso span {position:absolute; color:#009900; ba ckground-color:#ffffff; filter:alpha(opacity=20); moz-opacity:.2; khtml-opacity:.2; opacity:0.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 ;
var fondoOpera = "#ffffff";
function inicia(){
titulo = document.getElementById("borroso");
espanes = titulo.getElementsByTagName("span").length - 1;
titulo.getElementsByTagName("span")[espanes].style.visibility = "hidden";
for(f=0; f<espanes; f++){
if(navigator.userAgent.indexOf("Opera")!=-1){
titulo.getElementsByTagName("span")[f].style.backgroundColor = titulo.getElementsByTagName("span")[espanes].style.backgroundColor = fondoOpera;
}
titulo.getElementsByTagName("span")[f].style.visibility = "visible";
}
}
function aclara(){
for(f=0; f<espanes; f++){
titulo.getElementsByTagName("span")[f].style.visibility = "hidden";
}
titulo.getElementsByTagName("span")[espanes].style.visibility = "visible";
}
function borronea(){
for(f=0; f<espanes; f++){
titulo.getElementsByTagName("span")[f].style.visibility = "visible";
}
titulo.getElementsByTagName("span")[espanes].style.visibility = "hidden";
}
onload = inicia;
</script>
</head>
<body>
<h2>Efecto <i>blur</i>. (IE6/7 , FF2+ , Op9+ , Chr , 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:⚬ filter:alpha(opacity=100); moz-opacity:1;
khtml-opacity:1; opacity:1;">█QWERTYUIOP•</span>
</span>
</p>
<b>Cambia al pasar el puntero. En Opera se agrega un fondo de color blanco.</b>
</body></html> Si alguien tiene una idea mejor ...
Texto transparente en Firefox (como filter chroma) Efecto borroso o nublado o desenfocado, sin filter blur. Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() )