domingo, 5 de mayo de 2013

Tutorial: Efecto "Glow" en links.

Holis :3

Hoy os traigo un efecto precioso en los links, que, como podéis ver, está puesto actualmente en el blog. Este es un ejemplo (pasad el ratón por encima para ver el efecto):




Vamos a Plantilla > Editar HTML.


Ahora, buscamos una parte al principio de nuestro código llamada <b:skin> y pulsamos la flechita negra que os marco en la imagen:



Después de pulsar la flechita, le damos a CTRL + F y en el buscados ponemos ]]></b:skin>.
Le damos a enter y ENCIMA de ]]></b:skin> ponemos este código:


a{
 -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}
 a:hover{
 color: #00adbc;
      text-shadow: 0px 0px 12px #00adbc;
}

Editamos lo marcado:
Azul: el color del link al pasar el ratón por encima.
Rojo: el color de la sombra del texto.

Nota: AQUÍ tenéis los colores más frecuentes.

Quedaría así.


Le damos a Guardar plantilla y listo. Ya tenemos el efecto en los links :3

Alguna duda decirla en los comentarios :)

¡Un beso!



No hay comentarios:

Publicar un comentario