0 FPS

CSS3 : Efecto bola expandible

04 de Noviembre del 2011 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : HTML, CSS, Programación.

La web está en segundo plano, animación en pausa.

Cargando animación...

Hoy para no repetirme mucho con el tema del canvas os voy a mostrar cómo he creado el efecto de la bola expandible que podéis ver en la parte superior del menú de la derecha con los iconos del facebook, twitter, google plus y rss.

Este efecto se ha hecho únicamente utilizando CSS3 sin necesidad de JQuery ni JavaScript, pero por esa razón no funciona en explorer. Como ya he comentado en más de una ocasión me niego a torturarme haciendo código que funcione en explorer, cuando en otros navegadores funciona perfectamente sin necesidad de romperse mucho la cabeza.

Si los desarrolladores web le dieran la espalda directamente al explorer en vez de adaptar sus códigos exclusivamente para él, estoy convencido de que o los usuarios de explorer abrirían los ojos, o que los de microsoft se pondrían las pilas. Parece mentira que llevemos más de 10 años con este tipo de peleas.

Dejando a un lado mi pique personal con el navegador de microsoft, vamos a ver que necesitamos para crear el efecto de la bola expandible.

En primer lugar necesitamos un contenedor para cada bola, y un contenedor para el texto de cada bola. Veamos como quedaría el código HTML :

Código HTML

<div class='Bola_Expandible' style='background-color:red;'>
    <div class='Bola_Expandible_Texto'>Rojo</div>
</div>
<div class='Bola_Expandible' style='background-color:green;'>
    <div class='Bola_Expandible_Texto'>Verde</div>
</div>
<div class='Bola_Expandible' style='background-color:blue;'>
    <div class='Bola_Expandible_Texto'>Azul</div>
</div>

Este ejemplo está preparado para contener 3 bolas expandibles. En esencia tenemos 3 divs que utilizan la clase Bola_Expandible en la que se pintara la bola. Dentro de los div Bola_Expandible tenemos otro div que utiliza la clase Bola_Expandible_Texto donde podemos introducir el texto que necesitemos y que quedara por encima de la bola.

Una vez tenemos claro el código HTML pasemos a ver una parte del estilo CSS para la clase Bola_Expandible :

CSS Bola_Expandible

.Bola_Expandible {
    width:40px;
    height:40px;
    position:relative;
    border-radius:20px;
    box-shadow:2px 2px 2px #999;
    margin:4px;
    -webkit-transition-property:width;
    -webkit-transition-duration:0.3s;    
    -moz-transition-property:width;
    -moz-transition-duration:0.3s;    
    -o-transition-property:width;
    -o-transition-duration:0.3s;    
}

.Bola_Expandible:hover {
    -webkit-transition-property:width;
    -webkit-transition-duration:0.3s;    
    -moz-transition-property:width;
    -moz-transition-duration:0.3s;    
    -o-transition-property:width;
    -o-transition-duration:0.3s;    
    width:100px;
}

Lo más importante de esta parte es que la clase Bola_Expandible tiene el atributo position en relative, que tiene 40 pixeles de ancho y alto asignados en los atributos width y height, y que el efecto de transición solo se aplica al atributo width con una duración de 0.3 segundos.

En la parte del hover podemos observar que el atributo width tiene 100 pixeles, por lo que la animación ira de 40 pixeles a 100 pixeles y viceversa.

Ahora veamos la segunda parte de la clase Bola_Expandible que se aplica a la clase Bola_Expandible_Texto :

CSS Bola_Expandible_Texto

.Bola_Expandible .Bola_Expandible_Texto {
    -webkit-transition-property:color, text-shadow;
    -webkit-transition-duration:0.3s, 0.3s;    
    -moz-transition-property:color, text-shadow;
    -moz-transition-duration:0.3s, 0.3s;    
    -o-transition-property:color, text-shadow;
    -o-transition-duration:0.3s, 0.3s;    
    color:#000;
    text-shadow:1px 1px 1px #AAA;
}

.Bola_Expandible:hover .Bola_Expandible_Texto {
    -webkit-transition-property:color, text-shadow;
    -webkit-transition-duration:0.3s, 0.3s;    
    -moz-transition-property:color, text-shadow;
    -moz-transition-duration:0.3s, 0.3s;    
    -o-transition-property:color, text-shadow;
    -o-transition-duration:0.3s, 0.3s;    
    color:#FFF;
    text-shadow:1px 1px 1px #000;
}

Cuando la clase Bola_Expandible este en estado normal, dentro de la clase Bola_Expandible_Texto el color del texto será negro, y la sombra será de un color gris. En cambio cuando la clase Bola_Expandible este en estado hover, dentro de la clase Bola_Expandible_Texto el color del texto será blanco, y la sombra será negra. A esto le añadimos el atributo transition para los 3 navegadores que lo soportan indicando los atributos color y text-shadow..

Por último nos falta echar un vistazo a la clase Bola_Expandible_Texto por defecto :

CSS Bola_Expandible_Texto

.Bola_Expandible_Texto {     
    padding-top:11px;
    padding-bottom:11px;
    padding-left:50px;
    font-size:14px;
}

No hay gran cosa que destacar, simplemente le asignamos un tamaño de fuente, ponemos un padding adecuado para el top y el bottom, y 40 pixeles de padding en el left, para que el texto inicialmente salga fuera de la bola.

Y con esto terminamos por hoy, como siempre podéis ver el ejemplo online simplificado, o descargarlo. Buen fin de semana.

Ver ejemplo Descargar ejemplo

Usuario
Password