Círculos con CSS3 y efecto hover

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Círculos con CSS3 y efecto hover

Siguiendo con los tutoriales sencillos pero divertidos de CSS3 para animar aquellos que temen un poco al código, continuamos con los círculos y los efectos que podemos agregar para hacerlos más atractivos. Basado en el mismo principio de nuestro tutorial circulo con CSS3, agregaremos algún condigo adicional y crearemos el efecto hover que se trata de hacer cambiar de color el objeto cuando se coloque el mouse sobre él. Es el mismo efecto que tienen en muchos sitios cuando colocamos el mouse sobre los enlaces y vemos que este cambia, sin embargo el método será diferente y mucho más fácil. Tendremos nuestro mismo círculo color verde y cuando coloquemos el cursor sobre él este cambiara a color verde claro. Veamos cómo.

Como ya dije es el mismo principio del tutorial anterior pero igual vamos a repasarlo. Creamos nuestro DIV en nuestro HTML y le agregamos un ID llamado ‘circulo’.

<html>
<div id="circulo"></div>
</html>

Ahora para crear el efecto de círculo vamos al CSS, agregamos ancho y alto con los efectos de radio compatibles con todos los navegadores.

#circulo { 
   width: 140px;   
   height: 140px;
   background:#008040; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

Ahora bien, si queremos podemos copiar todo el CSS que hemos escrito y pegamos debajo del código existente y luego modificamos dos líneas para lograr nuestro efecto.

A ‘#circulo’ le agregamos dos puntos y la palabra hover de esta forma:

#circulo:hover {

Y cambiamos el color de background para que el círculo se vea de otro color al pasar el mouse de esta forma.

background:#00FF99;

El código CSS completo debería ser así:

#circulo:hover { 
   width: 140px;
   height: 140px;
   background:#00FF99; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

Es todo, debajo pueden ver el ejemplo online y descargar el código si desean, ¡espero sea de utilidad!

Etiquetas:

Trackback desde tu sitio.

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs