Image Map

jueves, 30 de mayo de 2013

Efectos en links: Múltiple.

Holis :3

Hoy os voy a enseñar como poner un efecto en los links como en la plantilla que os mostramos. Este efecto queda precioso en links. PREVIEW.



1. Vamos a Plantilla.



2. Editar HTML.



3. Le damos a la flechita que os muestro en la imagen.




4. Le dais a Plantilla de formato y seguidamente a CTRL + F. En el buscador que aparecerá en la parte superior derecha de nuestro código ponemos ]]></b:skin>.

Encima de ]]></b:skin> colocamos este código:


a{
letter-spacing:2px;
-webkit-transition-duration: .50s;
text-shadow:1px #fff;
}
a:hover {
color:#000;
text-shadow: 2px 7px 1px #b8d935, 
               -10px 1px 1px #fc5d77,
               4px -7px 1px #5dcdfc;
-webkit-transition-duration: .50s;
}

Y editamos a nuestro gusto:

color:#000; >> COLOR DEL LINK AL PASAR EL CURSOR.
text-shadow: 2px 7px 1px #b8d935, >> COLOR SUPERIOR.
 -10px 1px 1px #fc5d77, >> COLOR CENTRAL.
  4px -7px 1px #5dcdfc; >> COLOR INFERIOR.

Recordad que AQUÍ podéis elegir los colores.



Créditos por el tip: Melo.




4 comentarios:

  1. Me gusta como se ve el efecto n.n
    Besos!

    ResponderEliminar
  2. De todos los blogs con tutoriales, este es el único con el que me entero bien. Gracias por poner las imagenes, así es todo más claro ^^ Os merecéis mi follow

    ResponderEliminar
    Respuestas
    1. ¡Muchísimas gracias! Intentamos que los tutoriales sean lo más claros posibles :3
      Un beso <3

      Eliminar