Material Design is de laatste tijd overal geweest. Een deel ervan bestaat uit het op elkaar stapelen van lagen als echte vellen papier. Om een dergelijk effect in CSS te bereiken, moeten we de box-shadoweigenschap gebruiken.
Om te voorkomen dat we de schaduwen elke keer handmatig moeten schrijven, kunnen we er een kleine Sass-mix voor maken. Het enige dat deze mixin zal doen, is een box-shadowdeclaratie uitvoeren op basis van het gegeven $depth(van 0 tot 5). Schaduwen worden feitelijk berekend door twee functies: bottom-shadowen 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); ) )Laten we onze twee functies niet vergeten:
/// 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; )Zie de schaduw van het penmateriaal door Hugo Giraudel (@HugoGiraudel) op CodePen.