Quien sepa algo de CSS ya habrá probado el filtro
DXImageTransform.Microsoft.Gradient(gradientType=0 , startColorStr=#000000, endColorStr=#ffffff);
para crear una capa con degradé de un color a otro, o el viejo
alpha(style=1, opacity=25, finishOpacity=100, startX=0, finishX=100, startY=100, finishY=0)
que además sirve para ir de 'opaco' a 'transparente'.
Pero son todos para
Internet Explorer, y en
Mozilla hay que usar una imagen para el efecto con transparencias.
Aunque existe una forma de aprovechar
opacity escribiendo el código con un escript ( hacerlo a mano es muy tedioso ), y así conseguir algo muy parecido.
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>SEMITRANSPARENCIA DEGRADADA.</title>
<script type="text/javascript">
function dgd(){
var objeto = document.getElementById("cartel");
var ancho = parseInt(objeto.offsetWidth);
var alto = parseInt(objeto.offsetHeight);
var texto = objeto.innerHTML;
var grado = 3;
var fondo = "";
var capas = Math.ceil(ancho / grado);
for(f=1; f<capas; f++){
fondo += "<div style='position:absolute; top:0; left:0; height:"+ alto +"px; width:"+ grado*f +"px; background-color:#000000;' class='fondeg'></div>";
}
document.getElementById("caja").style.height = alto+"px";
document.getElementById("caja").style.width = ancho+"px";
document.getElementById("caja").style.backgroundImage = "url('http://www.forosdelweb.com/images/reputation/reputation_balance.gif')";
document.getElementById("caja").style.backgroundColor = "#0000ff";
objeto.innerHTML = fondo + "<div style='position:absolute; top:0; left:0; height:"+ alto +"px; width:"+ ancho +"px; background-color:transparent'>"+ texto +"</div>";
//------------------//
var objeto2 = document.getElementById("cuadro");
var lado = 200;
var grado2 = 4;
var fondo2 = "";
var capas2 = Math.ceil(lado / grado2);
for(f=1; f<capas2; f++){
fondo2 += "<div style='position:absolute; top:0; left:0; height:"+ grado2*f +"px; width:"+ grado2*f +"px;' class='capaDeg'></div>";
}
objeto2.innerHTML = fondo2;
}
onload = dgd;
</script>
<style type="text/css">
body{color:#ffffff; background-color:#000000;}
#cartel{font:900 50px sans-serif; color:#ffffff;position:absolute;}
.fondeg{filter:alpha(opacity=2); opacity:0.02; background-color:#000000; position:absolute}
#cuadro{background-color:#ffff00; position:relative; width:200px; height:200px; margin: 50px 0;}
.capaDeg{filter:alpha(opacity=2); opacity:0.02; background-color:#ff0000;}
</style>
</head>
<body>
<h2>Semitransparencia degradada. (FF, IE, Op?)</h2>
<div id="caja"><div id="cartel">QWERTYUIOP</div></div>
<div id="cuadro"></div>
</body>
</html>
Son solamente capas semitransparentes superpuestas en un contenedor, entre el fondo y un contenido. En el ejemplo parece que una imagen de fondo tuviera transparencia, porque las capas y el fondo del documento tienen el mismo color.
Le agregué la opacidad de
IE solamente para probarlo, porque los parámetros del filtro son más eficientes,y no es mucho negocio usar este método.
Fondo degradado Fondo degradado Función "opacity" #23