Módulo 3: Neumorphism con Bootstrap

¿Qué es Neumorphism?

Neumorphism (una mezcla de "new" y "skeuomorphism") crea un aspecto en relieve o "presionado" usando sombras duales. Los elementos parecen estar suavemente presionados o elevados del fondo, como arcilla suave.

Principio Clave: El color de fondo debe coincidir con el color del elemento para una integración perfecta. ¡var(--bs-body-bg) de Bootstrap ayuda a mantener la consistencia!

Técnica Bootstrap + Neumorphism

HTML con Bootstrap:

<button class="btn neu-button btn-lg">
Haz Clic - Botón Neumórfico
</button>

<input type="text" class="form-control neu-input"
placeholder="Escribe aquí...">

CSS Personalizado para Neumorphism:

.neu-button {
  background: var(--bs-body-bg);
  border-radius: var(--bs-border-radius-lg);

  /* Sombras duales */
  box-shadow:
    8px 8px 15px rgba(190, 190, 190, 0.8),
    -8px -8px 15px rgba(255, 255, 255, 0.9);
}

.neu-button:active {
  /* Inset para efecto presionado */
  box-shadow:
    inset 8px 8px 15px rgba(190, 190, 190, 0.8),
    inset -8px -8px 15px rgba(255, 255, 255, 0.9);
}

✅ Utilidades Bootstrap Usadas

btn, btn-lg – Componente botón
form-control – Estilo de formulario
var(--bs-body-bg) – Consistencia de color
var(--bs-border-radius-lg) – Esquinas redondeadas
card, card-body – Estructura de card

💡 Cómo Funciona

Dos sombras en ángulos opuestos simulan luz 3D
Sombra oscura (abajo-derecha) = lado de sombra
Sombra clara (arriba-izquierda) = lado iluminado
inset hace que las sombras vayan hacia adentro (presionado)
Variables Bootstrap aseguran consistencia de tema

Ejemplos Interactivos

Botones Neumórficos

Intenta hacer clic: Nota cómo la sombra cambia de externa a interna, creando un efecto presionado. La clase btn de Bootstrap proporciona el estilo base.

Formularios Neumórficos

Tu Nombre

Correo Electrónico

Mensaje

Sombras internas: Los campos de formulario usan sombras internas por defecto, haciéndolos aparecer hundidos en la superficie. form-control de Bootstrap proporciona la estructura.

Interruptor Neumórfico

Haz clic para alternar

Componente personalizado: Interruptor de alternancia CSS puro con estilo neumórfico. Combina botón elevado con pista hundida.

Comparación Visual

Diseño Plano

Sin sombras

Elevado (Externo)

Neumórfico Elevado

Presionado (Interno)

Neumórfico Presionado

Avanzado: Glassmorphism + Neumorphism

🎨 Efecto Híbrido

Combina sombras neumórficas con desenfoque de glassmorphism para una UI futurista y en capas. Esta técnica funciona mejor con fondos coloridos o texturizados.

Consejo profesional: Úsalo para cards de productos premium, widgets de dashboard o portafolios creativos. La combinación crea profundidad e interés visual mientras mantiene estéticas modernas.

🧠 Reflexión Atelier

¿La sensación táctil del neumorphism mejora la interacción del usuario, o solo agrega complejidad visual? Considera: ¿Cómo afecta el bajo contraste a la accesibilidad? ¿Cuándo es apropiado este estilo vs. cuándo es mejor un diseño plano más simple?

Ventaja de Bootstrap: Usar propiedades personalizadas CSS como var(--bs-body-bg) asegura que los elementos neumórficos se adapten a cambios de tema. ¡Si cambias a modo oscuro, las sombras se ajustan automáticamente!