Crear una caja para el gadget de las etiquetas y agregar efecto fade usando transiciones
Bueno, pues hoy les mostraré, como crear, una cajita contenedora para el gadget de las etiquetas, sin tocar la edición de HTML de su plantilla, y agregaremos un efecto fade o de desvanecimiento, en el color de fondo de cada etiqueta, en el hover (al poner el puntero del ratón encima), para que el cambio de color, se vea suave y coquetón, y lo lograremos en 3 pasos.
El efecto fade o de desvanecimiento, del color de fondo, lo logramos con transiciones, que funcionan perfectamente en navegadores modernos, pero no en Internet Explorer, sin embargo, si se apreciará el cambio de color en ese navegador, pero sin el efecto fade.
Pueden leer sobre las transiciones, en esta página de Mozilla en español.
¡Me encanta este efecto!, se puede conseguir fácilmente, se ve muy mono, y además no utiliza ningún script, ni librería externa, ¡que maravilla!, lástima que en Internet Explorer no fucione, pero bueno, ya sabemos como es ese navegador, ¡que le vamos a hacer!.
Bueno, sin más rollos, veamos como lograrlo:
Instrucciones paso a paso…
Paso 1: Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS, y ahí en el campo, para añadir CSS personalizado, agregamos el siguinte código:
Actualización, 04/07/2011: Edité el CSS, eliminando una lineas inecesarias, aunque no afectaban, si reduce el número de lineas de código :). Ve esta entrada, en donde puedes ver, como hacer para que la etiqueta seleccionada siempre sea enlace y se mantenga los estilos.
/*ESTILOS DE LOS ENLACES DE LAS ETIQUETAS*/
#Label1 { /*la caja contenedora de las etiquetas*/
margin: 0;
padding:0;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
background-color:#ffebfe;/*el color de la caja o contenedor*/
}
#Label1 h2 {
padding:10px 5px;
margin:0;
border-bottom: 1px solid #ffffff;
}
#Label1 ul {
margin:0;
padding:0;
}
#Label1 ul li {
margin: 0;
padding: 0;
list-style: none;
background: none;
border: none; /*importante en las nuevas plantillas*/
color: #232323; /*el color de texto*/
}
#Label1 ul li a { /*los bloques de cada enlace*/
display: block; /*creamos el bloque*/
width:330px; /*el ancho del bloque, tendrás que ajustarlo*/
font-size: 19px;/*el tamaño de la fuente o letra*/
color:#2d0d01;/*el color de la fuente del enlace*/
padding:10px 0 10px 8px;/* para ampliar el bloque*/
margin:0;/* para separar cada bloque*/
text-decoration: none;
text-align: left;
background-color: #fde893;/*el color de fondo*/
transition: all 1.0s linear;
-o-transition: all 1.0s linear;
-moz-transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
border-bottom: 1px solid #ffffff; /*borde abajo para cerrar la caja*/
}
#Label1 ul li a:hover {/*el efecto hover*/
color: #000000; /*el color de la fuente*/
font-weight: normal;
background-color: #f9a6f4;/*el color de fondo*/
}
Paso 2: Ahí mismo veremos los cambios en la plantilla, recuerda dar enter, después de una llave de cierre }, para que se interprete el código, luego, edita el ancho de el bloque que viene como 330px, para que cuadre la cajita, y si vas a cambiar la apariencia, edita los colores de fondo, borde y fuente a tu gusto.
Puedes consultar esta tabla de colores.
Paso 3: Guarda los cambios, haciendo click en APLICAR AL BLOG, y listo!.
Nota: ahí en el código, vienen las notas, entre /*…*/, para que puedas personalizar o saber que hace cada cosa; los valores del margen, como el padding, se leen: arriba, derecha, abajo, izquierda.
IMPORTANTE:
-Edita el gadget de las etiquetas, para que no muestre el número de etiquetas, en donde dice:
-Si quieres aplicar esto a un segundo gadget de etiquetas, entonces en lugar de #Label1 usarás #Label2, y tienes que cambiarlo en todo el código, mucho ojo con eso, Blogger los vá nuemerando, en order progresivamente.
-Tienes que ajustar el ancho del bloque, que viene con un valor de 330px, según el ancho de el lugar donde lo pongas, por ejemplo el de la columna lateral, me refiero a esta parte:
#Label1 ul li a {
...
width: 330px;
...
{
…y ¿cómo cambiar los bordes?Si quieres cambiar los bordes de la caja, necesitas saber que:
El borde de #Label1 h2 es el borde debajo del título del gadget.
Los bordes que están en #Label1 : son los bordes de la caja contenedora.
...en #Label1 ul li a, son los bordes de los bloques que creamos, para cada enlace de la etiqueta.
Los bordes se leen así:
border-top: 1px solid #ffffff; /*borde arriba*/
border-left: 1px solid #ffffff; /*borde a la izquierda*/
border-right: 1px solid #ffffff; /*borde a la derecha*/
border-bottom: 1px solid #ffffff; /*borde de abajo*/
En donde:
1px, es el grosor del borde.
solid, es el tipo de borde, puedes usar: dotted (lineas punteadas), o dashed (lineas separadas).
#ffffff, es el color del borde.
...y ¿la DEMO?
Puedes verlo en acción en este Blog, con el título de Categorías.
Recuerda: Esta caja se va a ver igual en todos los navegadores, simplemente, el efecto fade o de desvanecimiento del cambio de color, al poner el puntero encima de cada bloque con el enlace, no se verá en Internet Explorer, pero si el cambio de color.
La fuente que se muestra en los enlaces, es la que tiene la plantilla del DEMO, si usas las nuevas plantillas, o las plantillas que tiene las variables, para las fuentes, y quieres que la fuente del título del gadget, se vea igual, agrega esto en #Label1 h2..
font: $(body.font);
font-size: 19px; /*el tamaño de la fuente*/
line-height: 200%; /*para mover el titulo verticalmente*/
Si tienes dudas o inquietudes no dudes en decírmelo, prometo no morder...
.Otras referencias de las transiciones:
Sexy interacción con transiciones
Etiquetas:CSS,trucos,Tutoriales