Ir al contenido principal

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.

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

¿Para qué sirve el comando python manage.py collectstatic en Django?

El comando python manage.py collectstatic en Django se utiliza para recopilar y organizar todos los archivos estáticos de tu proyecto en una sola ubicación central, conocida como STATIC_ROOT . Esto es particularmente útil en producción, donde los archivos estáticos necesitan estar en un lugar accesible para el servidor web (como Apache o Nginx) en lugar de ser servidos directamente por Django. ¿Por qué es importante collectstatic ? Cuando trabajas en un proyecto Django, puedes tener archivos estáticos (CSS, JavaScript, imágenes, etc.) en múltiples ubicaciones, especialmente si usas varias aplicaciones de Django. Durante el desarrollo, Django maneja estos archivos estáticos automáticamente cuando DEBUG = True . Sin embargo, en un entorno de producción, Django recomienda no servir archivos estáticos directamente, ya que esto podría ser ineficiente y, en algunos casos, inseguro. collectstatic resuelve este problema al: Agrupar todos los archivos estáticos : Combina archivos de todas las...
Publicar un comentario
Sigue leyendo »

¿Qué son las migraciones en Django y cómo se aplican?

¿Qué es una migración en Django? Las migraciones en Django son archivos que registran y guardan cambios en la estructura de la base de datos. Cada vez que definimos o modificamos un modelo (una clase que define una tabla en la base de datos), necesitamos crear y aplicar una migración para que Django pueda actualizar la base de datos con estos cambios. ¿Por qué son importantes las migraciones? Las migraciones son cruciales porque permiten que los cambios en la estructura de la base de datos se apliquen de forma controlada y sin afectar los datos existentes. Esto facilita la creación, modificación y mantenimiento de nuestras tablas y campos sin necesidad de manipular la base de datos manualmente. ¿Cómo se crean las migraciones? Para crear una migración, basta con ejecutar el siguiente comando en la terminal: python manage.py makemigrations Este comando analiza los modelos en el proyecto y genera archivos de migración para los c...
Publicar un comentario
Sigue leyendo »

Ejemplo para hacer un menú de navegación horizontal en CSS

Crear un menú de navegación horizontal es una tarea básica y esencial en el desarrollo web. Este tipo de menú es ideal para organizar enlaces de navegación en la parte superior de un sitio web, permitiendo a los usuarios acceder rápidamente a las secciones principales. En este artículo, veremos un ejemplo paso a paso de cómo crear un menú de navegación horizontal con HTML y CSS. Paso 1: Estructura HTML Primero, crearemos la estructura HTML de nuestro menú de navegación. Usaremos una lista desordenada ( <ul> ) para organizar los enlaces en fila. html <!DOCTYPE html > < html lang = "es" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Ejemplo de Menú de Navegación Horizontal </ title > < link rel = "stylesheet" href = "estilos.css" > </ head > < body > ...
Publicar un comentario
Sigue leyendo »