Contexto

Estos elementos te permiten darles un buen acabado a los bordes y las esquinas de los elementos visuales de tu app web. Y, sobre todo, a nadie le gustan los bordes que sobresalen, ¿no? Bueno, excepto a los gatos. No sabemos con certeza que realicen pedidos online (todavía).

Radio del borde

Tarjeta y diálogos

La propiedad “border-radius” se puede utilizar para redondear las esquinas de los elementos de la interfaz. Puedes gestionar las tarjetas y los diálogos por separado:

• Las tarjetas son superficies que muestran contenidos o acciones, y pueden tener elementos encima, como imágenes y textos.
• Los diálogos se utilizan en ventanas emergentes, que son contenedores que se muestran en la parte superior del contenido y de la página.

Sombras

El uso principal de las sombras es elevar dos superficies a lo largo del eje Z (el eje de arriba a abajo). Las sombras más grandes implican que hay mayor elevación de la superficie en el eje Z. 

Por otro lado, la sombra de enfoque se utiliza como un borde que indica qué elemento se seleccionó. Esto es de especial utilidad para usuarios con diferentes afecciones que dificultan su visión y utilizan teclados para navegar por la app.

El único valor que afectará a tu marca es el color de la sombra de enfoque. Este debe utilizar los valores del color principal. No recomendamos cambiar ningún otro valor predeterminado, ya que se ajustaron para mejorar la funcionalidad.

Las sombras se definen mediante 6 propiedades:

• Desplazamiento X: empuja la sombra en el eje X (izquierda/abajo)
• Desplazamiento Y: empuja la sombra en el eje Y (derecha/abajo)
• Desenfoque: simplemente difumina la sombra y simula la distancia de la superficie a la fuente de luz. Cuanto más grande es el desenfoque, más clara es la parte exterior de la sombra.
• Propagación: contrasta la sombra en todas las direcciones. Al igual que el desenfoque, el contraste y la propagación se correlacionan directamente.
• Color: define el color de la sombra.
• Opacidad: define la transparencia del color.

Uso: tarjeta, modal, contenedores de directorio, navegación

Sombra corta 

Valores predeterminados:

• X: 0
• Y: 2
• Desenfoque: 4
• Propagación: 0
• Color: #2C2C31
• Opacidad: 10 %

Sombra larga 

Valores predeterminados:

• X: 0
• Y: 4
• Desenfoque: 10
• Propagación: 0
• Color: #2C2C31
• Opacidad: 15%

Sombra de enfoque 

Valores predeterminados:

• X: 0
• Y: 0
• Desenfoque: 0
• Propagación: 2
• Color: #F2613D
• Opacidad: 100 %