सामग्री छाया मिश्रण - सीएसएस-ट्रिक्स

सामग्री डिजाइन सभी जगह हाल ही में किया गया है। इसका एक हिस्सा वास्तविक पेपर शीट की तरह एक-दूसरे के ऊपर परतों को समेटने पर बना होता है। CSS में इस तरह के प्रभाव को प्राप्त करने के लिए, हमें box-shadowसंपत्ति का उपयोग करने की आवश्यकता है ।

हर बार छाया को मैन्युअल रूप से लिखने से बचने के लिए, हम इसके लिए थोड़ा सास मिक्सिन बना सकते हैं। इस मिश्रण को करने वाली एकमात्र चीज़ 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; )

कोडपेन पर ह्यूगो जिराउडेल (@HugoGiraudel) द्वारा पेन सामग्री छाया देखें।