O design de materiais está em todo lugar ultimamente. Uma parte consiste em empilhar camadas umas sobre as outras como folhas de papel reais. Para obter esse efeito em CSS, precisamos usar a box-shadowpropriedade.
Para evitar ter que escrever manualmente as sombras todas as vezes, podemos construir um pequeno mixin Sass para isso. A única coisa que este mixin fará é emitir uma box-shadowdeclaração baseada no dado $depth(de 0 a 5). As sombras serão realmente calculadas por duas funções: bottom-shadowe top-shadow.
/// Gives a card depth effect. /// @param (Number) $depth - depth level (between 1 and 5) /// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design /// @requires (function) top-shadow /// @requires (function) bottom-shadow @mixin card($depth) ( @if $depth 5 ( @warn "Invalid $depth `#($depth)` for mixin `card`."; ) @else ( box-shadow: bottom-shadow($depth), top-shadow($depth); ) )Não vamos esquecer nossas duas funções:
/// Computes a top-shadow for a card effect. /// @param (Number) $depth - depth level /// @return (List) @function top-shadow($depth) ( $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px; $blur: nth(1.5 3 10 14 19, $depth) * 4px; $color: rgba(black, nth(.12 .16 .19 .25 .30, $depth)); @return 0 $primary-offset $blur $color; ) /// Computes a bottom-shadow for a card effect. /// @param (Number) $depth - depth level /// @return (List) @function bottom-shadow($depth) ( $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px; $blur: nth(1 3 3 5 6, $depth) * 4px; $color: rgba(black, nth(.24 .23 .23 .22 .22, $depth)); @return 0 $primary-offset $blur $color; )Veja a sombra Pen Material de Hugo Giraudel (@HugoGiraudel) no CodePen.