Componentes CSS

Qué es esta galería y en qué se diferencia

Cada componente de esta sección existe dos veces: como demostración que puedes ver y tocar, y como bloque de código que puedes copiar. Las dos versiones salen del mismo archivo, así que lo que copias es exactamente lo que estás viendo — no una aproximación, no una versión simplificada.

Los fragmentos no dependen de nada: ni de una librería de CSS, ni de un framework de JavaScript, ni de las hojas de estilo de este sitio. Cada receta lleva sus valores escritos dentro, con nombres de clase propios que no chocan con los tuyos. Pega el CSS, pega el HTML y ya está funcionando.

Cómo usar un componente en tu proyecto

1. Entra en la categoría que necesitas y localiza la pieza en la galería.
2. Pulsa Copiar CSS (y Copiar HTML si la estructura importa). Si la pieza necesita JavaScript, el botón Copiar JS aparece al lado — nunca son más de 25 líneas.
3. Pega el código en tu proyecto y ajusta los colores a tu marca: cada receta concentra sus valores al principio para que el cambio sea rápido.

Hechos para durar, no para impresionar en la demo

Es fácil hacer un componente que se ve bien en una captura. Lo difícil es que sobreviva al mundo real, y ahí es donde estas recetas ponen el cuidado: los botones tienen área táctil de 44 píxeles y estados de foco visibles, los interruptores y checkboxes siguen siendo controles nativos por debajo del CSS —con teclado y lector de pantalla funcionando—, y todas las animaciones respetan la preferencia de movimiento reducido del sistema.

Empieza por la categoría que te toca

Si estás montando una portada, ve directo a bento grid y superficies. Si peleas con un panel de administración, datos y formularios. Y si tu interfaz ya funciona pero se siente muerta, microinteracciones es la sección que le da el pulso.

Las demás categorías

La familia completa, cada una con sus piezas y su código: formas y recortes, vidrio y neón, bento grid, botones y controles, tarjetas, formularios, datos y métricas, microinteracciones.

Preguntas frecuentes

¿Puedo usar estos componentes en proyectos comerciales?

Sí. Todo el código de esta galería puede usarse en proyectos personales y comerciales sin atribución, igual que el resto de recursos del sitio. Las condiciones completas están en la Licencia Lienzo.

¿Necesito instalar algo para que funcionen?

No. Cada componente es CSS puro (y a veces unas líneas de JavaScript vanilla, incluidas junto a la pieza). No hay dependencias, gestores de paquetes ni archivos de configuración.

¿Funcionan con Tailwind, Bootstrap o React?

Sí, porque no interfieren: las clases llevan el prefijo lz- precisamente para no chocar con las de tu framework. En React o Vue solo tienes que convertir el HTML a JSX o plantilla y pegar el CSS en tu hoja global o en un módulo.

¿Cómo cambio los colores a los de mi marca?

Cada receta concentra los valores de color al principio del bloque, muchas veces en variables CSS (--luz, --tinta). Cambia esos valores y toda la pieza se actualiza. No hay colores escondidos a mitad del código.

¿Los componentes son accesibles?

Es el criterio de la casa: controles nativos vestidos con CSS (nunca divs que fingen ser botones), foco visible, etiquetas ARIA donde hacen falta y animaciones que respetan prefers-reduced-motion. Aun así, la accesibilidad final depende del contexto donde los montes.

¿En qué navegadores funcionan?

En cualquier navegador moderno de los últimos años. Donde una técnica es más reciente (como :has() o los backdrop-filter), la receta lo aprovecha con degradación razonable; ninguna pieza depende de características experimentales.