DaviXM 3.0

Noticias

En la sección +D Periódico.

Tweets:

Visitantes Web:

País: us
Code: us
Hits: 101125
Total: 42078

+D

Imagen Redonda con Css3

Es una des... desouesEste 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 variable
width: 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" />
=> ¿Desea una página web gratis? Pues, haz clic aquí! <=