Botones animados con sombras (jQuery)

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Los plugins jQuery son recursos cada vez más utilizados por webmasters para realizar efectos en sus webs sin necesidad de “programar nuevo código desde cero”.

En estos plugins para realizar efectos, lo principal que se busca, es que sean livianos y lo más sencillos de implementar posible. Este es el caso de Shadow animation que cumple ambos requisitos ya que apenas ocupa 4.5 kb en su versión extendida y de 2.3kb en su versión comprimida además le poedemos sacar un gran partido para animar cualquier elemento de nuestra web añadiendo un bonito efecto de sombra.

Shadow animation

Demostración

Shadow animation hace uso de la propiedad de CSS Shadow jugando con la posición y el color, consiguiendo el efecto de animar el elemento seleccionado. De una forma sencilla y sin recargar la página (sería muy común utilizar elementos Flash, por ejemplo, para conseguir el efecto en botones).

El plugin está pensado para dar respuesta según determinadas acciones que se realicen sobre ellos, por ejemplo: al situal el ratón encima del elemento o hacer click dentro de el.

Ejemplo de utilización:

$('#box1').animate({boxShadow: '0 0 30px #44f'});

Nota: el plugin funciona perfectamente en las versiones más recientes de los navegadores: Firefox, Safari, Chrome e Internet Explorer 9.

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.