Opacidad degradada en Firefox ( como alpha (type=) ).

furoya · #1 (**permalink**) 07/05/2007, 11:04

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

chalchis · #2 (**permalink**) 07/05/2007, 13:54

yo lo he manejado asi tanto para ie como para firefox

#capa
{
filter:alpha(opacity=10); /* Transparency */
opacity:0.1; /* Transparency */
/*background-color:#AAA;*/
z-index:1;
position:absolute; /* Always needed */
}

saludos

furoya · #3 (**permalink**) 11/05/2007, 15:19

De verdad no sé si lo hacen a propósito.

¿Y el gradiente, chalchis?

Un dato más por si a alguien le interesa el CSS y todavía no miró el tema de mi último enlace : lo de

Código:

position:absolute; /* Always needed only for IE*/

no es totalmente cierto.

Función "opacity" #19

saludos para ti también.

P.D. : ¿Y en Opera anda?

Edición : También anda; y en Safari / Chrome. Aunque en webkit la función CSS gradient() permite crear transparencias degradadas, todavía no anda en todos los navegadores. Hay un ejemplo para probar en el enlace que puse arriba.