Shadows

Mixin for applying shadows to elements.

Shadow implementation is a very commonly used property in 2600Hz's project mockups, because it generates better contrast between elements or giving a 3D effect to overlaid elements. Given how often it's used, Sipster-Core offers a mixin to facilitate the shadows' implementation in different levels:

@include sds-shadow("value");

For this mixin to work, replace the "value" param in the mixin using the following table:

Value

CSS Value

0

box-shadow: none

1

box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16)

2

box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.24)

3

box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.32)

Last updated