Bloque 3 · Interfaces pro — Curso de CSS

Lección 1 · Teoría

Variables CSS: tu propia paleta

Las variables CSS (custom properties) guardan valores reutilizables: colores, espaciados, radios… Cambias un valor en un único sitio y toda la web se actualiza. Es la diferencia entre mantener un proyecto… o sufrirlo.

declarar y usar

:root {
  /* se declaran con DOS guiones */
  --color-primario: #6c5ce7;
  --color-texto: #22223b;
  --espacio: 16px;
}

.boton {
  /* y se consumen con var() */
  background: var(--color-primario);
  padding: var(--espacio);
}

1.1 · Por qué `:root`

:root apunta a la raíz del documento (el <html>) con la máxima especificidad posible para un selector de tipo. Definiendo ahí tus variables las haces globales: visibles en toda la página.

1.2 · Herencia y temas

Las variables se heredan, así que puedes redefinirlas en una rama del DOM y todo su descendiente cambiará. Así se hacen los temas claro/oscuro:

tema por defecto

:root {
  --fondo: #ffffff;
  --texto: #111111;
}
body {
  background: var(--fondo);
  color: var(--texto);
}

✅ tema oscuro: solo redefinir

body.oscuro {
  --fondo: #121212;
  --texto: #f1f1f1;
}
/* cero reglas extra: todo lo que usaba
   var(--fondo) cambia solo */

1.3 · Detalles que marcan nivel

fallback + calc()

.card {
  /* segundo argumento = valor si la variable no existe */
  font-family: var(--fuente-marca, Arial);

  /* se combinan perfectamente con calc() */
  padding: calc(var(--espacio) * 2);
}

💡 Nombra por propósito, no por color: --color-peligro mejor que --rojo. El día que el rojo sea naranja, el nombre seguirá teniendo sentido.

Lección 2 · Teoría

Transiciones y transformaciones

2.1 · transform: mover sin molestar al layout

Funciones de transformación
Función	Efecto	Ejemplo
`translate(x, y)`	Desplaza desde su sitio	`translateY(-6px)`
`scale(n)`	Escala (1 = tamaño original)	`scale(1.05)`
`rotate(deg)`	Rota	`rotate(45deg)`
`skew(deg)`	Inclina	`skewX(-10deg)`

se combinan separadas por espacios

.tarjeta:hover {
  transform: translateY(-8px) scale(1.03);
}

⚠️ Las transformaciones sacan el elemento de su caja lógica sin reflow: nada alrededor se mueve. Es lo que las hace tan fluidas — junto con opacity, son las propiedades que mejor «animan».

2.2 · transition: interpolar estados

transition suaviza cualquier cambio entre dos estados (normalmente provocado por :hover, :focus o una clase). Se declara en el estado base, no solo en el hover:

la receta del botón moderno

.btn {
  background: #6c5ce7;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 92, 231, .4);
}

Anatomía del shorthand
Parte	Ejemplo	Significado
Propiedad	`transform` / `all`	Qué se anima (mejor concreta que `all`)
Duración	`.3s` / `300ms`	Cuánto tarda — imprescindible
Timing	`ease`, `linear`, `ease-in-out`, `cubic-bezier(...)`	Curva de aceleración
Delay	`.1s`	Espera antes de empezar (opcional)

💡 Duraciones sanas: micro-interacciones 150–300ms, movimientos grandes 400–600ms. Más rápido parece un error; más lento, lentitud web.

Lección 3 · Teoría

Animaciones con @keyframes

Las transiciones van bien para reaccionar; las animaciones permiten que algo se mueva solo, en bucle o al cargarse. Primero defines los pasos con @keyframes y luego los aplicas con animation:

badge que late

@keyframes pulso {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

.badge {
  animation: pulso 1s ease-in-out infinite alternate;
}

3.1 · Pasos por porcentajes

más de dos pasos

@keyframes nudge {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-6px); }
  75%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

