jueves, 25 de julio de 2013

Redondear una imagen

¿Como Redondear Una Imagen Con Código HTML o CSS?
Utilizaremos "border-radius", Debes Editar 50px Por El Nro Que Deseas {20p, 10px, 7px, etc.}
Ejemplo 1
{Redondear Todas Las Esquinas}


Código:
<img src="URL DE TU IMAGEN" style="-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;padding:0px;"/>

Ejemplo 2
{Seleccionar Las Esquinas A Redondear}


Código:
<img src="URL DE TU IMAGEN" style="-webkit-border-radius: 50px 10px 50px 10px;-moz-border-radius: 50px 10px 50px 10px;border-radius: 50px 10px 50px 10px;padding:0px;"/>

Ejemplo 3
{Imagen Circular}


Código:
<img src="URL DE TU IMAGEN" style="-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;padding:0px;"/>

¿Como Colocar El Efecto En Todas Las Imágenes Del Blog?

Diseño // Edicion HTML // [Ctrl + F] & Buscas ]]></b:skin>
ARRIBA Pega El Código Que Deseas:
Efecto 1
img {
padding:0px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
img:hover {
padding:0px;
border-radius:0px;
}
Efecto 2
img {
padding:0px;
-webkit-border-radius: 50px 10px 50px 10px;
-moz-border-radius: 50px 10px 50px 10px;
border-radius: 50px 10px 50px 10px;
}
img:hover {
padding:0px;
border-radius:0px;
}
El Efecto Numero 3 No Es "Estético" Para Todas Las Imágenes Ya Que Sirve Si La Imagen Posee La Misma Medida De Ancho & Alto.




1 comentario :

  1. Holisss
    Me encanta esta entrada y el blog siempre me ayuda mucho.
    Le podrías echar un vistazo al mío y decirme que te parece?: http://poquitodetodoymas.blogspot.com.es/

    PORFIS y GRACIAS

    ResponderEliminar