Uno de los efectos gráficos más utilizados ultimamente son las imagenes reflejadas, como si estuvieran sobre una superficie especular. Sin embargo, realizar manualmente ese reflejo con todas y cada una de las imagenes de un sitio, y que además tengan continuidad entre si, es un trabajo repetitivo, cansado y aburrido.

Reflection.js es una librería javascript que hace ese trabajo por nosotros en “runtime”, es decir, al tiempo que se renderiza la página en el navegador del cliente. Con esta librería no tenemos que modificar ni aplicar manualmente el filtro a las imagenes. Basta con asignarles la clase CSS “reflect” (”class=”reflect”) a las imagenes que queremos reflejar y la libreria se encarga de crear el efecto visual por nosotros.

La librería apenas tiene 5Kbs. de peso. Funciona de manera no “obstrusiva”, de forma que nuestro código XHTML se queda limpio. Es compatible con los navegadores más utilizados: Internet Explorer 5.5, Firefox, Safari y Opera. Además, la librería tiene una buena “degradación” con los navegadores no compatibles. En estos navegadores simplemente no se muestra el reflejo.

Personalmente, no es que use habitualmente este recurso gráfico, pero desde luego, si en algún momento me planteara utilizarlo, sin duda, lo haría con esta librería javascript, porque son muchas las horas que me estaría ahorrando de trabajo.

Aquí podeis descargar la librería y ver ejemplos de su funcionamiento (la página es bastante fea, lo reconozco, pero eso no es achacable a la librería ;-)).