Micaela 7 de agosto de 2008 a las 14.28
   Imprimir artículo
elWebmaster.com

Script para reflejar imágenes


imagen reflejadaDentro de lo que es la Web 2.0 existe un efecto muy usado: reflejar imágenes de forma tal que el reflejo se difumine poco a poco.
Para lograr esto es muy común utilizar herramientas como Photoshop o FireWorks, pero usar estas aplicaciones requiere un conocimiento avanzado de estos programas.

Para esto les traigo una solución que realmente me asombró por su simpleza, Reflection.js un script de Javascript que es verdaderamente ventajoso en estos casos.

Para poder utilizarlo, antes que nada, es necesario descargar el script (haz clic aquí) y luego de subirlo a nuestro sitio enlazarlo dentro del head de la página que lo utilizará mediante la siguiente línea:

<script type="text/javascript" src="reflection.js"></script>

Una vez hecho esto sólo se necesita agregar en el tag de la imagen a reflejar la clase reflected, por ejemplo así:

<img class="reflect" src="imagen.jpg">

Y ya con esto podremos observar nuestra imagen reflejada.

Reflection.js se mezcla automáticamente con el color de fondo o imagen de fondo y permite cambiar la altura y la opacidad del reflejo mediante rheight y ropacity respectivamente, por ejemplo para obtener un reflejo con el 80% de altura y un 40% de opacidad es tan simple como esto:

<img class="reflect rheight80 ropacity40"src="imagen.jpg">

Espero que pongan en práctica este script y que les resulte tan útil como a mí.

Fuente: Blog and Web


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Alex dice:

    HOLA, intente bajar el script reflection.js pero el enlance no funciona.
    Podrias dar otro enlance alternativo ó enviarlo por mail ?

  2. Andres dice:

    Excelnete script, funciona de maravilla. gracias!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder