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:
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