Los reflejos en las imagenes me gustan, es uno de mis efectos favoritos. Antes teniamos que recurrir a editores, programas o javascript para conseguirlo, pero ahora con el CSS3 todo es mucho mas facil. Con un codigo sencillo y muy cortito podremos ver como se refleja la imagen que nosotros queramos. A esto le podemos dar distintos usos, por ejemplo aplicandoselo al logo de nuestro blog, para darle un toque mas sofisticado y elegante.
Este efecto lo podemos utlizar en cualquier imagen, sea del tipo que sea. Aqui teneis un ejemplo con una en formato GIF animada.
Y aqui otra en formato PNG con su respectivo reflejo.
Cada vez que quieras aplicar este efecto copia y pega este codigo. Tienes que poner la url de la imagen a reflejar 2 veces donde esta indicado en color rojo.
<img src="URL DE LA IMAGEN"><div class="reflejo"> <img src="URL DE LA IMAGEN"></div>
<style>
.reflejo {
position:relative;bottom:5px;
}
.reflejo img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv;
opacity:0.20;
}
</style>
