Opacidad en imágenes mediante MooTools

Un efecto interesante que podemos usar en nuestros diseños web es el de la opacidad, jugando con diferentes grados sobre las imágenes. Para conseguirlo lo podemos hacer mediante css o bien con el estupendo framework javascrip MooTools. David Walsh nos explica en su blog los pasos necesarios y el script que necesitamos que paso a adaptar al español. Aquí tenéis la demo de lo que obtendremos.

Lo primero es descargar MooTools en su versión 1.2. Cuando lo tengamos creamos un archivo .html y entre sus etiquetas head llamamos a la librería:

[js][/js]

Seguido introducimos el siguiente script:

[js][/js]

Finalmente incluimos las imágenes a las que queremos darle la opacidad, poniéndoles la clase opacity y usando su atributo alt para indicar el grado que queremos para cada imagen:

[html]

[/html]

Listo, ya tenemos una forma simple de dar diferentes grados de opacidad a las imágenes de una página web.

Enlace: Using MooTools For Opacity

2 Comentarios

  1. Muy buen sistema para no tener que andar jugando con pngs, como siempre en Explorer (<7) no funciona, pero muchas gracias por el truco, no lo conocía. Creo que va siendo hora de empezar a “pasar” de Explorer y que el usuario descubra que ese navegador sólo sirve para bajarse firefox, opera, safari, konqueror, etc.

Dejar respuesta

Please enter your comment!
Please enter your name here