Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Dale estilo a tus enlaces con CSS

Las etiquetas de anclaje (también conocidas como enlaces o hipervínculos) (estas cosas: <a>) son uno de los elementos más ubicuos del mundo web. De hecho, son las etiquetas de anclaje las que colocan la 'Web' en la World Wide Web: son los puntos de interconectividad, como los hilos en una telaraña, que mantienen unida a toda nuestra loca Red.
Y todos sabemos también cómo se ven los enlaces: son de color azul oscuro, subrayados y se destacan en una página como las venas varicosas en la parte posterior de las piernas de la tía abuela Esther. Y así como no entendemos por qué Esther elegiría usar esos pantalones cortos en público, no entendemos por qué algo tan común como una etiqueta de anclaje debería tener un aspecto tan poco atractivo.
Con CSS, los enlaces no tienen que ser feos.
Pero aquí está el truco: con CSS, los enlaces no tienen que ser feos. Pueden verse más o menos como quieras. Estas son algunas de las cosas que puede hacer para que sus enlaces se destaquen sin sobresalir:
Cambia el color. Algunos defensores de la web que se pegan en el barro te harían creer que el azul es el único color que debe usar un hipervínculo, de la misma manera que los zapatos blancos después del Día del Trabajo son una imitación social. Su argumento es que las personas están acostumbradas a ver enlaces azules subrayados; meterse con esta convención es enojar a los dioses y confundir a sus lectores. Yo digo bollocks! Cualquier texto que se destaque del resto llamará la atención. Y el verde puede destacarse tan bien como el azul:
una { 
 color: # 6c6; 
}
Esto nos da un enlace encantador del tono exacto de un duende mareado. ¿Cómo es eso de fantasía?
Subrayado, Schmunderline. Personalmente, no soy un gran admirador del texto subrayado. Demasiado puede ser una distracción: todo en la página parece estar pidiendo atención. Entonces, ¿por qué no eliminamos el subrayado de ese hipervínculo?
una { 
 decoración de texto: ninguno; 
}
Y ahora, nuestros enlaces no abruman el texto cercano.
O incluso podría hacer que el subrayado solo aparezca cuando alguien coloca el mouse sobre el enlace (mi favorito personal):
una { 
 decoración de texto: ninguno; 
}
a: desplazarse { 
 decoración de texto: subrayado; 
}
Las reglas anteriores establecen que las etiquetas de anclaje "normales" no deben tener ningún tipo de decoración: en otras palabras, sin subrayados. Sin embargo, cuando alguien "se cierne" sobre un ancla, debemos volver a poner el subrayado.
La imagen lo es todo. Si quisiera ser realmente elegante, incluso podría hacer que una pequeña imagen (un icono, si lo desea) aparezca junto a sus enlaces. Todo lo que tiene que hacer es crear su imagen en el tamaño apropiado, ponerla en su servidor donde su CSS pueda acceder y hacer algo como esto:
una { 
 relleno-izquierda: 16px;
 background-image: url (icon.gif) sin repetición; 
}
Esta regla es un poco más complicada, así que lo explicaré con mayor detalle. Primero, aplicamos algo de relleno a la etiqueta de anclaje ... necesitamos algo de espacio para que aparezca la imagen. Luego, aplicamos la imagen al fondo del elemento (que, como aprendimos la última vez, se aplica al relleno alrededor de un elemento). En circunstancias normales, el fondo se repetiría en todas las direcciones, apareciendo debajo de nuestro texto de enlace. No queremos eso, así que agregamos la condición de 'no repetir' para evitar que aparezca más de una vez. Y el resultado: enlaces con imágenes .
Poniendolo todo junto. Cuando nuestros poderes se combinan, nos convertimos en ... ¡Capitán Hipervínculo! O, al menos, podemos tener enlaces estéticamente agradables que de alguna manera logran atraer la atención sin abrumar la página. Y sin recordarnos la visita de la tía abuela Esther el verano pasado.
Si tomamos lo que sabemos sobre las clases CSS y lo aplicamos a este ejemplo, incluso podríamos hacer que ciertos tipos de enlaces se vean diferentes de otros:
a.pdf {
 color: # c00;
 peso de fuente: negrita;
 decoración de texto: ninguno;
 relleno-izquierda: 10px;
 background-image: url (pdf_icon.gif) sin repetición;
}
a.pdf: hover {
 decoración de texto: subrayado;
}
Ahora, ¿cómo es eso para un enlace elegante? Te animo a que tomes estos ejemplos que he proporcionado y los amplíes. ¿Qué puede hacer que hagan sus enlaces?

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas