Retro
Efecto redondeada y con sombra en las imagenes: Bueno pues aqui les traigo este nuevo codigo es para a todos aquel que les gusta decorar su web.Bueno se trata de un efecto que hace una imagen osea el efecto hace una imagen redondeada y con un poco de sombra y que cuando pase el cursor sobre ella buelva a su valor original lentamente. Bueno pues abajo de esta imformacion les dejo un ejemplo. ¿Te gusto? Pues que esperas a colocarlo en tu web colocando los 2 codigos que estan abajo del ejemplo.
Ejemplo:
Primero colocamos este codigo en Texto por encima de la pagina.
<style type="text/css">
.redondeado {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
</style>
.redondeado {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
</style>
Ahora para hacer el efecto tenemos que copear el siguiente codigo y pegarlo en donde quieras que aparesca en HTML. Pero recuerda editar donde diga "Url de la imagen". Hay colocaras el link de la imagen la que hara el efecto.
<img class="redondeado" src="URL DE LA IMAGEN" />
