martes, 4 de septiembre de 2007
Esto de que cada navegador utilice su propio dialecto derivado del CSS para indicar atributos, como la transparencia u opacidad de los elementos de una página, tiene su gracia... o mejor pensado, no tiene ninguna gracia.
Menos mal que en CSS-Tricks nos enseñan cómo definirla para que funcionen con prácticamente todos los browsers del universo conocido:
De esta forma, para hacer que un bloque div (por ejemplo) se convierta en semitransparente (al 50% según el ejemplo anterior), sólo habría que poner:
Obviamente, el nivel de opacidad puede modificarse al valor deseado, siendo el 100% el máximo (totalmente opaco) y 0% el mínimo (totalmente transparente). Ojo, que en la primera línea (filter:alpha...) se usa el rango 0-100 y en las restantes este valor dividido entre cien, es decir, en un rango del 0 al 1.
Eso sí, supongo que los validadores CSS igual se quejan un poco. ;-)
Menos mal que en CSS-Tricks nos enseñan cómo definirla para que funcionen con prácticamente todos los browsers del universo conocido:
.transparente
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
De esta forma, para hacer que un bloque div (por ejemplo) se convierta en semitransparente (al 50% según el ejemplo anterior), sólo habría que poner:
<div class='transparente'>
... lo que sea
</div>
Obviamente, el nivel de opacidad puede modificarse al valor deseado, siendo el 100% el máximo (totalmente opaco) y 0% el mínimo (totalmente transparente). Ojo, que en la primera línea (filter:alpha...) se usa el rango 0-100 y en las restantes este valor dividido entre cien, es decir, en un rango del 0 al 1.
Eso sí, supongo que los validadores CSS igual se quejan un poco. ;-)
Publicado por José M. Aguilar a las 10:30 p. m.
Etiquetas: css, desarrollo, estándares, programación, trucos, web
2 Comentarios:
Algo que quisiera aumentar es que en las últimas versiones del Konqueror se ha quitado por completo la transparencia (por problemas al integrar el código hecho por Apple).
Así que, aunque se ponga lo de "-khtml-opacity", no hay forma de tener semitransparencia en ese navegador (lo que es una lástima).
Por otro lado, para cualquier versión de Firefox desde la 1.5 para adelante, ya no es necesaria la línea de "-moz-opacity". Con el "opacity" estandar basta, igual que a Safari y Opera.
Ahora, si tan solo los de Internet Explorer se dejaran de inventar dialectos...
Juan Pablo, gracias por tu comentario y la información que aportas.
Así da gusto.
Enviar un nuevo comentario