Ver Mensaje Individual
  #3 (permalink)  
Antiguo 15/07/2014, 18:41
Triby2
 
Fecha de Ingreso: julio-2014
Mensajes: 334
Antigüedad: 9 años, 9 meses
Puntos: 30
Respuesta: Galeria de Iconos

Cita:
Iniciado por grojaspineda Ver Mensaje
Hola,

Quería saber si han visto por la web, alguna galería de iconos, la cosa es que estoy tratando de hace una especie de circulo con los iconos donde solo se vea la mitad como en forma de semi-luna, entonce cuando el usuario pase el mouse, este se va moviendo.

Igual es es la primera idea que tenia, pero si alguno encontró alguna otra, seria de gran ayuda si me la compartieran.
Sería menos tedioso para la carga de la web que para cosas así utilizes CSS.

Ejemplo:

En el body de tu html pones
Código HTML:
Ver original
  1. <div id="semi_circulo"></div>

y entre <head></head> escribe el estilo:

Código HTML:
Ver original
  1. .semi_circulo {
  2.     background-color: blue;
  3.     height: 50px;
  4.     width: 25px;
  5.     border-radius: 0 75px 75px 0;
  6.         transition-duration: 0.3s;
  7. }

El resultado será un semi circulo de color azul.

Si quieres que se vaya moviendo cuando pases el ratón por encima tienes que escribir otro estilo que se llame igual pero terminado en ":hover" y ahí ponerle lo que quieras cuando pases el ratón por encima.

Añade entre <style></style> lo siguiente:
Código CSS:
Ver original
  1. .semi_circulo:hover {
  2.     background-color: red;
  3.     height: 75px;
  4.     width: 50px;
  5.     border-radius: 0 75px 75px 0;
  6.         transition-duration: 0.3s;
  7. }

En este ejemplo solo cambia el tamaño y color de manera animada. Pruébalo y me dices si te gusta de esa manera en vez de utilizar imágenes para dibujos sencillos.