Trucos CSS: transparencias

Voy a iniciar una categoría de trucos con CSS. En este primer post os voy a explicar cómo hacer transparencias tanto de imágenes como de textos.

La orden que tenemos que usar es opacity, y vamos a ver cómo de fácil es jugar con ella para conseguir efectos muy vistosos. Pero como no podría ser de otra forma, veremos que hay órdenes que valen para Explorer, otras que valen para Mozilla, otras que sólo funcionan en Frefox, otras que no….

CAMBIAR LA OPACIDAD DE UNA IMAGEN:

<span style="float: left; opacity: 0.25;">
<img src="ruta de la imagen" width="x" height="y" >
</span>

La orden opacity tiene un valor por defecto de 1 y los valores que toma son porcentuales, es decir, 0.25, 0.50, … En este ejemplo hemos metido una imagen dentro de un span para que coja los efectos y le hemos dado una opacidad del 25%

CAMBIAR LA OPACIDAD DE UN TEXTO:

<div style="color:#333;background:white;filter:alpha(opacity=25);
-moz-opacity:.25;opacity:.25;float:left;width:200px;
margin:10px;font-family:Arial;font-size:28px;line-height:24px;
text-align:right;"><span style="filter:alpha(opacity=75);
-moz-opacity:.75;opacity:.75;">frase primera</span>
frase segunda
<b>negrita</b>
<span style="filter:alpha(opacity=90);
-moz-opacity:.90;opacity:.90;">frase tercera</span>
</div>

En el código podéis ver cómo se utilizan distintas órdenes para los distintos navegadores:

INTERNET EXPLORER: filter: alpha(opacity=50)

MOZILLA: -moz-opacity:0.5

FIREFOX: opacity: .5

Y ahora ya es jugar con la imaginación, aplicarlo a un rollover, montar textos sobre imágenes transparentes,…