12有趣的CSS文字阴影代码示例

排版是每个人都喜欢的网页设计玩具。一个特别有趣的工具，CSS让你玩你的类型是文字阴影，这看起来很简单，但可以用来创造一些显着的效果与一点创造力和创造力。

今天我们将运行几个文本阴影示例，您可以为自己的工作复制和粘贴。

基本阴影

该文字阴影属性是超级易于使用，并在所有运行良好的现代浏览器，甚至没有这么多的供应商名称！但是，使用Modernizr之类的工具，即使在旧版浏览器中也能帮助您降低高级CSS3效果，如果您需要后备支持。

句法

创建简单文本阴影的语法如下所示。你有四个变量可以使用，前两个设置你的阴影的位置，第三个设置模糊量和第四个阴影的颜色。

1 text-shadow: horizontal-offset vertical-offset blur color;

这样做就是一个例子，它的一个阴影已经向下移动了两个像素，右边是四个像素，三个像素的模糊，黑色的颜色是30％的不透明度。

1 text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

这是这个代码的结果，一个很好的简单的阴影，它本身是非常有吸引力的。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

为什么是rgba？

作为一个快速的注释，您不必使用rgba的阴影的颜色，但可以利用任何CSS颜色方法。但是，我发现rgba是影子的理想颜色设置，因为它增加了另一个维度。您不仅可以设置阴影的位置，模糊和颜色，还可以使用Alpha值设置其不透明度。

这实际上比使用其他颜色方法更容易，因为您通常可能要寻找一个体面的口音到背景颜色，这可能稍微更暗或更轻。使用rgba，您只需使用黑色或白色，并减少不透明度，将其与背景混合。

快速和肮脏的邮票

关于文字阴影的伟大之处在于，您实际上可以比您的平均投影更多地做更多的事情。例如，这是创建插入文本幻觉的一个快速伎俩。

你想要做的第一件事就是把你的文字颜色设置为比你的背景颜色稍暗的阴影。接下来，应用稍微的白色文字阴影，减少不透明度。

如您所见，我使用＃222的背景颜色，然后将文本设置为黑色，透明度为60％。最后，我的白色阴影被轻轻地向下放置，右边的透明度为10％。

1 2 3 4 5 6 7 8 body { background: #222; } #text h1 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }

硬阴影

记住，你根本不必模糊你的影子。由于其复古的性质，硬文本阴影实际上非常“在”，所以随时在您的设计中尝试他们。

1 text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

双影

当你意识到你不仅限于一个阴影时，真正的乐趣开始了。使用逗号分隔声明，您可以根据需要应用尽可能多的阴影！

这是语法的基本概要。请注意，在前两个阴影之后有一个逗号和最后一个阴影之后的分号。

1 text-shadow: shadow1, shadow2, shadow3;

将这一点付诸实践，这里有一个文本处理的例子，您现在将在网络上看到。这个想法基本上是应用两个阴影，其中第一个与您的背景颜色相同。

1 text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

结果几乎是一个复古的报纸感觉。

向下和遥远

一旦你开始真正分层阴影，结果很快变得越来越令人印象深刻。真的很容易开始创建一些漂亮的人造3D效果，您的网页设计精明的用户不会相信是实话。

在下面我使用了四个阴影，全都以不同程度的距离和模糊指向直下。

1 2 3 4 text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);

关闭重

这是另一个同样的想法的例子，这一次，三个阴影已经被更接近源头了。效果使您的文字看起来有点重。

1 2 3 text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

一点帮助

看看其他设计师做了什么，我发现两个很好的技术，我认为这是完美的这个职位。第一个来自Mark Dotto，第二个来自Gordon Hall。

马克·多托的严肃3D文本

这里有一个例子，我一直认为看起来真的令人印象深刻。它来自MarkDotto.com，并使用了令人印象深刻的十二个独立的阴影来拉低一个非常可信的3D效果。

1 2 3 4 5 6 7 8 9 10 11 12 text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

戈登·霍尔的真实插曲文本

注意在上面的例子中，我称之为我的技术“快速而肮脏”的凸版效果。这是因为有更多的参与方式来创建一些更加可信的重要文本。

Gordon使用了一些严肃的CSS voodoo，不但可以脱掉一个外在的阴影，而且也是一个真正的内在阴影。查看他的博客文章，了解该技术的完整解释。

1 2 3 4 5 6 background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;