Text Shadow y Decoraciones de Texto

Las propiedades de sombra y decoración de texto en CSS permiten añadir efectos visuales que mejoran la estética y la experiencia de usuario en tus diseños web. Estos efectos pueden ayudar a crear jerarquías visuales, mejorar la legibilidad en ciertos fondos y añadir personalidad a tu tipografía. En este artículo, exploraremos en detalle las propiedades text-shadow y las diversas propiedades de decoración de texto.

Text Shadow (Sombra de texto)

La propiedad text-shadow permite añadir sombras al texto, creando efectos de profundidad, relieve o resplandor.

Sintaxis básica

selector {
  text-shadow: desplazamiento-x desplazamiento-y radio-de-desenfoque color;
}

Ejemplo:

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Parámetros

1. Desplazamiento horizontal (x): Distancia horizontal de la sombra. Valores positivos desplazan la sombra a la derecha, valores negativos a la izquierda.
2. Desplazamiento vertical (y): Distancia vertical de la sombra. Valores positivos desplazan la sombra hacia abajo, valores negativos hacia arriba.
3. Radio de desenfoque: (Opcional) Define cuánto se difumina la sombra. Un valor de 0 crea una sombra nítida, valores mayores crean sombras más difusas.
4. Color: Define el color de la sombra. Se recomienda usar colores con transparencia (rgba o hsla) para efectos más naturales.

Ejemplos básicos

Sombra simple

.simple-shadow {
  text-shadow: 2px 2px 0 #000000;
  /* Sombra nítida, 2px a la derecha y 2px abajo */
}

Sombra difuminada

.blurred-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* Sombra con 4px de desenfoque y 50% de opacidad */
}

Sombra negativa (efecto inset)

.inset-shadow {
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8);
  /* Sombra hacia arriba y a la izquierda, creando efecto inset */
}

Múltiples sombras

Puedes aplicar varias sombras a un mismo texto separándolas con comas:

.multiple-shadows {
  text-shadow: 
    1px 1px 2px black, 
    0 0 1em blue, 
    0 0 0.2em blue;
  color: white;
}

Efectos creativos con text-shadow

Efecto de texto en relieve

.embossed-text {
  color: #666;
  text-shadow: 
    1px 1px 1px white, 
    -1px -1px 1px rgba(0, 0, 0, 0.5);
}

Efecto de texto grabado

.engraved-text {
  color: #999;
  text-shadow: 
    -1px -1px 1px white, 
    1px 1px 1px rgba(0, 0, 0, 0.5);
}

Efecto de texto con resplandor

.glow-text {
  color: white;
  text-shadow: 
    0 0 5px #fff, 
    0 0 10px #fff, 
    0 0 15px #0073e6, 
    0 0 20px #0073e6, 
    0 0 25px #0073e6;
}

Efecto de texto con contorno

.outline-text {
  color: white;
  text-shadow: 
    -1px -1px 0 #000, 
    1px -1px 0 #000, 
    -1px 1px 0 #000, 
    1px 1px 0 #000;
}

Efecto 3D

.text-3d {
  color: #fafafa;
  text-shadow: 
    0 1px 0 #ccc, 
    0 2px 0 #c9c9c9, 
    0 3px 0 #bbb, 
    0 4px 0 #b9b9b9, 
    0 5px 0 #aaa, 
    0 6px 1px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 
    0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25);
}

Efecto de texto retro

.retro-text {
  color: #ff9e00;
  text-shadow: 
    5px 5px 0 #ff0000, 
    10px 10px 0 #ff006e;
}

Text Decoration (Decoración de texto)

Las propiedades de decoración de texto permiten añadir líneas encima, debajo o a través del texto, así como controlar su estilo, color y grosor.

text-decoration-line

Esta propiedad define el tipo de línea de decoración:

.underline {
  text-decoration-line: underline;
}

.overline {
  text-decoration-line: overline;
}

.line-through {
  text-decoration-line: line-through;
}

.combined {
  text-decoration-line: underline overline;
}

.none {
  text-decoration-line: none; /* Elimina decoraciones */
}

text-decoration-style

Esta propiedad controla el estilo de la línea de decoración:

.solid {
  text-decoration-line: underline;
  text-decoration-style: solid; /* Valor predeterminado */
}

.double {
  text-decoration-line: underline;
  text-decoration-style: double;
}

.dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

text-decoration-color

Esta propiedad define el color de la línea de decoración:

.colored-underline {
  text-decoration-line: underline;
  text-decoration-color: #ff0000; /* Subrayado rojo */
}

text-decoration-thickness

Esta propiedad controla el grosor de la línea de decoración:

.thick-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}

.auto-thickness {
  text-decoration-line: underline;
  text-decoration-thickness: auto; /* Valor predeterminado */
}

.from-font {
  text-decoration-line: underline;
  text-decoration-thickness: from-font; /* Usa el valor sugerido por la fuente */
}

