El Blog de Alicia Pac

Haz tus enlaces del blog más llamativos

Hoy mientras toquineaba un poco la plantilla de Mundo Forward, se me ha ocurrido cambiar un poco el colorido de los enlaces, para que resaltaran un poco más, ya que la plantilla es bastante oscura. Pues bien, podemos hacer varias cosas, pero antes de nada hay que localizar en la hoja de estilos (estilos.css)la parte que nos habla de los enlaces, son:

a:link
text-decoration: underline
color: #6F9300

a:active
text-decoration: underline
color: #6F9300

a:visited
text-decoration: underline
color: #6F9300


a:hover
text-decoration: underline
color: #6F9300

• Link: Vista del Enlace
• Active: Al momento de hacerles click
• Visited: Enlace ya visitado
• Hover: Vista del Enlace cuando ponemos encima el cursor

El ejemplo de arriba, lo único que nombra es el color de los distintos tipos de los enlaces y que el enlace esté subrayado. Pero podemos querer hacer más cosas con ellos:

• Poner un color de fondo en el enlace

Por ejemplo cuando pongamos el cursor encima. Solo tendremos que añadir el siguiente código al color que más nos guste:

a:hover
text-decoration: none
background-color: #fff
color: #6F9300

• Que el enlace en vez de aparacer Subrayado, aparezca de otras formas:

Habrá que insertar las siguientes lineas de código como en los ejemplos anteriores

1. El Subrayado encima del texto: text-decoration: overline;
2. El Subrayado en medio del texto, como tachado: text-decoration: line-through
3. El Enlace parpadee: text-decoration: blink
4. Ningún tipo de decoración. como si fuera texto normal: text-decoration: none;

Quedaría así: underline (subrayado), overline (línea superior), line-through (tachado), blink (parpadeo), o none (ninguna).

• Si queremos que aparezca como un boton, pudiendo modificar los cuatro lados de la caja que los enmarca:

Lo primero le añadiriamos text-decoration: none (para que no decore nuestro enlace), y luego añadiriamos el siguiente código o códigos, cada uno con 3 características ( color, tamaño, tipo de raya)

Borde Superior: border-top: #00000 3px dashed;
Borde Derecho: border-right: #00000 5px double;
Borde Inferior: border-bottom: #00000 5px dotted;
Borde Izquierdo: border-left: #00000 3px solid;

Esto es un párrafo si insertaramos los cuatro códigos

Por tanto podeís añadir los 4 a la vez o cada uno por separado o varios a la vez, como os guste. En el ejemplo vereís lo que significa cada grosor: dashed, double, dotted, solid.

Y por hoy se acabo, espero que os sea de utilidad¡ ;)

Escrito por Alicia at miércoles, marzo 15, 2006