JMiur [E]

Esta es una forma sencilla de agregar un efecto de reflejo en las imágenes, desarrollada por xhtml-lab.com. Está basada en algo simple, repetir las imágenes e invertir la de abajo usando para eso, la propiedad transform y, eventualmente, el filtro flipv en las versiones anteriores a IE9.

Si a esa imagen inferior, se le aplica opacidad, el resultado es algo similar a un reflejo.


Este sería el HTML básico:
<div class="image-block">
  <img src="URL_IMAGEN"/>
  <div class="reflection">
    <img src="URL_IMAGEN"/>
  </div>
</div>
Y estas las reglas de estilo:
<style>
  .image-block {
    height: 230px;
    overflow: hidden;
    width: 200px;
  }
  .reflection {
    position: relative;
  }
  .reflection img {
    opacity: 0.2;
    -moz-transform: scaleY(-1); /* Firefox */
    -webkit-transform: scaleY(-1); /* Chrome/Safari */
    -o-transform: scaleY(-1); /* Opera */
    -ms-transform: scaleY(-1); /* IE9 */
    transform: scaleY(-1); /* w3c */
    filter: flipv alpha(opacity='20'); /* IE8 */
  }
</style>

En la clase image-block defino width con el ancho de la imagen y height con un valor un poco superior al alto de la imagen para que, aplicando overflow: hidden; este DIV se corte.

En el artículo original, a todo esto se le agrega un DIV extra que se posiciona de modo absoluto sobre la imagen inferior y sobre la que se aplican ciertos filtros extras como gradientes. Esto puede dar cierto trabjo si el fondo no es oscuro pero, puede intentarse y ver qué sale:

<div class="image-block">
  <img src="URL_IMAGEN"/>
  <div class="reflection">
    <img src="URL_IMAGEN"/>
    <div class="reflection-over"></div>
  </div>
</div>

</style>
 reflection-over {
    position:absolute;
    top: 0;
    left: 0;
    height: 120px;
    width:200px;
    background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
    background-image:   -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
    background-image:     -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}
</style>

4 comentarios:

Unknown  

Ohhh yes! ya no necesitamos de herramientas externas :D

Responder
Beben Koben  

hmmm...
used 2 image, then combine with css opacity & color stop!
new trick :)
ty ;)

Responder
Beben Koben  

i'll have be there LoL =))

Responder
Adrián J. Messina  

Buena idea, y buena imaginación.
Está bueno el resultado.
Abrazo!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR