Cargando...

Efectos de texto en CSS

Ya sabes alinear, decorar y cargar fuentes. Los efectos de texto añaden un acabado encima — una sombra suave, puntos suspensivos cuando falta espacio, o un salto para cadenas largas incómodas. Manténlos ligeros para que el texto se lea bien.

Un pequeño kit de efectos

📊 Efectos de texto de un vistazo

Herramienta Trabajo cotidiano
text-shadow Profundidad o brillo suave detrás de los glifos (offset, blur, color)
text-overflow Cómo termina el texto recortado — a menudo ellipsis (…)
overflow + white-space Socios que necesita el ellipsis (hidden + nowrap)
overflow-wrap Rompe palabras/URLs largas para que quepan en la caja
writing-mode Hace correr el texto en otra dirección (p. ej. vertical)

Los efectos son condimento, no el plato. Un título puede disfrutar una sombra tranquila; un párrafo largo rara vez necesita fuegos artificiales.

text-shadow — offset, blur, color

El orden suele ser offset horizontal, vertical, radio de blur y luego color. Valores pequeños se sienten calmados; un blur enorme ensucia las letras.

text-shadow básico

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Sombras en capas

Puedes listar más de una sombra separada por comas — útil para un alzado suave sin contorno duro.

Dos capas suaves

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

Puntos suspensivos cuando el texto es demasiado ancho

text-overflow: ellipsis solo funciona con un recorte: normalmente overflow: hidden y white-space: nowrap en una caja de ancho limitado.

Ellipsis en etiqueta estrecha

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — domar palabras largas

Una URL larga o una cadena sin espacios puede romper una columna estrecha. overflow-wrap: break-word (alias antiguo word-wrap) deja al navegador partir dentro de la palabra cuando hace falta.

Romper cadenas largas

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — un vistazo vertical

writing-mode cambia cómo avanzan las líneas. Los valores verticales sirven para etiquetas laterales o títulos decorativos — no para párrafos cotidianos.

Vistazo de texto vertical

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

Un hábito calmado para títulos

Una sombra suave en un título corto suele bastar. Evita un brillo pesado en el cuerpo y usa ellipsis solo donde el espacio sea de verdad limitado.

Pulido ligero del título

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Pruébalo tú

  1. Añade un text-shadow suave a un título (offsets pequeños, blur modesto).
  2. Apila una segunda sombra más clara con una coma.
  3. Construye una etiqueta ellipsis: max-width, overflow: hidden, nowrap, ellipsis.
  4. Pon una URL larga en una caja estrecha y usa overflow-wrap: break-word.
  5. Prueba writing-mode: vertical-rl en una etiqueta lateral corta — luego vuelve a la lectura normal.

Errores comunes

  • Multisombras neón en párrafos largos (difíciles de leer)
  • Poner text-overflow: ellipsis sin overflow: hidden y nowrap
  • Romper cada palabra con word-break agresivo cuando basta overflow-wrap
  • Usar writing-mode vertical para artículos enteros
  • Mezclar esta lección con @font-face / carga de fuentes web (la anterior)

Resumen

  • text-shadow usa offset, blur y color — mantén valores modestos
  • Varias sombras pueden apilarse para un alzado suave
  • El ellipsis necesita overflow, nowrap y un límite de ancho
  • overflow-wrap ayuda a palabras y URLs largas
  • writing-mode es una herramienta especial; el cuerpo diario sigue horizontal

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 29 de 35
Css Tutorial