Blog

Colocar borde de color a un texto HTML + CSS

Temas de Programación Web

Colocar un borde de color diferente a un texto puede ser útil para dar contraste entre las letras de una página y un fondo claro y oscuro. A veces un fondo puede tener zonas muy claras y zonas muy oscuras, así que nos cuesta seleccionar un color adecuado, ya que, si lo colocamos claro, el texto perdería contraste en las zonas claras y de imagen de fondo, y si seleccionamos un texto oscuro, entonces el texto se perdería de vista en las zonas más oscuras, veamos el siguiente ejemplo.

Texto oscuro sobre fondo claro-oscuro
Ejemplo de texto oscuro sobre fondo claro-oscuro

Nota en la imagen que el texto se pierde un poco por el borde gris oscuro de la pantalla. Si agregamos un borde que haga contraste) (por ejemplo blanco), al texto veamos como aumenta su legibilidad.

Pantalla de ejemplo de contraste entre letras y borde, colocar borde a un texto
Ejemplo de pantalla de ejemplo de contraste entre letras y borde

En el caso del ejemplo el borde de las letras es de menos de un pixel, pero el efecto es dramático, el borde hace el suficiente contraste para hacer legible el texto.

¿Cómo hacerlo con HTML y CSS?

Vamos a suponer que el texto HTML es un Título H2

<h2 class="texto-borde-blanco">¿Qué es Xigmad?</h2>

Vamos a usar dos propiedades CSS

  • -webkit-text-stroke que hará que le podamos definir un borde al texto de un grosor específico y un color del borde que elijamos (esta no es una propiedad estándar de CSS).
  • color que va a determinar el color del texto.

En conjunto la propiedad sería así

.texto-borde-blanco {
    -webkit-text-stroke: 0.7px white;
    color: #197462;
}

Antes para conseguir este efecto teníamos que usar una imagen y algún programa de creación y edición tipo Inkscape o Gimp e insertarlo como una imagen en el documento, pero esto afecta bastante el posicionamiento de la página, en especial porque el título es una de las etiquetas más importantes dentro del contenido de la página.

Colocar borde de color a un texto puede ser útil también para darle legibilidad a una letra clara y que se visualice correctamente sobre cualquier fondo, ver el logo de nogulemo.com. ¿Funciona la letra amarilla sobre fondo blanco?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *