Material Design war in letzter Zeit allgegenwärtig. Ein Teil davon besteht darin, Schichten wie echte Papierbögen übereinander zu stapeln. Um einen solchen Effekt in CSS zu erzielen, müssen wir die box-shadowEigenschaft verwenden.
Um zu vermeiden, dass die Schatten jedes Mal manuell geschrieben werden müssen, können wir ein kleines Sass-Mixin dafür erstellen. Das einzige, was dieses Mixin macht, ist die Ausgabe einer box-shadowDeklaration basierend auf dem Gegebenen $depth(von 0 bis 5). Schatten werden tatsächlich durch zwei Funktionen berechnet: bottom-shadowund 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); ) )Vergessen wir nicht unsere beiden Funktionen:
/// 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; )Sehen Sie den Stiftmaterialschatten von Hugo Giraudel (@HugoGiraudel) auf CodePen.