Sombras

Como crear una escala de elevacion para las sombras del producto

Dmitriy Hulak
Dmitriy Hulak
5 min de lectura0 vistas

Como crear una escala de elevacion para las sombras del producto

La calidad de una sombra no depende de encontrar un valor "perfecto". Depende de construir un sistema estable.

Escala minima util

  • elevacion 1 para superficies en reposo;
  • elevacion 2 para cards interactivas;
  • elevacion 3 para popovers y bloques flotantes;
  • elevacion 4 para modales y capas criticas.

Cierre

Cuando defines una escala de elevacion, la profundidad deja de ser improvisacion y pasa a formar parte del sistema visual. Eso hace que el producto se sienta mucho mas consistente.

Publicaciones relacionadas

Sigue leyendo sobre temas relacionados.

Sombras realistas para cards sin exagerar el blurComo crear profundidad realista en cards usando capas de sombra, spread controlado y opacidad coherente, en lugar de un blur gigante.Dominar CSS box-shadow: guia completaAprende todo sobre CSS box-shadow desde lo basico hasta tecnicas avanzadas. Crea profundidad, neumorphism y sombras mas realistas.Tokens de sombra para un sistema de diseño estable entre varios equiposEstandariza los tokens de sombra entre equipos para que los componentes mantengan una profundidad coherente y sean mas faciles de evolucionar.Inset shadows vs drop shadows: cuando usar cada unaEntiende la diferencia entre inset y drop shadows para crear profundidad, estados presionados y elementos UI mas creibles.

Comments

0

Sign in to leave a comment.

No comments yet. Be the first.