Reflection 2.0 - Aplicar efecto de reflejo a imágenes y gráficos en una página web.

Reflection es un script gratuito programado en lenguaje Javascript, para poder añadir a nuestras imágenes y gráficos de una página, un efecto de reflexión o reflejo. Puede ser muy útil por ejemplo para logos, íconos, imágenes dinámicas, por ejemplo avatars para un foro, blog entre otros usos.

El script es fácil de implementar para aplicar el reflejo a los gráficos, además es posible manipular y cambiar algunas opciones del efecto, por ejemplo el grado o porcentaje de opacidad, mezclar el reflejo con un color, especificar el alto, solo mostrar el efecto al pasar el mouse por encima de la imagen o al hacer clic ( útil para enlaces ) , escalar el gráfico entre otros.

El script es muy liviano, tan solo pesa 5KB, y otra ventaja es que funciona con la mayoría de los navegadores web.

¿ Como se utiliza ?

Simplemente se debe añadir en la sección Head de la página, el archivo Javascript reflection.js

Luego a cada imagen que se le quiera aplicar y crear el efecto, se deberá establecer en el atributo Class, el valor Reflect, por ejemplo:

Lo anterior creará un efecto de reflejo normal. Para manipular otras opciones del efecto, como por ejemplo variar el grado de opacidad, fundirlo con un color, reescalar la imagen etc .., puedes ver el archivo de demostración que se incluye junto al script ( testsuite.html y el archivo readme.html para ver otras configuraciones e información).

Lenguaje / Plataforma: Javascript

Navegadores webs soportados:

• Google Chrome (Todas las versiones )
• Internet Explorer 5.5+
• Mozilla Firefox 1.5+
• Safari 2 o superior.
• Opera 9 o superior.

Esta captura muestra distintos grados de opacidad de la imagen.

Mezclado o fundido con un color.

Reflejo normal o por defecto.

Con diferente altura.