« anterior | siguiente »

Home > 2006 > Junio > Miércoles, 07 de Junio 2006 > Laboratorio: simulación de transparencia mediante CSS
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Mié07Jun2006

Laboratorio: simulación de transparencia mediante CSS

16:17 H (CET)| Temas: CSS · How to · Laboratorio

En la Web 2.0 está más de moda usar transparencias en nuestras páginas web, realmente se puede realizar con estilos, pero con Internet Explorer se hace de una forma y con Firefox de otra, y no estoy muy seguro, con Opera no se puede (actualización: Federico nos comenta que en la versión 9 ya está implementada). Por ello, una forma de simular la transparencia en una capa es usar dos imágenes, una de fondo con la imagen original y la otra con una imagen que hemos creado nosotros que tendrá el efecto de transparencia. transparencia.png

Yo en el ejemplo me he creado una capa blanca, encima he puesto la imagen con cierto grado de transparencia y encima he puesto la misma imagen con efecto de luminosidad suave, para que no sea símplemente una transparencia.

Tenemos una capa div y dentro de ella un párrafo:

<div><p>...</p></div>

Ahora le tenemos que indicar los estilos:

div.contenedor {
  width: 500px;
  height: 375px;
  background: url(forest.jpg) top left no-repeat;
}


div.contenedor p {

  width: 420px;

  height: 295px;

  top: 40px;

  left: 40px;

  background: url(forest_transparencia.jpg) -40px -40px no-repeat;

  border: 2px solid #000000;

  position: relative;

}

Si te fijas, verás que en el estilo de párrafo, se desplaza del background hacia arriba y hacia la izquierda tanto como está desplazado el párrafo hacia abajo y hacia la derecha sobre la capa contenedora.


Ejemplo

Relacionados

1. Federico ~ Jueves, 08 Jun 2006 | 11:46H:

Si con estilos te referis a la propiedad opacity, Opera 9 ya la implementó (y no estoy seguro si en Gecko todavía tenés que usar -moz-opacity.

2. Luis ~ Jueves, 08 Jun 2006 | 14:24H:

Yo en Opera 8.5, que es la última que he usado, no lo tenían implementado, a ver si me instalo ya la 9, que es hora.

La verdad es que esta simulación también se puede usar para no usar exactamente el canal alpha, y darle un cierto toque de diseño, ya que la imagen que simula la transparencia, no tiene que ser exactamente una transparencia.

Saludos y gracias por el apunte.

3. david ~ Viernes, 16 Jun 2006 | 12:42H:

hola,
solo queria daros las gracias por este articulo que me ha venido de lujo para una pagina que estaba haciendo. Lo podeis ver en la URL que he puesto en mis datos, si quereis ;)
Una razon más para leeros todos los dias.
salu2

4. Luis ~ Viernes, 16 Jun 2006 | 21:07H:

Hola David.

Me alegro que te haya servido, te ha quedado muy bien.

Eso, eso, sigue leyéndonos, jeje

Saludos