El reflejo espejado tan 2.0 tiene muchas aplicaciones. Sin embargo, no es muy práctico si a cada imagen a la que queremos dar este efecto la tenemos que abrir y editar en Photoshop.
Deja de perder el tiempo y conoce cómo hacer este efecto con Reflection.js de forma automática, aplicando JavaScript.
Reflection.js es una utilidad JavaScript disponible tanto para jQuery como para MooTools que crea reflexiones para cualquier imagen. Lo que hace es crear un nuevo elemento IMG con filtros especiales por si el cliente utiliza IE. Y si el cliente no usa IE, Reflection.js genera un elemento CANVAS y construye la reflexión a través de este elemento.
El HTML
-
<img src="cricci-player.jpg" alt="Christina Ricci" class="reflect" />
Y la clase CSS reflect para cualquier imagen que desees reflejar.
La implementación del MooTools Javascript
-
window.addEvent('domready',function() {
-
var options = { height: 0.5 };
-
$$('img.reflect').each(function(img) {
-
img.reflect(options);
-
});
-
});
La versión MooTools de Reflection.js implementa el método reflect para crear las reflexiones.
La implementación del jQuery Javascript
-
document.ready(function() {
-
var options = { opacity: 0.75 };
-
$('.reflect').reflect(options);
-
});
Bastante parecido al método MooTools, ejecutas el método reflect de cada elemento.
¡No malgastes más el tiempo haciendo reflejos en Photoshop! ¡Utiliza el poder de JavaScript!
Fuente: David Walsh Blog
Lunes, 21 de Diciembre de 2009 a las 19.40
[...] 21 Diciembre 2009 de Ãngel LeÃdo en elwebmaster: [...]