CSS · Módulo 8

Variables, transiciones y pseudo-clases

Cerramos el curso de CSS con tres herramientas que dan vida y mantenibilidad a cualquier proyecto: variables reutilizables, movimiento suave, y estilos que reaccionan al usuario.

Variables CSS (custom properties)

Puedes definir tus propios "nombres" para valores que usas una y otra vez — típicamente colores de marca — y reutilizarlos en todo el archivo. Si cambias el valor una vez, se actualiza en todas partes automáticamente.

--nombre: valor;

Define una variable. Por convención se declaran dentro de :root para que estén disponibles en toda la página.

var(--nombre)

Recupera el valor de esa variable en cualquier propiedad.

variables.html

💡 Consejo

Define tu paleta de marca completa como variables al principio de tu CSS. Es exactamente lo que hicimos con los colores de Gráffica Academy — si algún día cambias el tono del coral, se actualiza en todo el sitio con una sola línea.

Transiciones: movimiento suave entre estados

transition

Anima el cambio de una propiedad (color, tamaño, posición...) en vez de que salte de golpe. Se define: propiedad, duración, y opcionalmente el tipo de curva de animación.

transiciones.html

Pseudo-clases: estilos según el estado o la posición

:hover

Mientras el ratón está encima del elemento.

:focus

Mientras un campo (como un input) está seleccionado/activo.

:nth-child(2)

Selecciona un elemento según su posición entre sus hermanos. Admite fórmulas, como nth-child(odd) para los impares.

::before / ::after

Pseudo-elementos: insertan contenido generado antes o después del contenido real, definido con la propiedad content. Muy usado para iconos decorativos o comillas.

pseudo-clases.html

Una animación simple con @keyframes

@keyframes

Define los "fotogramas clave" de una animación (por ejemplo, de 0% a 100%). Luego se activa con la propiedad animation en el elemento.

keyframes.html

⚠️ Error común

Abusar de animaciones y transiciones en toda la página. Un movimiento sutil y con propósito (como el hover de un botón) refuerza la experiencia; demasiado movimiento simultáneo resulta molesto y da sensación de web poco cuidada.

Ponlo a prueba

Comprueba lo que has aprendido

3 preguntas · sin nota, solo para afianzar

1. ¿Dónde se declaran normalmente las variables CSS para que estén disponibles en todo el documento?

2. ¿Qué hace :hover?

3. ¿Qué necesita un pseudo-elemento como ::before para mostrarse?

← 7. Diseño responsive Volver al inicio ✓