看《CSS揭秘》记录:
主要思路是使用一连串累加的投影,不设模糊并以1px的跨度逐渐错开,使颜色逐渐变暗,然后在底层加一层强烈的暗投影,从而模拟完整的立体效果。
如下 文字:
<div>
The only way to get rid of temptation is to yield to it.
</div>
添加的样式如下:
div {
background-color: #58a;
color: #fff;
text-shadow: 0 1px hsl(0, 0%, 85%),
0 2px hsl(0, 0%, 80%),
0 3px hsl(0, 0%, 75%),
0 4px hsl(0, 0%, 70%),
0 5px hsl(0, 0%, 65%);
}
效果:
改进:
div {
background-color: #58a;
color: #fff;
text-shadow: 0 1px hsl(0, 0%, 85%),
0 2px hsl(0, 0%, 80%),
0 3px hsl(0, 0%, 75%),
0 4px hsl(0, 0%, 70%),
0 5px hsl(0, 0%, 65%),
0 5px 10px black; /* 这一行是修改的地方 */
}
效果:
在SCSS 中可以这样来做:
@mixin text-3d($color: white, $depth: 5) {
$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);
}
这种效果还有很多变种。比如把所有的投影都设成黑色,并且去掉最底层的投影,就可以模拟出一种在复古标志牌中常见的文字效果
div {
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;
}
效果:
把这些代码转换成mixin 甚至比前面的例子更加容易,不过在这个例子中用函数来组织代码可能更合适:
@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);
}
@return $shadows;
}
h1 {
color: white;
background: hsl(0, 50%, 45%);
text-shadow: text-retro();
}