Explorando la Categoría: "Css"
Muchas veces he visto un efecto en páginas web en las que ponian sus enlaces con un subrayado hecho a lápiz como este.
Pues esta tarde lo he vuelto a ver y me ha entrado curiosidad por saber como lo hacen, así que he inspeccionado el código con firebug y la verdad es que no es muy complicado, simplemente poniendo este código css en el template de mi theme de wordpress obtengo este efecto:
-
-
background:transparent url(images/link.png) repeat-x scroll 100% bottom;
-
padding-bottom:3px;
-
text-decoration:none;
-
}
-
Con este código le estoy diciendo que le ponga a los enlaces una imagen de fondo link.png abajo y que la repita horizontalmente, le doy un poco de padding abajo , para que la imagen no se quede debajo del texto, y por ultimo le quitamos el subrayado que traen los enlaces por defecto con la regla “text-decoration:none”.
A partir de ahora mis los enlaces aparecerán con este efecto de subrayado tan original.
Por cierto la imagen de fondo es esta :
