CSS3: Reflejos en imágenes, elementos y objetos

Seguimos hablando de las nuevas propiedades que tendrá el CSS3 y ahora toca el turno a una propiedad que nos permite crear un efecto de reflejo a cualquier elemento de nuestro blog o sitio web. Solo con una linea de código tendremos un espectacular efecto reflejo.

Los navegadores que soportan este efecto son Chrome y Safari. Así que extremen sus precauciones al utilizar este efecto, usenlo como premio por usar esos navegadores o como prefieran, sigamos adelante. Ahora pasemos a la implementación.

El código CSS3, que hará todo el trabajo sucio por nosotros, es el siguiente: [1]Para agregarlo fácilmente solo entramos al panel de Diseño>Edicion HTML>Sin expandir plantillas de artilugios

[2]Buscar con

Ctrl+F

:

]]></b:skin>

[3] Justo antes de

]]></b:skin>

pegar el código CSS3, quedará algo así: Ahora simplemente donde necesitemos agregar el efecto tendremos que modificar el código de la siguiente manera:

Antes

Despues

Podemos hacer fantásticas cosas con CSS3, podrías combinar este efecto con el pie de foto para crear impresionantes efectos con las imágenes en tu sitio web. Para agregarle efectos a la imagen de aquí debajo solo utilicé CSS:

Unicornio nadando, IMPOSIBLE!!

Y no solo es posible con imágenes, también podemos reflejar los elementos que queramos, únicamente que con los elementos que no son imágenes es necesario agregarle un color de fondo, ya que si no agregamos color de fondo solo se reflejarán las letras mas largas:

Este es un elemento de una página web, haremos que en Chrome y en Safari se vea un reflejo espectacular!

Modificaciones avanzadas

Para usuarios avanzados de CSS, existen algunas opciones extras para modificar, como la transparencia del reflejo, el tamaño o la dirección del reflejo. Solo tendremos que modificar de la siguiente manera: El texto en color:

Amarillo: dirección del reflejo. Puedes introducir valores en inglés como:

• below - abajo
• above - arriba
• left - izquierda
• right - derecha

Verde: Distancia entre la imagen o elemento y el reflejo. Puedes introducir cualquier valor, en pixeles o porcentaje.

Azul: Es el tamaño del reflejo, entre mas grande sea este valor menor será el reflejo. Puede introducir valores en porcentaje.

Rojo: Es la transparencia del reflejo. Puedes introducir valores de 0 a 1. En cero es totalmente transparente y 1 totalmente opaco

Ahora la limitante es nuestra propia imaginación, suerte!

FUENTE | -webkit-box-reflect