2.1Fondos, superposiciones y efectos
Lo esencial en 30 segundos
- Fondo de un contenedor (pestaña Estilo): color sólido, degradado, imagen o vídeo.
- El texto sobre imagen se vuelve ilegible: pon una superposición (overlay semitransparente) para mantener el contraste.
- Efectos: sombras (box-shadow), redondeos (border-radius), bordes — con moderación.
Hilo conductor — Nadia viste la banda
Nadia quiere una banda con una buena foto de taller de fondo y el título encima. Problema: sobre la foto clara, el título blanco desaparece. Pone una superposición oscura semitransparente: el texto vuelve a ser legible, la foto sigue visible. Luego redondea las esquinas de las tarjetas para un aspecto moderno.
Continúa el nivel 1 — Nadia pasa de la estructura al diseño rico.
1. Fondos y legibilidad
Un contenedor puede recibir un fondo (pestaña Estilo): color sólido, degradado, imagen de fondo o incluso vídeo. Para una imagen, se ajustan el encuadre y el anclaje ("fijo" crea un ligero efecto parallax). Pero poner texto sobre una imagen es la trampa clásica: según la zona, el texto se vuelve ilegible.
La solución: una superposición (overlay) — una capa semitransparente (color o degradado) puesta entre la imagen y el texto. Nadia añade un overlay oscuro al 40 %: la foto sigue visible, el título vuelve a ser nítido. Es un reflejo de legibilidad.
2. Efectos con moderación
Los efectos dan relieve: sombras (box-shadow) para destacar una tarjeta, redondeos (border-radius) para un aspecto suave, bordes para delimitar. Aplicados con finura, modernizan; en exceso, recargan y envejecen.
Nadia redondea ligeramente las tarjetas de trabajos y añade una sombra discreta al pasar el ratón. Regla: cada efecto debe servir a la legibilidad o a la jerarquía, no decorar por decorar.
🔎 Ejemplo concreto — Banda legible (caso Nadia)
Contenedor banda:
- fondo = imagen de taller (encuadrada, anclaje normal)
- superposición = negro al 40 %
- título blanco encima → legible
- tarjetas: border-radius 8px + sombra ligera al pasar el ratón
→ Imagen bonita Y texto nítido.Resultado: diseño rico sin sacrificar la legibilidad.
Lección: overlay primero, efectos después, con medida.
Vocabulario de la sección
- Fondo (background)
- El fondo de un contenedor: color, degradado, imagen o vídeo (pestaña Estilo).
Ejemplo sencillo: una foto de taller de fondo de banda.
Lo que no es: confundir el fondo del contenedor con una imagen insertada (widget Imagen).
Reflejo: el fondo viste la caja; el widget Imagen muestra un visual.
- Superposición (overlay)
- Una capa semitransparente puesta sobre una imagen de fondo para mantener el texto legible.
Ejemplo sencillo: overlay negro al 40 % bajo el título de la banda.
Lo que no es: poner texto directamente sobre una imagen contrastada.
Reflejo: texto sobre imagen → overlay sistemático.
- Anclaje (parallax)
- Ajuste de una imagen de fondo: "fijo" crea un ligero efecto de profundidad al desplazar.
Ejemplo sencillo: fondo fijo para una sección de ambiente.
Lo que no es: abusar del parallax en todas partes (pesado, cansino).
Reflejo: parallax puntual, nunca en toda la página.
- Efectos (sombras, redondeos)
- Sombras (box-shadow), redondeos (border-radius), bordes para dar relieve.
Ejemplo sencillo: tarjetas redondeadas con sombra discreta al pasar el ratón.
Lo que no es: apilar sombras fuertes y bordes chillones.
Reflejo: un efecto debe servir a la legibilidad o a la jerarquía.
- Legibilidad del texto sobre imagen
- Garantizar el contraste del texto puesto sobre un fondo visual.
Ejemplo sencillo: overlay + color de texto adaptado.
Lo que no es: juzgarlo legible en tu pantalla sin comprobar las zonas claras.
Reflejo: comprobar el texto en todo el ancho de la imagen.
En la práctica — Vestir una sección con limpieza
- Dale a un contenedor una imagen de fondo (pestaña Estilo) y encuádrala.
- Añade una superposición (overlay) semitransparente y ajusta su opacidad.
- Pon un título encima y comprueba su legibilidad en todo el ancho.
- Añade un redondeo y una sombra discreta a las tarjetas, con moderación.
Guion listo para decir — justificar el overlay al cliente (20 s)
"He conservado su bonita foto de taller de fondo, con un ligero velo oscuro encima: es lo que permite que el título siga perfectamente legible, sea cual sea la luminosidad de la foto. No se oculta nada, solo se hace nítido."
Explicar el overlay como un servicio de legibilidad, no como un oscurecimiento.
Plantilla para copiar y pegar — comprobación de fondo visual
CONTENEDOR: _______________
FONDO: color / degradado / imagen / vídeo
IMAGEN: ¿encuadre ok? anclaje (normal/fijo): _____
¿TEXTO SOBRE IMAGEN? → SUPERPOSICIÓN: color ___ opacidad ___ %
CONTRASTE DEL TEXTO COMPROBADO (todo el ancho): sí / no
EFECTOS: redondeo ___ px, sombra (discreta): sí / noBanda con foto
Imagen + overlay + título: el efecto "wow" sin perder la legibilidad.
Sección sobria
Color sólido o degradado ligero: a veces más profesional que una imagen.
Tarjeta
Fondo blanco, redondeo ligero, sombra discreta: aspecto moderno y nítido.
Rendimiento
Vídeo de fondo exigente: reservar para casos fuertes, comprimir (ver 5.1).
✓ Buenas prácticas
- Poner una superposición en cuanto haya texto sobre imagen.
- Usar los efectos con moderación.
- Comprobar el contraste en todo el ancho.
✗ Errores frecuentes
- Texto directamente sobre imagen contrastada.
- Parallax y vídeos de fondo en todas partes (pesado).
- Sombras/bordes chillones.
Puntos clave
- Fondo: color, degradado, imagen, vídeo.
- Superposición (overlay) = reflejo de legibilidad.
- Efectos (sombras, redondeos) con moderación.
- Comprobar siempre el contraste del texto.
Reto 48h — aplica mañana
Crea una sección con imagen de fondo + overlay + título legible. Prueba reduciendo/aumentando la opacidad del overlay hasta el buen contraste. Añade un redondeo discreto a una tarjeta. 20 minutos.
- Ajusto un fondo (imagen, degradado) con limpieza.
- Añado una superposición para la legibilidad del texto.
- Uso los efectos con moderación.
Preguntas frecuentes
¿Cómo hago legible un título sobre una foto?
Poniendo una superposición (overlay) semitransparente entre la imagen de fondo y el texto, y eligiendo un color de texto contrastado. Comprueba en todo el ancho de la imagen.
¿Debo usar vídeos de fondo?
Con parquedad: un vídeo de fondo es pesado (rendimiento, móvil). Resérvalo para secciones de gran impacto y comprímelo; si no, basta una imagen o un degradado.
¿Las sombras y redondeos envejecen un sitio?
En exceso, sí. Usados con finura (redondeo ligero, sombra discreta), modernizan al contrario. Cada efecto debe servir a la legibilidad o a la jerarquía.
El título blanco de Nadia desaparece por zonas sobre la foto de taller de fondo. ¿Qué hacer?