Propiedades de animation
Propiedad	Hace
`animation-name`	Qué keyframes ejecuta
`animation-duration`	Duración de cada ciclo
`animation-iteration-count`	Veces que repite (`infinite` = sin fin)
`animation-direction`	`alternate` reproduce ida y vuelta
`animation-fill-mode`	`forwards` conserva el estado final
`animation-play-state`	`paused`/`running` — pausa elegante en hover

pausar al pasar el ratón

.banner:hover {
  animation-play-state: paused;
}

⚠️ Si defines transform tanto en una animación como en :hover, la animación gana (mientras dure). No mezcles ambas sobre la misma propiedad en el mismo elemento.

Lección 4 · Teoría

Efectos pro: sombras, degradados y filtros

4.1 · Sombras con intención

box-shadow y text-shadow

.tarjeta {
  /* x  y  difuminado  expansión  color */
  box-shadow: 0 14px 34px rgba(40, 20, 120, .18);
}
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .35);
}

Sombra suave, difusa y poco opaca = profundidad realista. Sombra dura y negra al 100 % = año 2005.

4.2 · Degradados

linear-gradient

.hero {
  background: linear-gradient(
    160deg,
    #6c5ce7,
    #00cec9);
}

radial-gradient

.spotlight {
  background: radial-gradient(
    circle at center,
    #ffd166,
    transparent 70%);
}

4.3 · Filtros

filter y backdrop-filter

.galeria img {
  filter: grayscale(1);          /* blanco y negro */
}
.galeria img:hover {
  filter: grayscale(0) saturate(1.2);
}

/* cristal esmerilado (glassmorphism) */
.modal {
  backdrop-filter: blur(8px);
}

blur(px) desenfoca · brightness() aclara · saturate() intensifica color.
filter afecta al propio elemento; backdrop-filter, a lo que hay detrás.
Ambos admiten transición — combínalos con :hover.

💡 La fórmula de tarjeta premium: fondo degradado sutil + sombra difusa + border-radius generoso + transición en hover. Cuatro líneas, efecto profesional.

Práctica guiada

✍️ Los 12 ejercicios del bloque

Crea la carpeta css-b3/ y resuelve en orden: cada ejercicio usa lo aprendido en los anteriores.

1 Paleta centralizada

Define en :root tres variables (--color-primario, --color-texto, --espacio) y úsalas en un botón y un párrafo.

Ver solución

:root {
  --color-primario: #6c5ce7;
  --color-texto: #22223b;
  --espacio: 16px;
}
.btn  { background: var(--color-primario); padding: var(--espacio); }
p     { color: var(--color-texto); }

2 Tema oscuro instantáneo

Redefine tus variables dentro de body.oscuro para invertir fondo y texto sin tocar ninguna otra regla.

Ver solución

body.oscuro {
  --color-texto: #f1f1f1;
  /* añade aquí las que necesites */
}

3 Red de seguridad con fallback

Usa una variable que aún no existe pero con valor de respaldo, para que el diseño no se rompa jamás.

Ver solución

.marca {
  font-family: var(--fuente-marca, "Segoe UI", Arial);
}

4 Botón que respira

Un botón cuyo fondo cambia al pasar el ratón, con una transición suave de 300ms.

Ver solución

.btn {
  background: var(--color-primario);
  transition: background .3s ease;
}
.btn:hover { background: #4834d4; }

5 Tarjeta que se eleva

Al hacer hover, la tarjeta sube 6px y crece un 2 % con sombra más intensa. Todo debe interpolarse, no saltar.

Ver solución

.tarjeta {
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.tarjeta:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}

6 Subrayado que crece

Enlace con un pseudo-elemento ::after que pasa de ancho 0 al 100 % al hacer hover — animando transform, nunca width.

Ver solución

.link { position: relative; }
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--color-primario);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.link:hover::after { transform: scaleX(1); }

7 Icono giratorio

El icono de ajustes gira una vuelta completa (360°) cada vez que pasas el ratón, durante medio segundo.

Ver solución

.icono {
  display: inline-block;
  transition: transform .5s ease;
}
.icono:hover { transform: rotate(360deg); }

8 Badge que late

Crea la insignia de notificación con la animación pulso de la lección: escala 1 → 1.15 → 1, infinita, en bucle alterno.

Ver solución

@keyframes pulso {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}
.badge {
  animation: pulso 1s ease-in-out infinite alternate;
}

9 Spinner de carga

Un círculo con borde parcialmente coloreado que rota sin fin a velocidad constante: el clásico indicador «cargando».

Ver solución

@keyframes girar { to { transform: rotate(360deg); } }

.spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 4px solid #eee;
  border-top-color: var(--color-primario);
  animation: girar .8s linear infinite;
}

