Conceptos básicos de CSS: diseñar enlaces como un jefe | Programar Plus

La web se basa en enlaces. La idea de que podemos hacer clic / tocar un enlace y navegar de una página web a otra es cómo navegar por la web se convierte en una frase familiar.

Los enlaces en HTML incluso se ven diferentes del texto normal sin ningún estilo CSS.

Son azules (violetas si se visitan). Están subrayados. Ese es un enlace en su forma más pura.

Pero, ¿y si queremos cambiar un poco las cosas? Quizás el azul no funcione con el diseño de su sitio web. Quizás tengas aversión a los subrayados. Cualquiera sea la razón, CSS nos permite diseñar enlaces como cualquier otro elemento. Todo lo que tenemos que hacer es apuntar al elemento en nuestra hoja de estilo.

¿Quiere usar una fuente diferente, cambiar el color, quitar el subrayado y ponerlo todo en mayúsculas? ¿Seguro Por qué no?

a {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}

¡Ahora estamos cocinando con gas! Pero, ¿por qué detenerse ahí? Veamos algunas otras formas en que podemos diseñar enlaces para completar la experiencia.

Aplicar estilo a cada estado de enlace

Los enlaces tienen diferentes estados, lo que significa que se adaptan cuando interactuamos con ellos en una página web. Hay tres estados adicionales de un enlace que vale la pena considerar cada vez que cambiamos el estilo predeterminado de los enlaces:

Tenga en cuenta que el orden allí es importante:

  1. Enlace
  2. Visitó
  3. Flotar
  4. Activo
  5. Enfocar

Si no lo hace en este orden (imagine, digamos, su :visited el estilo viene después de tu :hover estilo) los enlaces no se comportarán como usted desea. En mi ejemplo imaginario, el :visited el estilo anularía el :hover estilo, que es muy poco probable que sea lo que desea. El enfoque es una característica de accesibilidad, por lo tanto, dura porque es más importante.

Una forma de recordar el pedido. es AMOR y ODIO. eso es L (tinta) OV (isted) E / H (over) A (Active) TE.

Aquí está el mismo enlace que hemos estado viendo. Primero, intente colocar el mouse sobre él sin hacer clic y observe que está subrayado. Luego, haga clic en el enlace, pero deje el botón del mouse presionado un poco para ver cómo el estilo activo cambia el color del enlace a negro. Finalmente, suelte el botón del mouse y el enlace debería volverse violeta antes de que sea técnicamente visitado.

Los enlaces parecen un concepto simple, pero tienen mucho en juego, ¡y CSS nos da un poder increíble para personalizar la experiencia!

Enlaces como botones

Si bien existe cierto debate al respecto, podemos usar CSS para hacer que un enlace de texto parezca un botón.

Al igual que otros elementos HTML, CSS puede agregar colores de fondo y relleno a los enlaces que nos permiten crear la apariencia de un botón. Aquí está nuestro enlace usando esas técnicas:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

¡Estupendo! Ahora, usemos los poderes de alteración de estado que aprendimos en la última sección para hacer que nuestro botón falso sea más interactivo. Haremos que el botón sea gris oscuro al pasar el mouse, negro al activo y gris claro en la visita:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover {
  background-color: #555;
}

a:active {
  background-color: black;
}

a:visited {
  background-color: #ccc;
}

Diseñar un enlace como un botón y aprovechar los estados nos permite crear algunos efectos geniales. Por ejemplo, creemos un botón con cierta profundidad que parece que se presiona cuando está activo y que vuelve a aparecer cuando se hace clic.

¡Oh, y cursores!

Hemos profundizado bastante en los enlaces de estilo, pero hay un componente más que no podemos ignorar: el cursor.

El cursor indica la posición del mouse en la pantalla. Estamos bastante acostumbrados a la flecha negra estándar:

La flecha estándar del cursor del mouse

Podemos cambiar la flecha a un puntero de mano en su desplazamiento (:hover) para que sea más fácil ver que el enlace indica que es un elemento interactivo:

Utilizando cursor:
pointer;
proporciona una pista interactiva.

a:hover {
  cursor: pointer;
}

¡Vaya, eso es mucho mejor! Ahora, tenemos un enlace bastante elegante que parece un botón con las señales interactivas adecuadas.

Subir de nivel

Hemos cubierto bastante terreno aquí, pero simplemente rasca la superficie de cómo podemos controlar el estilo de los enlaces. Si estás listo para subir de nivel, aquí tienes algunos recursos a los que puedes acceder desde aquí: