Colección de casos
Elija un caso completo para ver directamente el resultado, modificar el código fuente y ejecutarlo en el navegador.
CSS Botón degradado
Un conjunto de botones degradados modernos con brillo fluido, contorno y retroalimentación al pulsar.
Abrir y ejecutarCuadro de diálogo modal
Usa el elemento nativo dialog para crear un cuadro de confirmación accesible.
Abrir y ejecutarPanel acordeón
Componente de acordeón de preguntas frecuentes con operación mediante teclado y despliegue suave.
Abrir y ejecutarCambio de pestañas
Componente de pestañas con navegación por teclas de flecha y animación de cambio de contenido.
Abrir y ejecutarTabla de datos adaptable
Lista de pedidos que cambia automáticamente entre tablas de escritorio y tarjetas de información móviles.
Abrir y ejecutarLínea de tiempo vertical
Una línea de tiempo adaptable para mostrar el progreso del proyecto y los hitos clave.
Abrir y ejecutarCuadrícula de tarjetas adaptable
Usa CSS Grid para crear tarjetas temáticas de viaje que se reordenan automáticamente.
Abrir y ejecutarMenú desplegable de navegación
Navegación responsiva que combina el hover en escritorio y el toque en móviles.
Abrir y ejecutarAnimación de carga creativa
Efecto visual de pulsación de órbita y progreso de carga hecho solo con CSS.
Abrir y ejecutarAnimación de texto a máquina de escribir
Usa una animación por pasos con CSS para simular que el texto aparece carácter por carácter y que el cursor parpadea.
Abrir y ejecutar3D tarjeta plegable
Tarjeta de información tridimensional que se puede manejar con ratón, pantalla táctil y teclado.
Abrir y ejecutaranimación de taichí giratorio
Un taiji yin-yang dibujado y girado solo con la figura CSS.
Abrir y ejecutarCuenta regresiva de eventos
Temporizador de cuenta regresiva que permite configurar minutos y admite pausar, continuar y reiniciar.
Abrir y ejecutarCalculadora sencilla
Calculadora básica de las cuatro operaciones con entrada por teclado y operaciones continuas.
Abrir y ejecutarbúsqueda en lista en tiempo real
Filtra ciudades al instante introduciendo palabras clave y resalta los resultados coincidentes.
Abrir y ejecutarValidación instantánea de formularios
Formulario de registro con estado en tiempo real, avisos de error y retroalimentación de envío.
Abrir y ejecutarEfecto romántico de nieve cayendo
Un escenario de nieve a pantalla completa en Canvas con cantidad de nieve y dirección del viento ajustables.
Abrir y ejecutarEfecto de fuegos artificiales en Canvas
Haz clic en el cielo nocturno para desatar un efecto interactivo de partículas con coloridos fuegos artificiales.
Abrir y ejecutarReloj analógico
Un elegante dial mecánico que gira en tiempo real según la hora local.
Abrir y ejecutarEfecto de estela de partículas
Partículas de puntos de luz de color que fluyen siguiendo el movimiento del ratón o del dedo.
Abrir y ejecutarSelector segmentado de sala de reuniones
Completa un selector segmentado en un entorno de sala de reuniones: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.
Abrir y ejecutarFormulario de validación en vivo para inscripción de voluntarios
Valida de forma inmediata un formulario para una inscripción de voluntariado: incluye contenido real, controles interactivos, feedback de estado claro y un diseño adaptable a distintos tamaños.
Abrir y ejecutarMenú principal adaptable de la guía del museo
Completa un menú principal adaptable en un escenario de guía de museo: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.
Abrir y ejecutarCuadro de diálogo de confirmación de revisión de documentos
Completa un cuadro de diálogo de confirmación en un escenario de revisión de documentos: incluye contenido real, controles accionables, comentarios de estado claros y un diseño adaptable a varios tamaños.
Abrir y ejecutar