Ο σχεδιασμός υλικών έχει γίνει παντού τον τελευταίο καιρό. Το ένα μέρος του αποτελείται από στοίβαγμα στρώσεων το ένα πάνω στο άλλο, όπως πραγματικά φύλλα χαρτιού. Για να επιτύχουμε ένα τέτοιο αποτέλεσμα στο CSS, πρέπει να χρησιμοποιήσουμε την box-shadowιδιότητα.
Για να αποφύγετε να γράφετε τις σκιές χειροκίνητα κάθε φορά, μπορούμε να φτιάξουμε λίγο Sass mixin για αυτό. Το μόνο πράγμα που θα κάνει αυτό το mixin είναι να εκδώσει μια box-shadowδήλωση βάσει του δεδομένου $depth(από 0 έως 5). Οι σκιές θα υπολογιστούν από δύο συναρτήσεις: bottom-shadowκαι 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); ) )Ας μην ξεχνάμε τις δύο λειτουργίες μας:
/// 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; )Δείτε τη σκιά Pen Material από τον Hugo Giraudel (@HugoGiraudel) στο CodePen.