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

Últimos artículos

Scroll al inicio