Material Design ha estado por todos lados últimamente. Una parte consiste en apilar capas unas sobre otras como hojas de papel reales. Para lograr tal efecto en CSS, necesitamos usar la box-shadowpropiedad.
Para evitar tener que escribir las sombras manualmente cada vez, podemos construir un pequeño mixin Sass para ello. Lo único que hará este mixin es generar una box-shadowdeclaración basada en lo dado $depth(de 0 a 5). Las sombras se calcularán en realidad mediante dos funciones: bottom-shadowy 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); ) )No olvidemos nuestras dos funciones:
/// 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; )Vea la sombra de Pen Material de Hugo Giraudel (@HugoGiraudel) en CodePen.