Imagen Redonda con Css3
Este es un efecto Circular muy sencillo de usar y fácil de editar, basado en Css para sus webs será práctico de colocarlo y muy elegante para las imágenes, voy a explicarles paso a paso para que puedan guiarse como es estructurado el código. Para esto debes recordar que nesecitas un programa de texto y guardarlo en ".css" para luego introducir nuestro código HTML.
Además recuerda que el ";" (punto y coma) se utiliza para finalizar una etiqueta o instrucción. También el usar las { } (Llaves) para poder colocar las etiquetas. Al finalizar crear el código HTML colocando el estilo de la imagen que será el CSS y así poder ver el resultado del Efecto Circular.
Analiza cada una de las intrucciones para poder ver el resultado, los identificadores no deben tener ningún número al principio ni ninguna "ñ" eñe.
Aquí tenemos el Código completo, describiré sus etiquetas y sus variables, con su fisiología.
CSS
/* Efecto Circular con Css*/
.imagen {
width: 200px;
height: 200px;
margin: 2px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
}
/* Creado por www.Davixm.es.tl*/
Describcion
.imagen : //Es el nombre del identificador de la variablewidth: 200px; //Indica el ancho de la "imagen" en este caso porque es un estilo de imagen
height: 200px; //Indica la longitud de Arriba hacia Abajo
margin: 2; //Indica el margen de la imagen
border-radius: 100px; //Sirve para dar un efecto redondeado a los bordes
-moz-border-radius: 100px; //Esta linea hace que todos los bordes del div sean redondos
-webkit-border-radius: 100px; //Esta linea hace que el borde izquierdo-arriba sea redondos
-khtml-border-radius: 100px; //Esta linea hace que el borde izquierdo-arriba sea redondos
Código Completo
HTML
<img class="imagen" title="TITULO" alt="TEXTO-ALTERNATIVO" src="URL DE IMAGEN" />