Estilos Elevación
Elevación
La elevación es la distancia entre dos superficies en el eje Z. Material 3 la expresa con sombra y con un tono de superficie un poco distinto, para que funcione también en modo oscuro.
Nivel 36 dp
Los 6 niveles
Nivel 00 dp
Nivel 11 dp
Nivel 23 dp
Nivel 36 dp
Nivel 48 dp
Nivel 512 dp
Más elevación significa "más cerca del usuario": un diálogo está por encima de una tarjeta, y una tarjeta por encima del fondo. Úsala para separar, no para decorar.
Elevación por componente
| Nivel | Componentes típicos |
|---|---|
| 0 | Botones delineados y de texto, tarjetas delineadas, fondo |
| 1 | Tarjetas elevadas, botón elevado, hojas inferiores modales |
| 2 | Barra superior al desplazar, menús, barra de navegación inferior |
| 3 | FAB en reposo, diálogos, selectores de fecha y hora |
| 4 | FAB al pasar el mouse |
| 5 | Reservado para casos especiales |
Sombra y tono de superficie
En modo oscuro una sombra casi no se ve. Por eso Material 3 aclara un poco la superficie a medida que sube. Activa el modo oscuro en la demostración de arriba y compara.
Nivel 0
Nivel 3
Nivel 5
En CSS
/* Niveles de elevación (aproximación de las sombras de Material 3) */
:root {
--elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
--elev-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
--elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
--elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3);
--elev-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.3);
}
.tarjeta { box-shadow: var(--elev-1); }
.tarjeta:hover { box-shadow: var(--elev-2); }