Hacker of the Web
Tus ideas en código!...y mas

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.

unicornio

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:
.reflectMe{
display:block;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent), to(rgba(255,255,255,0.5)))
}
.reflectMe img{display:static}
[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í:
.reflectMe{
display:block;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent), to(rgba(255,255,255,0.5)))
}
.reflectMe img{display:static}
]]></b:skin>
Ahora simplemente donde necesitemos agregar el efecto tendremos que modificar el código de la siguiente manera:
Antes
<a href='http://google.com'>Texto que rota!</a>
<img src='http://ejemplo.com/imagen_que_rota.jpg' />
Despues
<a class='reflectMe' href='http://google.com'>Texto que rota!</a>
<img class='reflectMe' src='http://ejemplo.com/imagen_que_rota.jpg' />
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 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:
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent), to(rgba(255,255,255,0.5)))
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



#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

Sé el primero y comenta !


Página Principal
Arriba