La pantalla es plana. Totalmente plana. No hay relieve. No hay volumen. Y, sin embargo, las interfaces bien hechas consiguen que ciertas tarjetas parezcan flotar.
¿Magia?
No. box-shadow.
box-shadowLa propiedad box-shadow añade una sombra alrededor de una caja. Suele escribirse así:
Estos valores significan:
0: desplazamiento horizontal10px: desplazamiento vertical20px: desenfoquegray: color de la sombraLa sombra baja un poco, se difumina y hace que el elemento parezca separado del fondo.
Una sombra sutil aporta profundidad. Una sombra descontrolada hace que tu tarjeta parezca una nave espacial intentando aterrizar.
Con CSS, muchas veces el truco está en hacer un poco menos de lo que tu primer impulso quería hacer.
Haz que .carta tenga box-shadow: 0 10px 20px gray.
Acabas de convencer al ojo humano de que una caja flotaba. Nada mal...