Dentro 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
Lunes, 11 de Agosto de 2008 a las 16.44
HOLA, intente bajar el script reflection.js pero el enlance no funciona.
Podrias dar otro enlance alternativo ó enviarlo por mail ?
Miércoles, 18 de Noviembre de 2009 a las 18.57
Excelnete script, funciona de maravilla. gracias!