精通 CSS3 7 个您不容错过的炫酷文本阴影示例
4.89/5 (20投票s)
着眼于如何提高我们的技能，并研究如何使用 CSS3 构建一些令人惊叹的文本阴影。
我们一直在探索如何使用 CSS3 阴影的基础知识：box-shadow 和 text-shadow。今天我们将提高我们的技能，并探讨如何创建一些令人惊叹的文字阴影。
我从各种 Photoshop 教程中找到了一些关于阴影的想法——我很好奇是否可以用 text-shadow 实现类似的效果。
Internet Explorer 和 Windows 8
要亲自尝试所有这些示例并发挥您的文字阴影创意，请尝试下载 Internet Explorer 10。所有提到的技术也将适用于使用 HTML 和 JavaScript 构建的 Windows 8 的 Metro 风格应用。愿阴影与您同在！
街机之爱
在我们的第一个示例中，我们将尝试绘制一些炫酷的浮雕文字。我们将从简单的石灰绿色文本开始
color: hsl(80, 70%, 55%);
接下来，让我们添加一些浮雕效果，添加几个具有 1px 对角线偏移的阴影（注意阴影颜色与文本颜色的对比！）。
text-shadow: -1px -1px 0 hsl(80, 70%, 35%),
-2px -2px 1px hsl(80, 70%, 35%);
现在，我们将添加一些漂亮的细节——文本周围有一个浅白色模糊阴影，底部有一个深色阴影以柔化过渡。
text-shadow: 0 0 2px #fff,
-1px -1px 0 hsl(80, 70%, 35%),
-2px -2px 1px hsl(80, 70%, 35%),
-2px -2px 2px hsl(80, 10%, 15%);
接下来，让我们为文本添加一个基底。要实现这一点，我们需要扩展我们的阴影（这里我们使用 text-shadow 规则的第四个参数——喷涂距离）。
text-shadow: ...
-3px -3px 0 7px hsl(60, 10%, 65%),
-4px -4px 0 7px hsl(60, 10%, 65%),
-5px -5px 0 7px hsl(60, 10%, 65%),
-6px -6px 0 7px hsl(60, 10%, 65%);
最后，为了将文本放在背景上，我们在基底的底部添加一个深色模糊阴影。
text-shadow: ...
-7px -7px 4px 8px hsl(60, 10%, 40%),
-8px -8px 6px 9px hsl(60, 10%, 55%);
最终结果
color: hsl(80, 70%, 55%);
text-shadow: 0 0 2px #fff,
/*
embossed text */
-1px -1px 0 hsl(80, 70%, 35%),
-2px -2px 1px hsl(80, 70%, 35%),
/*
transition to substrate */
-2px -2px 2px hsl(80, 10%, 15%),
/*
substrate */
-2px -2px 0 7px hsl(60, 80%, 95%),
-3px -3px 0 7px hsl(60, 10%, 65%),
-4px -4px 0 7px hsl(60, 10%, 65%),
-5px -5px 0 7px hsl(60, 10%, 65%),
-6px -6px 0 7px hsl(60, 10%, 65%),
/*
shadow for substrate */
-7px -7px 4px 8px hsl(60, 10%, 40%),
-8px -8px 6px 9px hsl(60, 10%, 55%);
色彩的幸福
在第二个示例中，我们将重用第一个示例的一些想法：我们将创建多个多彩的基底，将它们堆叠成金字塔。我们将从非常简单的粉色文本开始。
color: hsl(330, 100%, 50%);
首先，让我们将其浮雕化。这次我们的“阴影”朝下，而且非常小，所以可以通过省略中间的 1px 偏移来减少应用的规则数量——但在对角线阴影的情况下，这种方法会导致锯齿效应。此外，我还会添加一些模糊来柔化到下一个基底的过渡。
text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),
0 3px 2px 0px hsla(330, 100%, 15%, 0.5);
接下来，让我们添加另一个具有不同色调值的扩展基底（请注意，我只更改垂直偏移、色调和喷涂距离）。
text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),
0 3px 2px 0px hsla(330, 100%, 15%, 0.5),
0 3px 0 3px hsl(350, 100%, 50%),
0 5px 0 3px hsl(350, 100%, 25%),
0 6px 2px 3px hsla(350, 100%, 15%, 0.5);
现在我们只需要重复几次相同的技巧，增加基底的大小并向正确的方向调整色调。
text-shadow: ...
0 6px 0 9px hsl(20, 100%, 50%),
0 8px 0 9px hsl(20, 100%, 25%),
0 9px 2px 9px hsla(20, 100%, 15%, 0.5),
...
0 15px 0 45px hsl(90, 100%, 50%),
0 17px 0 45px hsl(90, 100%, 25%),
0 17px 2px 45px hsla(90, 100%, 15%, 0.5);
最终结果
color: hsl(330, 100%, 50%);
text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),
0 3px 2px 0px hsla(330, 100%, 15%, 0.5),
/*
next */
0 3px 0 3px hsl(350, 100%, 50%),
0 5px 0 3px hsl(350, 100%, 25%),
0 6px 2px 3px hsla(350, 100%, 15%, 0.5),
/*
next */
0 6px 0 9px hsl(20, 100%, 50%),
0 8px 0 9px hsl(20, 100%, 25%),
0 9px 2px 9px hsla(20, 100%, 15%, 0.5),
/*
next */
0 9px 0 18px hsl(50, 100%, 50%)
0 11px 0 18px hsl(50, 100%, 25%),
0 12px 2px 18px hsla(50, 100%, 15%, 0.5),
/*
next */
0 12px 0 30px hsl(70, 100%, 50%),
0 14px 0 30px hsl(70, 100%, 25%),
0 15px 2px 30px hsla(70, 100%, 15%, 0.5),
/*
next */
0 15px 0 45px hsl(90, 100%, 50%),
0 17px 0 45px hsl(90, 100%, 25%),
0 17px 2px 45px hsla(90, 100%, 15%, 0.5);
巧克力
我创建的第三个示例是在尝试交替阴影时完成的。像往常一样，让我们从简单的棕色文本开始。
color: hsl(20, 100%, 20%);
第一步是实现经典的 3D 文字效果。
text-shadow: -1px 1px 0 0 hsl(20, 100%, 16%),
-2px 2px 0 0 hsl(20, 100%, 16%),
-3px 3px 0 0 hsl(20, 100%, 16%),
-4px 4px 0 0 hsl(20, 100%, 16%),
-5px 5px 0 0 hsl(20, 100%, 16%),
-6px 6px 0 0 hsl(20, 100%, 16%);
接下来，我决定通过降低亮度来使我的阴影变暗，并通过增加对角线偏移来增加阴影之间的空间。
text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%),
-2px 2px 0 0 hsl(20, 100%, 14%),
-4px 4px 0 0 hsl(20, 100%, 12%),
-6px 6px 0 0 hsl(20, 100%, 10%),
-8px 8px 0 0 hsl(20, 100%, 8%),
-10px 10px 0 0 hsl(20, 100%, 6%);
下一步是收缩阴影。通过使用收缩，您可以将阴影缩小到原始字符的某些部分（这也取决于字体、字号和其他属性）。结果是锯齿状的阴影效果。此外，请注意，由于每个阴影的对角线偏移和喷涂距离不同，我们会得到轻微的扭曲效果。
text-shadow: -0px 0px 0 0 hsl(20, 100%, 16%),
-2px 2px 0 -1px hsl(20, 100%, 14%),
-4px 4px 0 -2px hsl(20, 100%, 12%),
-6px 6px 0 -3px hsl(20, 100%, 10%),
-8px 8px 0 -4px hsl(20, 100%, 8%),
-10px 10px 0 -5px hsl(20, 100%, 6%);
让我们稍微柔化一下我们的阴影（也可以通过使用各种模糊半径和颜色来添加一些中间线）。
text-shadow: -0px 0px 1px 0 hsl(20, 100%, 16%),
-2px 2px 2px -1px hsl(20, 100%, 14%),
-4px 4px 2px -2px hsl(20, 100%, 12%),
-6px 6px 3px -3px hsl(20, 100%, 10%),
-8px 8px 2px -4px hsl(20, 100%, 8%),
-10px 10px 2px -5px hsl(20, 100%, 6%);
最后，在玩了这个示例几分钟后，我得到了以下结果……
最终结果
color: hsl(20, 100%, 20%);
text-shadow: 0 0 1px hsl(20, 100%, 18%),
-1px 1px 0 hsl(20, 100%, 16%),
-2px 2px 2px -1px hsl(20, 100%, 14%),
-4px 4px 2px -2px hsl(20, 100%, 12%),
-6px 6px 3px -3px hsl(20, 100%, 10%),
-8px 8px 2px -4px hsl(20, 100%, 9%),
-10px 10px 3px -5px hsl(20, 100%, 8%),
-12px 12px 2px -6px hsl(20, 100%, 7%),
-14px 14px 2px -7px hsl(20, 100%, 6%),
-15px 15px 2px -8px hsl(20, 100%, 5%),
-15px 15px 0 -8px hsla(20, 50%, 10%, 0.25);
奶油蛋糕
在第四个示例中，我们将为蛋糕制作奶油文本效果。仅文本。
color: hsl(35, 100%, 30%); background: hsl(35, 60%, 80%);
让我们从模糊开始。我添加了两个阴影：第一个（上面的）与文本具有相同的色调值，但饱和度较低；第二个（下面的）模糊度更高，更亮，半透明，我还将其色调值移到了红色。
text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),
0 0 4px 4px hsla(30, 100%, 55%, 0.5);
现在，让我们添加一些奶油色的基底（色调值移到黄色，亮度增加）。
text-shadow: ...
-1px 1px 2px 7px hsl(45, 60%, 95%);
在下一步，我们应该为基底添加一些立体感：我添加了一个新的阴影，其对角线偏移与文本颜色相同，但饱和度较低。请注意，此阴影比基底的扩展度小（4px 对 7px）。
text-shadow: ...
-3px 3px 1px 4px hsl(35, 70%, 30%);
最后一步：模糊基底以柔化与背景的过渡。
text-shadow: ...
-3px 3px 4px 8px hsla(30, 90%, 55%, 0.5);
最终结果
color: hsl(35, 100%, 30%);
background: hsl(35, 60%, 80%);
text-shadow: 0 0 2px 1px hsl(35, 70%, 30%),
/*
transition to substrate */
0 0 4px 4px hsla(30, 100%, 55%, 0.5),
/*
substrate */
-1px 1px 2px 7px hsl(45, 60%, 95%),
/*
adding volume */
-3px 3px 1px 4px hsl(35, 70%, 30%),
/*
transition to background */
-3px 3px 4px 8px hsla(30, 90%, 55%, 0.5);
塑料
我一直在玩最后一个示例，思考我可以在它上面做什么……与许多其他示例一样，最终结果取决于文本本身（大小、字体等）和应用的阴影效果。在我的第五个示例中，我使用的是 CabinSketch 字体。所以这是我们拥有的——它只是没有特殊效果的文本。
color: hsl(65, 60%, 20%); background: hsl(65, 60%,95%);
首先，我在文本周围添加了一些模糊（请注意，阴影比文本亮，结果文本看起来更亮、更饱和）。
text-shadow: 0 0 3px 2px hsl(65, 60%,75%);
接下来，让我们添加一些带有模糊效果的外边框（请注意，我使用了扩展和降低了亮度）。
text-shadow: 0 0 3px 2px hsl(65, 60%,75%),
0 0 1px 9px hsl(65, 60%, 20%);
嗯，这看起来太暗了——我将添加一个中间阴影来照亮我的文本。
text-shadow: 0 0 3px 2px hsl(65, 60%,75%),
0 0 1px 5px hsl(65, 60%,95%),
0 0 1px 9px hsl(65, 60%, 20%);
现在最有趣的一步——实际上，我不需要完整的外边框（基底），只需要其中的一部分。为了隐藏多余的细节，我将在基底之上绘制几个阴影（请注意，这些阴影尺寸较小，但对角线偏移更大）。
text-shadow: 0 0 3px 2px hsl(65, 60%,75%),
0 0 1px 5px hsl(65, 60%,95%),
6px 6px 4px 7px hsl(65, 60%,95%),
-4px -6px 4px 6px hsl(65, 60%,95%),
0 0 1px 9px hsl(65, 60%, 20%);
您也可以尝试添加一些柔化细节。
最终结果
color: hsl(65, 60%, 20%);
background: hsl(65, 60%,95%);
text-shadow: 0 0 3px 2px hsl(65, 60%,75%),
/*
light substrate */
0 0 1px 5px hsl(65, 60%,95%),
/*
blurring */
0 0 4px 4px hsla(65, 100%, 30%, 0.4),
/*
cutting substrate pieces */
6px 6px 4px 7px hsl(65, 60%,95%),
-4px -6px 4px 6px hsl(65, 60%,95%),
/*
dark outlining */
0 0 1px 9px hsl(65, 60%, 20%);
绘制
接下来的两个示例将为您揭示一些使用透明度的技巧。想想看：您将如何使用 text-shadow 在文本内部绘制东西？实际上，您不能使用 text-shadow 绘制内部阴影。应用于文本的所有阴影都会堆叠在一起，一个覆盖在另一个之上，而文本则绘制在所有阴影的顶部。因此，您需要以某种方式使文本消失……要做到这一点，您只需使文本透明！
color: transparent; background: hsl(0, 75%,45%);
现在，道路畅通无阻。请注意，我将使用白色绘制（所以唯一真正重要的是 100% 的亮度）。要在文本内部绘制，只需减小阴影的大小。
text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75);
让我们通过改变透明度、偏移量和大小来添加更多细节。
text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75),
-1px -1px 1px -4px hsla(0, 60%, 100%, 0.65),
1px 1px 1px -4px hsla(0, 60%, 100%, 0.65);
要加固形状，您可以添加一个扩展的模糊阴影。
text-shadow: ...
0 0 1px 2px hsla(0, 60%, 100%, 0.65);
您可以根据需要添加额外的细节。
最终结果
color:
transparent;
background: hsl(0, 75%,45%);
text-shadow: 3px 3px 1px -8px hsla(0, 60%, 100%, 0.75),
-1px -1px 1px -4px hsla(0, 60%, 100%, 0.65),
1px 1px 1px -4px hsla(0, 60%, 100%, 0.65),
/*
background */
0 0 1px 2px hsla(0, 60%, 100%, 0.65),
/*
additional details */
-3px -3px 1px 2px hsla(0, 60%, 100%, 0.25),
3px 3px 1px 2px hsla(0, 60%, 100%, 0.25);
上下
最后一个示例！我将继续玩弄透明度。我将从白色文本开始（我只是选择它使其可见）。
color: transparent;
首先，让我们添加一个经典的 3D 文字效果（您可以在这里调整透明度）。请注意中间阴影中增加的亮度值——我发现这是强调立体感的不错方法（尝试增加亮度使其更明显）。
text-shadow: 1px -1px hsla(0, 0%, 30%, .6),
2px -2px hsla(0, 0%, 30%, .7),
3px -3px hsla(0, 0%, 32%, .8),
4px -4px hsla(0, 0%, 30%, .9),
5px -5px hsla(0, 0%, 30%, 1.0);
现在，为了增加更多立体感，我将在顶部添加一个重复原始文本形状的阴影。
text-shadow: 0px 0px hsla(0, 0%, 50%, .5),
1px -1px hsla(0, 0%, 30%, .6),
...
最后，与底部部分类似，我将添加上部的 3D 阴影，但更透明且亮度更高（为了使这一部分更锐利，最上面的阴影绘制得透明度较低）。
text-shadow: -4px 4px hsla(0, 0%, 70%, .4),
-3px 3px hsla(0, 0%, 60%, .2),
-2px 2px hsla(0, 0%, 70%, .2),
-1px 1px
hsla(0, 0%, 70%, .2),
...
最终结果
color:
transparent;
text-shadow: -4px 4px hsla(0, 0%, 70%, .4),
-3px 3px hsla(0, 0%, 60%, .2),
-2px 2px hsla(0, 0%, 70%, .2),
-1px 1px hsla(0, 0%, 70%, .2),
0px 0px hsla(0, 0%, 50%, .5),
1px -1px hsla(0, 0%, 30%, .6),
2px -2px hsla(0, 0%, 30%, .7),
3px -3px hsla(0, 0%, 32%, .8),
4px -4px hsla(0, 0%, 30%, .9),
5px -5px hsla(0, 0%, 30%, 1.0);
注意
本文讨论的“text-shadow”属性定义在 CSS3 Text 模块中，该模块目前处于工作草案状态。虽然它似乎相当稳定，但细节仍可能发生变化。
text-shadow 的“spread-distance”值目前定义在 css4-text 的 ED 中。