Propiedad abreviada text-decoration

.fancy-underline {
  /* text-decoration: line style color thickness; */
  text-decoration: underline wavy #ff3366 2px;
}

text-underline-offset

Esta propiedad controla la distancia entre el texto y la línea de subrayado:

.offset-underline {
  text-decoration-line: underline;
  text-underline-offset: 0.5em;
}

text-underline-position

Esta propiedad controla la posición del subrayado:

.underline-position {
  text-decoration-line: underline;
  text-underline-position: under; /* Coloca el subrayado debajo de los descendentes */
}

Combinando Text Shadow y Decoraciones

Puedes combinar sombras y decoraciones para crear efectos más elaborados:

.fancy-link {
  color: #0066cc;
  text-decoration: underline wavy #66aaff 2px;
  text-underline-offset: 4px;
  text-shadow: 0 0 1px rgba(0, 102, 204, 0.2);
  transition: all 0.3s ease;
}

.fancy-link:hover {
  color: #004499;
  text-decoration-color: #004499;
  text-shadow: 0 0 2px rgba(0, 102, 204, 0.4);
}

Ejemplos prácticos

Encabezado con efecto de sombra

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  color: white;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.3);
}

Enlaces personalizados

.custom-link {
  color: #333;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s;
}

.custom-link:hover, .custom-link:focus {
  background-size: 100% 2px;
}

Texto tachado para productos agotados

.out-of-stock {
  text-decoration: line-through;
  text-decoration-color: #ff0000;
  text-decoration-thickness: 2px;
  color: #999;
}

Efecto de marca texto

.highlight {
  background: linear-gradient(180deg, transparent 65%, #ffde7d 65%);
  display: inline;
}

Botón con texto en relieve

.embossed-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f0f0f0;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-weight: bold;
  color: #666;
  text-shadow: 
    1px 1px 1px white, 
    -1px -1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 
    inset 0 1px 0 white, 
    0 1px 3px rgba(0, 0, 0, 0.2);
}

Casos de uso específicos

Mejora de legibilidad en imágenes

.text-on-image {
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

Indicadores de acción

.deleted {
  text-decoration: line-through;
  color: #999;
}

.inserted {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: green;
}

Títulos llamativos

.magazine-title {
  font-size: 3rem;
  font-weight: 900;
  color: #ff3366;
  text-shadow: 
    3px 3px 0 #ffde7d,
    6px 6px 0 rgba(0, 0, 0, 0.1);
}

Consideraciones de accesibilidad

Contraste y legibilidad

Al aplicar sombras y decoraciones, es importante mantener un buen contraste para garantizar la legibilidad:

/* Mejor para accesibilidad */
.accessible-shadow {
  color: #333;
  background-color: #fff;
  text-shadow: none; /* Sin sombra para texto normal */
}

.accessible-heading {
  color: #333;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

Subrayados para enlaces

Los subrayados son importantes para identificar enlaces, especialmente para usuarios con discapacidades visuales:

/* Mantiene el subrayado pero lo mejora */
.accessible-link {
  color: #0066cc;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.accessible-link:hover {
  text-decoration-thickness: 2px;
}

Compatibilidad con navegadores

La mayoría de las propiedades modernas de decoración de texto (como text-decoration-thickness y text-underline-offset) tienen buen soporte en navegadores modernos, pero pueden requerir alternativas para navegadores más antiguos:

/* Enfoque progresivo */
.link {
  text-decoration: underline; /* Base para todos los navegadores */
}

@supports (text-decoration-thickness: 2px) {
  .link {
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
}

Animando decoraciones y sombras

Puedes animar propiedades de decoración y sombra para crear efectos interactivos:

.animated-link {
  color: #333;
  text-decoration: underline;
  text-decoration-color: #ff3366;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: 
    text-decoration-thickness 0.3s,
    text-underline-offset 0.3s,
    color 0.3s;
}

.animated-link:hover {
  color: #ff3366;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.animated-shadow {
  color: #333;
  text-shadow: 0 0 0 transparent;
  transition: text-shadow 0.3s;
}

.animated-shadow:hover {
  text-shadow: 0 0 10px rgba(0, 102, 204, 0.5);
}

Conclusión

Las propiedades de sombra y decoración de texto en CSS ofrecen numerosas posibilidades para mejorar la estética y la experiencia de usuario en tus diseños web. Desde efectos sutiles que mejoran la legibilidad hasta efectos creativos que añaden personalidad, estas herramientas son fundamentales en el arsenal de cualquier desarrollador web.

Al aplicar estos efectos, recuerda siempre priorizar la legibilidad y la accesibilidad. Los efectos visuales deben complementar el contenido, no dificultarlo. Con un enfoque equilibrado, puedes crear diseños web atractivos y funcionales que destaquen sin sacrificar la usabilidad.