Page 168 - css揭秘

加一层投影：

background: #58a;
color: white;
text-shadow: 0 1px hsl(0,0%,85%),
0 2px hsl(0,0%,80%),
0 3px hsl(0,0%,75%), 图 5-39
0 4px hsl(0,0%,70%), 已经十分接近了，但看起来还不
0 5px hsl(0,0%,65%), 够真实
0 5px 10px black;

试一试 play.csssecrets.io/extruded

这种繁琐冗长的代码正是 CSS 预处理器的 mixin 功能所要解决的问题。
我们在 SCSS 中可以这样来做：

@mixin text-3d($color: white, $depth: 5) { SCSS
$shadows: ();
$shadow-color: $color;

@for $i from 1 through $depth {
$shadow-color: darken($shadow-color, 10%);
$shadows: append($shadows,
0 ($i * 1px) $shadow-color, comma);
}

color: $color;
text-shadow: append($shadows,
0 ($depth * 1px) 10px black, comma);
}

h1 { @include text-3d(#eee, 4); }

这种效果还有很多变种。比如把所有的投影都设成黑色，并且去掉最
底层的投影，就可以模拟出一种在复古标志牌中常见的文字效果（参见图
5-40）：

color: white;
background: hsl(0,50%,45%);
text-shadow: 1px 1px black, 2px 2px black,
3px 3px black, 4px 4px black,
5px 5px black, 6px 6px black,
7px 7px black, 8px 8px black;
图 5-40
把这些代码转换成 mixin 甚至比前面的例子更加容易，不过在这个例子
复古风格的排印效果
中用函数来组织代码可能更合适：

SCSS
@function text-retro($color: black, $depth: 8) {
$shadows: (1px 1px $color,);

@for $i from 2 through $depth {
$shadows: append($shadows,
($i*1px) ($i*1px) $color, comma);

27 现实中的文字效果 137

඀ࠡ JOEC