材料设计最近遍地都是。 它的一部分包括像真正的纸张一样在彼此之上堆叠层。 为了在CSS中实现这种效果,我们需要使用box-shadow
属性。
为了避免每次都必须手动写入阴影,我们可以为其构建一个小的Sass mixin。 这个mixin唯一要做的就是根据给定的$depth
(从0到5)输出一个box-shadow
声明。 阴影实际上将由两个函数计算: 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 < 1 {
box-shadow: none;
} @else 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;
}
在CodePen上查看 Hugo Giraudel( @HugoGiraudel )的“笔材质”阴影 。
翻译自: https://css-tricks.com/snippets/sass/material-shadows-mixin/