10 Banner con degradado

Fondo degradado diagonal violeta→turquesa en la sección hero, con el titular en blanco y una text-shadow sutil.

Ver solución

.hero {
  background: linear-gradient(160deg, #6c5ce7, #00cec9);
}
.hero h1 {
  color: #fff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, .35);
}

11 Galería en blanco y negro

Todas las imágenes de la galería en grayscale(100 %); al pasar el ratón recuperan el color con una transición de 400ms.

Ver solución

.galeria img {
  filter: grayscale(100%);
  transition: filter .4s ease;
}
.galeria img:hover { filter: grayscale(0); }

12 🏆 Proyecto integrador: «tarjeta-pro.html»

Diseña la tarjeta de presentación de un producto con acabado comercial. Requisitos:

Mínimo 3 variables definidas en :root y usadas con var()
Al menos una transición con duración
Efecto :hover que aplique transform
Una animación @keyframes activa
box-shadow y un degradado en algún elemento
Ningún estilo inline: todo dentro del <style>

Este ejercicio es el reto del laboratorio del examen: la validación automática comprobará estos criterios por ti.

Bloque 3: Interfaces pro

Variables CSS: tu propia paleta

1.1 · Por qué `:root`

1.2 · Herencia y temas

1.3 · Detalles que marcan nivel

Transiciones y transformaciones

2.1 · transform: mover sin molestar al layout

2.2 · transition: interpolar estados

Animaciones con @keyframes

3.1 · Pasos por porcentajes

Efectos pro: sombras, degradados y filtros

4.1 · Sombras con intención

4.2 · Degradados

4.3 · Filtros

✍️ Los 12 ejercicios del bloque

1 Paleta centralizada

2 Tema oscuro instantáneo

3 Red de seguridad con fallback

4 Botón que respira

5 Tarjeta que se eleva

6 Subrayado que crece

7 Icono giratorio

8 Badge que late

9 Spinner de carga

10 Banner con degradado

11 Galería en blanco y negro

12 🏆 Proyecto integrador: «tarjeta-pro.html»

📝 Examen del Bloque 3

Parte A · Test teórico (aprueba con 9/12)

Parte B · Reto práctico final

Bloque 3: Interfaces pro

Variables CSS: tu propia paleta

1.1 · Por qué :root

1.2 · Herencia y temas

1.3 · Detalles que marcan nivel

Transiciones y transformaciones

2.1 · transform: mover sin molestar al layout

2.2 · transition: interpolar estados

Animaciones con @keyframes

3.1 · Pasos por porcentajes

Efectos pro: sombras, degradados y filtros

4.1 · Sombras con intención

4.2 · Degradados

4.3 · Filtros

✍️ Los 12 ejercicios del bloque

1 Paleta centralizada

2 Tema oscuro instantáneo

3 Red de seguridad con fallback

4 Botón que respira

5 Tarjeta que se eleva

6 Subrayado que crece

7 Icono giratorio

8 Badge que late

9 Spinner de carga

10 Banner con degradado

11 Galería en blanco y negro

12 🏆 Proyecto integrador: «tarjeta-pro.html»

📝 Examen del Bloque 3

Parte A · Test teórico (aprueba con 9/12)

Parte B · Reto práctico final

1.1 · Por qué `:root`