JS: reflejando imágenes

Es un método excelente para reflejar imágenes vía javascript sin necesidad de tener que editar de usar imágenes adicionales o editar la imagen en photoshop (o el programa que sea). Es muy simple de aplicar. reflection.js fue desarrollado por Cow”s Blog. En este link está el post de Cow y en este otro, la explicación de cómo funciona y de cómo se aplica (en inglés).

Reflection.js 1.0 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it”ll degrade and your visitors won”t notice a thing. Best of all, it”s under 4KB.

Y la verdad es que es muy simple de aplicar, consiste en guardar el archivo reflection.js en tu carpeta de scripts (o donde sea que uno los guarde) y después aplicar a la imagen que se quiera reflejar class="reflect" en el mismo tag de la imagen. También se le pueden especificar color de background. Acá va un ejemplo:

Y acá va el código que usé para que sea vea lo de arriba:

<table summary="ejemplos de reflection" align="center">
<tr>
<td>
<img src="/images/astronaut.png" class="reflect" alt="" /></td>
<td style="
background:#000000"><img src="/images/astronaut.png" class="reflect" alt="" /></td>
<td style="
background:#ff0000"><img src="/images/astronaut.png" class="reflect" alt="" /></td>
</tr>
</table>

Deja un comentario

Get Firefox!
Miembro de panic|(o)|zoo