Llevar un diseño con neomorfismo desde Figma hasta un código funcional requiere dominar tanto CSS Grid como Flexbox en conjunto. Aquí se explica paso a paso cómo construir la estructura HTML, aplicar una grid principal y dar vida a las tarjetas con sombras que generan ese efecto tridimensional tan característico del neomorfismo.
¿Cómo se construye el esqueleto HTML con un wrapper?
El punto de partida es crear un contenedor general llamado wrapper [0:52]. Este div envuelve todas las secciones de la página: header, secciones de contenido y footer. No requiere una etiqueta semántica especial porque su función es puramente estructural, no comunica significado al navegador.
Dentro de este wrapper se aplica display: grid para definir el esqueleto completo del layout [1:20]. La propiedad grid-template-rows permite establecer las filas necesarias:
- 60px para el header.
- 300px para la sección principal, siguiendo las medidas del diseño en Figma.
- Valores auto para las filas restantes, o bien usar la función
repeat(2, auto) [1:50].
Además, se asigna height: 100vh al wrapper para que ocupe toda la altura visible de la pantalla [2:03].
¿Por qué el inspector es tu mejor aliado?
El inspector del navegador es fundamental para verificar que la grid se está comportando como se espera [2:13]. Permite visualizar las filas, las columnas y los espacios asignados a cada elemento. Revisar constantemente con esta herramienta evita errores acumulados y da certeza sobre el avance.
¿Cuándo usar Flexbox dentro de una grid?
Dentro del header, solo existe un elemento: un párrafo con texto. Como se trata de una alineación unidimensional, lo adecuado es usar Flexbox en lugar de otra grid [3:07]. Se combinan ambas técnicas:
display: flex en el header.justify-content: center para centrar horizontalmente.align-items: center para centrar verticalmente.
Esta combinación de CSS Grid para la estructura general y Flexbox para la alineación interna es una práctica muy común y eficiente en maquetación moderna [3:15].
¿Cómo aplicar neomorfismo a las tarjetas con box-shadow?
Para construir una card con neomorfismo se crea un div dentro de una sección con clase cards [4:00]. Se le asignan dimensiones de 250px por 250px. Como el neomorfismo trabaja con el mismo color de fondo, la tarjeta inicialmente no se distingue del contenedor.
¿Qué es neumorphism.io y cómo ayuda?
La herramienta neumorphism.io [4:40] permite experimentar con sombras y fuentes de luz de forma visual. Se puede ajustar:
- La dirección de la luz (dónde se ilumina y dónde cae la sombra).
- El radio, la distancia y la intensidad.
- El blur (desenfoque) de la sombra.
Desde ahí se copia directamente el valor de box-shadow y se pega en el código [5:20]. El truco está en ajustar los colores de las dos sombras: una clara (#FFF) y una oscura (#000), intercambiándolas según el efecto deseado [5:40].
Para suavizar la apariencia se añade border-radius: 20px, replicando el valor definido en Figma [6:05]. El blur también se ajusta al diseño original, por ejemplo 15px [6:30], verificando directamente en las propiedades de sombra del archivo de Figma.
¿Cómo refinar las sombras del neomorfismo?
Las sombras se pueden suavizar jugando con la opacidad y variando los valores de blur [6:50]. Es un proceso de experimentación donde se busca el balance entre:
- Sombras demasiado duras o demasiado sutiles.
- Profundidad visual sin perder elegancia.
- Coherencia con los valores establecidos en el diseño.
Este proceso iterativo de ajuste entre el código y la herramienta visual es lo que permite conseguir un resultado fiel al prototipo.
El reto final es completar todas las cards del reproductor de música, organizar los shadows y practicar la maquetación. La práctica constante con estas técnicas de CSS Grid, Flexbox y neomorfismo es lo que permite avanzar tanto en diseño como en desarrollo de interfaces.
