No recuerdo dónde vi por primera vez una página que utilizaba este efecto de transparencia pero me entusiasmó e hizo que inmediatamente dejara lo que estaba haciendo para ponerme a buscar sobre cómo conseguirlo.
El efecto es muy fácil de aplicar, el único problema es que se consigue de forma diferente en los distintos navegadores, por lo que tendremos que andarnos con ojo si queremos que nuestro efecto sorprenda a los usuarios de todos los navegadores (o al menos de los 3 principales). El ejemplo que vamos a ver funciona en Internet Explorer, Opera y Firefox (al menos en sus últimas versiones). A mí se me ocurren bastantes aplicaciones muy vistosas de este efecto de transparencia pero eso ya os lo dejo a vosotros.
Veamos primero cómo quedaría en el siguiente ejemplo:
Esta es la capa transparente
El cielo está enladrillado. ¿Quién lo desenladrillará? El desenladrillador que lo desenladrille, buen desenladrillador será.
El perro de San Roque no tiene rabo porque Ramón Rodríguez se lo ha cortado.
Pablito clavó un clavito. ¿Qué clavito clavó Pablito?
Tres tristes tigres tragaban trigo en tres tristes trastos sentados tras un trigal.
Me han dicho un dicho que han dicho que he dicho yo. Ese dicho está mal dicho, pues si lo hubiera dicho yo, estaría mejor dicho que el dicho que han dicho que he dicho yo.
Papá, pon pan para Pepín.
Como podéis ver en el ejemplo, tenemos una capa con una serie de trabalenguas en el fondo y una capa verde (nuestra capa con transparencia) que nos deja ver lo que hay en la capa inferior.
A continuación muestro el código sobre cómo incluir una capa transparente en nuestra página web.
<html>
<head>
<style>
.cnt{
width:450px;
background-color:#DDAADD;
margin:0px;
padding:15px;
font-weight:bold
}
.trans{
background-color:#00BB00;
color:#CC0000;
position:absolute;
text-align:center;
top:50px;
left:40px;
padding:65px;
font-size:25px;
font-weight:bold;
width:300px;
}
</style>
</head>
<body>
<div class="trans" style="z-index:1;filter:alpha(opacity=60);float:left;-moz-opacity:.60;opacity:.60">
<p>Esta es la capa transparente</p>
</div>
<div class="cnt">
<p>El cielo está enladrillado. ¿Quién lo desenladrillará? El desenladrillador que lo desenladrille, buen desenladrillador será.</p>
<p>El perro de San Roque no tiene rabo porque Ramón Rodríguez se lo ha cortado.</p>
<p>Pablito clavó un clavito. ¿Qué clavito clavó Pablito?</p>
<p>Tres tristes tigres tragaban trigo en tres tristes trastos sentados tras un trigal.</p>
<p>Me han dicho un dicho que han dicho que he dicho yo. Ese dicho está mal dicho, pues si lo hubiera dicho yo, estaría mejor dicho que el dicho que han dicho que he dicho yo.</p>
<p>Papá, pon pan para Pepín.</p>
</div>
</body>
</html>
En realidad, la parte importante es el trocito siguiente de código CSS:
style="z-index:1;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60"
- z-index: con valor a 1 sirve para posicionar la capa transparente encima de la otra. Si no se especifica un valor para esta propiedad, todas las capas tienen por defecto el valor 0. Este valor indica que la capa está por encima del resto que tengan un valor inferior.
- filter:alpha(opacity=60): Indica una opacidad del 60% (Equivalente al 40% de transparencia) en Internet Explorer.
- -moz-opacity:.60: Indica una opacidad del 60% en Mozilla.
- opacity:.60: Indica opacidad del 60% en Firefox y Opera.
Modificando el valor de opacidad se pueden conseguir diferentes grados de transparencia.
