Animar viñetas al pasar el mouse en Blogger

En esta oportunidad veremos la forma de animar las viñetas del blog al pasar el cursor sobre ellas. Para esto, usaremos la pseudo-clase ":hover", la que permite aplicar atributos a un selector destacado con el mouse. Además, haremos uso de las transiciones con CSS3 para darles esa animación suave.

Esta técnica la utilizo en las viñetas de la sidebar, las cuales se ven de la siguiente forma (Sitúa el cursor sobre algún enlace para comprobar el efecto):

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

El tutorial:

Para los que quieren aplicar inmediatamente el efecto pueden ir al final del tutorial en donde dejo el código fuente, pero para los que quieran leer el tutorial y comprender un poco más sobre cómo trabaja pueden leer los Pasos 1 y 2.

Paso 1: Los atributos básicos:

Lo primero que debemos hacer, es entender qué viñetas deseamos animar, haremos un ejemplo claro con las viñetas de la sidebar (La class de la sidebar es ".sidebar" sin los apóstrofes). Recuerda que las viñetas se determinan con la etiqueta </li> dentro de una </ul>, por lo que procederemos a asignar los valores iniciales:

.sidebar ul {
/* acá irán los primeros atributos del conjunto de viñetas */
}
.sidebar li {
/* acá irán los primeros atributos de cada viñeta */
}

Para que este efecto sea bastante llamativo, lo que haremos será asignar los siguientes valores iniciales, con los que "resetearemos" los estilos (Están descritos con un comentario para entender cada función):

.sidebar ul {
margin:0; /*Eliminamos los márgenes al conjunto de viñetas*/
padding:0; /*Suprimimos el espaciado interior para evitar que los elementos se separen del contenedor*/
list-style:none; /*Este código permite eliminar el ícono de las viñetas*/
}
.sidebar li {
padding:5px; /*Permite definir el espaciado de cada viñeta */
list-style: none; /*Este código permite eliminar el ícono de las viñetas*/
}

De momento, éstos se verán de la siguiente forma:

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4

Recuerda que ningún efecto se verá ya que no hemos tocado aún la pseudo-clase.

 Paso 2: Animando los enlaces al situar el mouse:

Ahora, para editar los enlaces haremos cambios a la etiqueta </a>, que se encuentran dentro de la etiqueta </li>, entonces empezaremos a aplicar los atributos de la siguiente forma:

.sidebar li a {
/*Acá irán los atributos de cada enlace*/
}

.sidebar li a:hover {
/*Atributos de cada enlace destacado con el cursor del mouse*/
}

Recordemos que en el post de transiciones CSS3, el atributo para animar las transiciones era el siguiente:

-moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;transition: 0.3s;

Entonces entendido esto, procederemos a aplicarlo a los enlaces (NO a los enlaces con la pseudo-class):

.sidebar li a {
-moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;transition: 0.3s;
}
.sidebar li a:hover {
}

Listo, ahora podrás optar por los atributos que desees iniciar la animación, éstos deberás añadirlos en el selector con la pseudo-class, puedes jugar con los colores, fondos, márgenes, espaciados, o cualquier atributo que desees que se muestre animado.

Importante:

Para que tus viñetas estén de la misma forma que la del ejemplo, puedes tomar el siguiente código ya elaborado y pegarlo antes de  "]]></b:skin>", o bien puedes usarlo como ejemplo para crear tus propias transiciones:

.sidebar ul {
margin:0;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size:11px;
padding:0;
list-style:none;
}

.sidebar li {
padding:5px;
list-style: none;
}

.sidebar li a {
border-radius:6px;
-moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;transition: 0.3s;
padding:5px;
color:#777;
}

.sidebar li a:hover {
background:#666;
color:#d9d9d9;
margin-left:10px;
}