Reka Bentuk Bahan sejak kebelakangan ini. Salah satu bahagiannya terdiri daripada meletakkan lapisan di atas satu sama lain seperti kepingan kertas sebenar. Untuk mencapai kesan seperti itu dalam CSS, kita perlu menggunakan box-shadowharta benda.
Untuk mengelakkan menulis bayangan secara manual setiap kali, kita boleh membina sedikit mix Sass untuknya. Satu-satunya perkara yang akan dilakukan oleh mixin ini ialah mengeluarkan box-shadowdeklarasi berdasarkan yang diberikan $depth(dari 0 hingga 5). Bayangan sebenarnya akan dihitung oleh dua fungsi: bottom-shadowdan 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); ) )Jangan lupa dua fungsi kami:
/// 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; )Lihat bayangan Bahan Pen oleh Hugo Giraudel (@HugoGiraudel) di CodePen.