JMiur [E]

Así como podemos permutar la visibilidad de un elemento cualquiera modificando sus propiedades CSS, también podemos hacer lo mismo con su transparencia (más información).

En este caso, las propiedades que las controlan varían según sea el navegador que utilizamos así que lo normal es agregarlas todas y que el navegador escoja la que va a utilizar, la otra, la ignorará:

En Internet Explorer:
filter:alpha(opacity=valor) un valor entre 0 (transparente) y 100 (opaco)

En Firefox:
opacity: un valor entre 0.0 (transparente) y 1.0 (opaco)

Es muy fácil de aplicar (más información):


Lo más sencillo es establecer una clase CSS que agregamos antes de </b:skin> o entre etiquetas <style> y </style>. Por ejemplo:
<style type="text/css">
.demoTransparencia {filter:alpha(opacity=50); opacity:0.5}
.demoTransparencia:hover {filter:alpha(opacity=100); opacity:1.0}
</style>
La usamos de esta forma:
<div class="demoTransparencia"> ... el contenido ... </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.

Si usamos Scriptaculous, las posibilidades de manejar las transparencias se amplian ya que, como muestran en Woork, le podemos agregar algún efecto extra.

Para eso, vamos a insertar un pequeño script antes de </head>:
<script type="text/javascript">
//<![CDATA[
function changeOpacity(id) {
$opacityStatus = $(id);
if($opacityStatus.value==0) {
new Effect.Opacity(id, {duration:0.5, from:1.0, to:0.5});
$opacityStatus.value = 1;
} else {
new Effect.Opacity(id, {duration:0.5, from:0.5, to:1.0});
$opacityStatus.value= 0;
}
}
//]]>
</script>
Lo que hace ese script es muy simple; cada vez que se lo ejecuta, verifica la opacidad del elemento. Si es opaco lo hace transparente y viceversa. Allí, hay tres valores que podemos establecer:

duration:0.5 es la duración del efecto, el tiempo que tarda entre dos estados
from:1.0 el valor opaco (sin transparencia)
to:0.5 el valor final de la transparencia

Para aplicarlo, usamos eventos; por ejemplo onmouseover y onmouseout:


<div id="demo1" style="filter:alpha(opacity=50); opacity:0.5;" onmouseover="javascript:changeOpacity('demo1')" onmouseout="javascript:changeOpacity('demo1')">
... el contenido ...
</div>

Lo mismo podría hacerse usando el evento onclick:


<div id="demo2" style="filter:alpha(opacity=50); opacity:0.5;" onclick="javascript:changeOpacity('demo2')">
... el contenido ...
</div>

En este ejemplo, usamos una imagen, al hacer click sobre ella, el texto a la izquierda permutará de estado:


<div>
<img onclick="javascript:opacidadS('demoO3')" src="URL_imagen" class="izquierda" />
<span id="demoO3" style="filter:alpha(opacity=50); opacity:0.5;">
... el contenido ...
</span>
</div>

13 comentarios:

MALINA  

muy interesante, por cierto curiosa cifra en tus rss 2222 (mi nùm preferido) :)

Responder
JMiur  

Jajajajajaaj. No lo había notado :D

Responder
MALINA  

ah, olvide decirte que hay una errata al principio de la entrada

modificando sus propeidades

Responder
Graciela  

Están siendo moderados, o no salió, caramba.
Sabes que me tomo un tiempo muy largo jajaja, como lo de insertar los videos...comentaré cuando me decida aplicarlo chauuuu bambino!!!

Responder
Gem@  

Las transparencias son unas de mis debilidades, probaré con estas explicaciones de hoy ;)

Responder
Oloman  

Me gusta este efecto :D

Responder
JMiur  

Ahi están Graciela, sí, están siendo moderados ;)

Gem@. Oloman: a mi también me ha gustado la idea y si se usa Prototype, l omejor es sacarle el máximo provecho.

Responder
Salondesol  

Woou...!!! Es espctacular, cuando tenga en qué, me gustará probarlo.
Muchas gracias por compartirlo.

Salu2.

Responder
Σ=o) Pau  

me encantan estos efectos! :D agendado para pruebas ^_^

besos ronroneados J^^

Responder
Agos RC  

Tengo una pregunta: estoy intentando colocarle un fondo transparente a un sidebar; el problema es que cuando le coloque opacity, los textos e imágenes del sidebar también aparecieron transparentes, ¿como hago para que solamente se vea transparente el color de fondo? El código es el que les dejo a continuación:

#sidebar2-wrapper {
width: 240px;
background:black;
opacity:0.4;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Muchas gracias.

Responder
JMiur  

Con opacity no es posible ya que afecta a todo el contendio. Deberías usar una imagen, un PNG de alguna clase.

Responder
Agos RC  

y como lo uso? si consigo una imagen negra como sería después para usar opacity?

Responder
JMiur  

No sé cuál es el diseño que tienes en mente así que es muy difícil reponder.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR