Imágenes con reflejo con CSS3


       Esta especificación es exclusiva de Webkit, no de la W3C, y ahora mismo solo lo soportan navegadores Webkit (Chrome, Safari, IOS, Android y Blackberry).

       Supone un método para hacer que un elemento aparezca reflejado debajo, encima o a un lado del elemento original. Tal vez donde mejor veamos el efecto sea en una imagen, consiguiendo un efecto muy habitual en diseño al comienzo de las webs 2.0.

       El código es el siguiente:

#elemento{
       -webkit-box-reflect: dirección desplazamiento MáscaraImagen;
}

       Donde dirección es donde queremos el reflejo, sus valores pueden ser: above, below, left o right para encima, debajo, izquierda y derecha. El desplazamiento es la cantidad de separación entre la original y el reflejo. El último parámetro, es una imagen que se superpone al reflejo, ya que normalmente no se refleja una imagen completa, sino que se va haciendo más transparente. Podría ser un color, imagen o degradado (opción más habitual).

       Ejemplo, sin máscara de imagen:


       Ejemplo, con máscara de imagen:




      






 Solo funciona en Chrome, Safari, Android y Blackberry

       Además funciona sobre cualquier elemento, incluso sobre vídeo, y si el vídeo está en reproducción el reflejo de la imagen también se mueve. A ver si la W3C se interesa, o los demás navegadores y podemos usarlo en general, ya que es una especificación muy interesante.