static y flujo normal
Demo Observa cómo `static` respeta el flujo del documento y por qué `top` o `left` no hacen nada en ese modo.
🧩 Snippets de CSS
Demos y snippets integrados en las lecciones del curso CSS.
variables CSS y HSL en runtime
Demo Ajusta tono, saturación y luminosidad para comprobar cómo una variable en `:root` propaga cambios por toda la interfaz sin reescribir componentes.
generador de hero con degradados
Demo Ajusta glow, overlay y ángulo para construir fondos de hero más ricos sin perder legibilidad.
recortes visuales con CSS mask
Demo Prueba máscaras radiales, spotlight, franjas, fade y texto para entender cómo recortar una composición sin editar la imagen base.
generador visual de CSS mask
Demo Explora fades, spotlight, franjas y texto recortado para entender cómo cambian `mask-image`, `mask-size` y `mask-position` en tiempo real.
Demo: generador visual de paleta + gradiente
Demo Explora una paleta responsive con variaciones, armonías y exportación CSS lista para usar.
trazos SVG con scroll solo CSS
Demo Descubre cómo usar `pathLength`, `stroke-dasharray` y `stroke-dashoffset` sin depender de JavaScript.
varias curvas SVG con timing escalonado
Demo Observa cómo varios `path` pueden animarse con rangos distintos para construir una composición más rica sin salir de CSS.
múltiples líneas SVG a ancho completo
Demo Revisa una versión extendida con varias curvas y estirado horizontal del `viewBox` para layouts amplios.
trazo SVG controlado con JavaScript
Demo Compara el enfoque con JS para entender cuándo necesitas medir el path y cuándo CSS te basta.
scroll reveal con líneas SVG
Demo Combina `view()` y trazos SVG para revelar formas y recorridos a medida que el bloque entra en pantalla.
glassmorphism generator
Demo Regula blur, opacidad, borde y sombra para encontrar un panel glass legible y defendible en producto.
botones hover avanzados
Demo Explora varios patrones de hover con `::before`, `::after`, capas y transiciones para CTAs más expresivos.
laboratorio visual de Flexbox
Demo Explora una demo amplia para entender ejes, alineación, wrapping y reparto del espacio en un layout real.
juega con Grid
Demo Cambia columnas, gap y alineación y observa el layout en vivo.
cómo se comporta relative
Demo Ajusta offsets y observa que el elemento se mueve visualmente, pero conserva su espacio en el flujo.
absolute y su contenedor de referencia
Demo Comprueba cómo cambia el anclaje cuando el padre es `relative` y cuándo deja de serlo.
cómo se comporta fixed
Demo Mueve un elemento fijado al viewport y observa cómo permanece visible mientras el contenido hace scroll.
sticky y su umbral de anclaje
Demo Visualiza el momento exacto en que el elemento pasa de seguir el flujo a quedarse pegado.
position en contexto real
Demo Compara `static`, `relative`, `absolute`, `fixed` y `sticky` dentro de una demo completa con scroll y capas.
popover y dialog con capas modernas
Demo Observa cómo dialog, popover y posicionamiento trabajan juntos para crear overlays más robustos.
tooltip nativo y popover contextual
Demo Observa cómo el overlay sigue al trigger con soporte nativo y cómo cambia el enfoque cuando el navegador necesita fallback.
transformaciones 3D guiadas por scroll
Demo Explora rotaciones en X/Y, profundidad y `preserve-3d` en una demo inmersiva controlada por el desplazamiento.
tres tipos registrados
Demo Explora cómo `@property` desbloquea un cambio de tono, una rotación angular y una barra de progreso sin JavaScript.
before y after real
Demo Compara un acordeón resuelto con `max-height` frente a otro que anima `height: auto` con `interpolate-size`.
scroll snap y navegación por secciones
Demo Explora una experiencia completa con snap vertical, carruseles horizontales y ritmo de lectura guiado.
scroll reveal solo con CSS
Demo Explora una demo completa basada en `view()` para ver entradas laterales, desde abajo y con escala sin depender de JavaScript.
líneas y progreso vinculados al scroll
Demo Visualiza barras, subrayados y trazos SVG sincronizados con `scroll()` y `animation-range`.
parallax solo con CSS
Demo Recorre una demo completa con varias capas de parallax para entender profundidad, ritmo y legibilidad visual.
slider con miniaturas y View Transitions
Demo Aplicación real de la API en una galería donde cambia la imagen principal sin perder continuidad visual.
masonry con grid-lanes y fallback
Demo Comprueba cómo un layout experimental puede apoyarse en `@supports` para activar `grid-lanes` solo cuando existe soporte, manteniendo una versión usable con `columns`.
Demo: menú brutalista con checkbox hack
Demo CSS puro con un look extremo y estructura fácil de diseccionar.
Demo: menú glassmorphism con altura interpolada
Demo El JS mide scrollHeight y lo usa como height real para lograr una apertura precisa, más limpia que el hack de max-height.
Demo: menú terminal con details y summary
Demo Patrón nativo muy útil para entender disclosure sin JS.
Demo: menú editorial con Grid adaptable
Demo Caso donde no hace falta hamburguesa porque el layout responde bien por sí solo.
Demo: menú cyberpunk con WAAPI
Demo Usa element.animate() con stagger en los enlaces, un buen ejemplo de cuándo la animación programática sí aporta valor.
Demo: menú swiss con @starting-style
Demo Muestra cómo animar desde display: none con CSS moderno usando @starting-style y transition-behavior: allow-discrete.
Demo: menú art déco con Popover API
Demo Gran ejemplo de API nativa para abrir y cerrar sin escribir controladores personalizados.
Demo: menú orgánico con dialog
Demo Menú a pantalla completa que aprovecha foco y Escape nativos.
Demo: menú industrial con aria-expanded
Demo Uno de los patrones más profesionales para conectar accesibilidad y estilo con la misma fuente de verdad.
Demo: menú lúdico con :has()
Demo El padre reacciona al estado del checkbox con :has(), un patrón más flexible que el combinador ~ para estudiar selectores modernos.
hover avanzado para cards
Demo Explora patrones visuales de cards premium con overlays, glass panels, spotlight y tilt suave.
Demo: card brutalista
Demo Ideal para interfaces con energía alta, bordes contundentes y jerarquía directa.
Demo: card glassmorphism
Demo Útil cuando buscas profundidad ligera y una capa visual más premium.
Demo: card editorial horizontal
Demo Gran referencia para piezas de contenido donde la imagen y el titular deben convivir con ritmo.
Demo: card polaroid retro
Demo Muestra cómo una composición imperfecta puede reforzar una marca nostálgica o creativa.
Demo: card neomórfica
Demo Caso útil para estudiar relieve, sombras blandas y lectura de superficies.
Demo: card tilt 3D
Demo Ejemplo de JS accesorio al servicio de una ilusión espacial basada en CSS 3D.
Demo: card reveal con clip-path
Demo Buena referencia para overlays y descubrimiento progresivo de contenido.
Demo: card tipo ticket
Demo Muestra cómo un componente puede contar una historia material con perforaciones y textura.
Demo: card minimal dark
Demo Patrón muy útil para producto digital, portfolio técnico y dashboards con tono sobrio.
Demo: card asimétrica
Demo Una referencia clara de cómo romper la retícula sin perder legibilidad.
Demo: slider con translateX
Demo Todos los slides viven en una tira horizontal y el JS calcula translateX(-N * 100%) para mover el track con control total del easing.
Demo: slider fade con opacity
Demo Los slides están apilados con position: absolute y cambiar de escena consiste en alternar la clase active para pasar de opacity 0 a 1.
Demo: slider con scroll-snap
Demo El swipe táctil funciona de forma nativa con scroll-snap-type: x mandatory y scroll-snap-align: start; el JS solo apoya botones y dots.
Demo: slider con clip-path
Demo El slide nuevo se revela con clip-path: inset() como una cortina; es perfecto para estudiar dirección de entrada y narrativa visual.
galería de celdas cuadradas con relleno exacto
Demo Explora un mosaico que calcula el reparto de columnas y filas para ocupar todo el lienzo manteniendo celdas cuadradas y overlays limpios.
mosaico de fondo con imágenes no cuadradas
Demo Observa cómo una galería puede usar `background-image` para cubrir el espacio completo sin deformar el ritmo general del grid.
retícula cerrada de 60 miniaturas
Demo Compara una galería de número fijo donde el grid busca el mejor reparto posible de columnas y filas sin perder celdas cuadradas ni ritmo visual.