📛 Nombre en la Industria: Glassmorphism UI / Frosted Glass Effect
🔮 El Concepto
El Glassmorphism utiliza la propiedad backdrop-filter para difuminar el fondo, creando una sensación de profundidad. Aquí te explico cómo logré este efecto y cómo funcionan las micro-interacciones de física.
👁️ Demo en Vivo
Pasa el mouse por encima (o toca) los botones para ver el efecto neón y el desenfoque.
🛠️ Desglose Técnico
1. El Efecto de Vidrio (CSS)
La clave es combinar un fondo semi-transparente con el filtro de desenfoque.
.nav-container {
background: rgba(255, 255, 255, 0.05); /* Transparencia */
backdrop-filter: blur(10px); /* Desenfoque del fondo */
border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
}
- Micro-Interacciones (Física) Para evitar que la animación se sienta robótica, utilizo curvas de Bézier cúbicas. Esto da una sensación de inercia y peso al elemento.
.nav-item {
/* La curva cubic-bezier crea el efecto de 'rebote' suave */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover {
transform: translateY(-2px); /* Elevación */
box-shadow: 0 0 15px rgba(0, 242, 254, 0.3); /* Glow Neón */
}
