Ejemplo para añadir un contorno a un texto en CSS

Añadir un contorno a un texto puede realzar su apariencia y mejorar su legibilidad, especialmente en fondos complejos. En este artículo, te mostraremos cómo hacerlo de manera sencilla utilizando CSS.

¿Qué es el contorno de texto?

El contorno de texto se refiere a un borde que se aplica alrededor de las letras. Puede ayudar a que el texto destaque y sea más atractivo visualmente. Sin embargo, CSS no proporciona una propiedad directa para agregar un contorno a un texto, por lo que usaremos una combinación de propiedades para lograr el efecto deseado.

Método 1: Usar `text-shadow`

Una de las formas más comunes de crear un contorno es mediante la propiedad text-shadow. Esta propiedad se utiliza para añadir sombras al texto, pero también se puede manipular para simular un contorno. A continuación, te mostramos cómo hacerlo:

Ejemplo de código

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contorno de Texto con CSS</title>
    <style>
        .contorno {
            font-size: 48px;
            color: white; /* Color del texto */
            text-shadow: 
                -1px -1px 0 black,  
                1px -1px 0 black,
                -1px 1px 0 black,
                1px 1px 0 black; /* Color del contorno */
        }
    </style>
</head>
<body>
    <h1 class="contorno">Texto con Contorno</h1>
</body>
</html>

Explicación del código

font-size: Define el tamaño del texto.
color: Establece el color del texto. En este caso, se utiliza blanco.
text-shadow: Aquí es donde se crea el efecto de contorno. Se aplican múltiples sombras de texto en diferentes direcciones:
- -1px -1px 0 black: Sombra hacia arriba y a la izquierda.
- 1px -1px 0 black: Sombra hacia arriba y a la derecha.
- -1px 1px 0 black: Sombra hacia abajo y a la izquierda.
- 1px 1px 0 black: Sombra hacia abajo y a la derecha.

Al combinar estas sombras, se crea un efecto de contorno alrededor del texto.

Método 2: Usar `-webkit-text-stroke`

Otra manera de agregar un contorno es utilizando la propiedad -webkit-text-stroke, que está disponible en navegadores basados en WebKit, como Chrome y Safari. Esta propiedad permite definir el grosor y el color del contorno.

Ejemplo de código

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contorno de Texto con -webkit-text-stroke</title>
    <style>
        .contorno {
            font-size: 48px;
            color: white; /* Color del texto */
            -webkit-text-stroke: 2px black; /* Grosor y color del contorno */
        }
    </style>
</head>
<body>
    <h1 class="contorno">Texto con Contorno</h1>
</body>
</html>

Explicación del código

-webkit-text-stroke: Esta propiedad añade un contorno al texto. En este caso, se establece un grosor de 2px y un color negro para el contorno. Es importante tener en cuenta que esta propiedad puede no ser compatible con todos los navegadores, por lo que es recomendable usarla junto con el método de text-shadow para una mejor compatibilidad.

Consideraciones finales

Añadir un contorno a un texto puede ser una gran manera de mejorar su visibilidad y estilo. Puedes experimentar con diferentes combinaciones de colores y grosores para encontrar el efecto que mejor se adapte a tus necesidades. Recuerda que es fundamental verificar la compatibilidad del método que elijas con los navegadores que utilizarán los usuarios de tu sitio web.

Programación y Ejemplos

Buscar este blog