Efecto de reflejo con CSS

La reflexión fue uno de los efectos con mayor auge en el pasado reciente del diseño gráfico, su impacto y penetración llegó a tal grado que actualmente son pocos los diseñadores que no han puesto en práctica esta técnica.

Su uso en el diseño de logos, banners y galerías de imágenes se ha convertido en algo cotidiano, resultado producido por su sencillez y fácil aplicación, la cual hecha de manera correcta puede dar realce a la vista de nuestro sitio, con tan sólo unos cuantos toques.

La técnica consiste básicamente en colocar debajo de una imagen, una copia de ésta con la diferencia de que se encontrará volteada de cabeza y se le agregará un efecto de degradado que termine en transparencia, para así crear una percepción de camuflaje con el fondo, ya sea de la página Web o de otra imagen.

Esto creará un efecto donde la imagen pareciera estar sobre agua o un espejo, lo que también es muy utilizado para dar la sensación de brillo o limpieza.

Para lograr este efecto usualmente se utilizan programas de diseño como Photoshop o Corel Draw, los cuales nos permiten crear reflejos mediante herramientas como lazo magnético, calar bordes, degradado de colores y opacidad para la transparencia, pero esto hace lento el proceso de creación.

Con el objetivo de optimizar el proceso y tener una mejor relación con los motores de búsqueda y bots, se ha recurrido a otras herramientas como la librería reflection.js de jQuery, que nos permite agregar el efecto de manera instantánea con unas cuantas líneas de código de javascript como las siguientes:

        jQuery(document).ready(function() {                 jQuery("img.reflect").each(function(){                         jQuery(this).load(                                  function(){                                          jQuery(this).reflect({ height: 0.33,  opacity: 0.5});                                 }                          );                 });         });

Con esto el texto o imagen a la que se le aplicará el reflejo no necesita ser editada con ningún programa, ya que el navegador se encargará de crear el efecto. Esta fue la solución más práctica y sencilla para lograr el efecto, hasta el momento en que WebKit para CSS3 nos dio la oportunidad de aplicar el mismo efecto con tan sólo una línea de código.

CSS3 nos permite agregar reflejo a texto, imágenes e incluso a vídeos, lo que crea un ambiente no antes visto en la reproducción de multimedia. Desgraciadamente al pertenecer a WebKit solo puede ser visualizado en ciertos navegadores como Google Chrome y Safari, y por lo tanto también en los dispositivos móviles iPhone e iPod.

Para aplicar el efecto a uno o varios elementos basta con agregar la siguiente línea en el código CSS correspondiente a la clase o etiqueta del elemento:

-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(white));

El efecto lleva por nombre “-webkit-box-reflect” y lo primero en definir es la dirección en la que queremos que nuestra reflexión sea colocada. Al momento de escribir “below” se esta indicando que la reflexión será hacia abajo, pero también se pueden usar valores como “left” o “right”.

Después de determinar la dirección, indicaremos el espacio que queremos dejar entre la imagen original y el reflejo, en nuestro ejemplo le damos el valor de 4 px, aunque existen personas que prefieren que el reflejo se encuentre pegado a la imagen original, para ello indicaremos un 0px.

Para continuar con el efecto agregaremos un gradiente lineal que ira de la esquina superior izquierda a la inferior derecha, y para ello usaremos el -webkit-gradient, que tendra como parametros el tipo (linear), la posición inicial (left top), posición final (left bottom) y finalmente agregamos la gama de colores que contendrá el gradiante, por lo que indicamos que ira de transparente a blanco, y para que el reflejo no ocupe tanto espacio de nuestra página agregamos el atributo “color-stop”, y dentro de este el .5 que significa 50% de la imagen tendrá color.

Es recomendable no aplicar este efecto a todas las imágenes de tu sitio, trata de planear cómo y dónde usar la reflexión, es adecuado crear una clase que contenga el “webkit box reflect” y evitar usar el nombre del elemento “img”, así simplemente aquellas imágenes que tengan esa clase asignada aplicarán el efecto.

El código final de nuestro CSS quedaría de la siguiente manera:

.reflejo {  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(white));  } 

Y por el lado del HTML, basta con agregar una imagen de este modo para lograr obtener el resultado deseado:

<img src="imagen.jpg" alt="”imagen"” class="”reflejo"” />

Como todo efecto de Webkit, resulta muy flexible y combinable con otros de su tipo, se pueden agregar esquinas redondeadas, borde degradado, sombras, entre otros, todo dependerá de tu visión y por supuesto de tus gustos. Esperemos que pronto este efecto pueda ser aplicable con CSS3 en todos los navegadores disponibles.

Escrito por:
ISC Daniel Ernesto Navarro Herrera
OK HOSTING TEAM
Contrata hoy tu Hosting y Dominio en
http://www.miempresaenlinea.com