ENLACES EN MOVIMIENTO CON EFECTOS
ENLACES EN MOVIMIENTO CON EFECTOS
"BLOGS FAMAG "
Ya sabemos que podemos personalizar los vínculos dándole atributos de color, decoración, fondo, etc.
Así que partiendo de la misma idea podemos ponerle a los enlaces líneas animadas que aparezcan cuando pasa el cursor encima de ellos.
Para que sepas de qué hablo pasa el cursor sobre los siguientes enlaces y mira el efecto:
Ya sabemos que podemos personalizar los vínculos dándole atributos de color, decoración, fondo, etc.
Así que partiendo de la misma idea podemos ponerle a los enlaces líneas animadas que aparezcan cuando pasa el cursor encima de ellos.
Para que sepas de qué hablo Fijate en los los siguientes enlaces y mira el efecto:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
-------
a:hover {
---------
Abajo de ella pega cualquiera de estos códigos:
Ejemplo 1
------------------------------------------------------------
text-decoration:none;
background:url(http://img233.imageshack.us/img233/5403/linearrow.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
------------------------------
Ejemplo 2
-------------------------------------------------------------------
text-decoration:none;
background:url(http://img694.imageshack.us/img694/2616/linearrow2.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
--------------------------------------
Ejemplo 3
-------------------------------------------------------
text-decoration:none;
background:url(http://img35.imageshack.us/img35/8056/linearrow3.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
-------------------------------------
Ejemplo 4
---------------------------------------------
text-decoration:none;
background:url(http://img35.imageshack.us/img35/1221/linepoints.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 5px;
--------------------------------------
Ejemplo 5
---------------------------------------------------------
text-decoration:none;
background:url(http://img233.imageshack.us/img233/1752/lineyellow.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
---------------------------------------------
Si sientes que la línea animada está muy encima del texto puedes modificar padding-bottom: 3px; por otro número, por ejemplo 5px
Así de simple puedes darle a tus enlaces un estilo diferente al pasar el mouse.
0 Comments