文字css样式可用在网站建设上，3D效果，阴影效果

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

基本阴影

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

句法

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

将此付诸实践，这是一个示例，其阴影已向下移动两个像素，右四个像素具有三个像素模糊，黑色颜色为30％不透明度。

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

为什么选择rgba？

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

这实际上比使用其他颜色方法更容易，因为您可能通常需要寻找可能稍微更暗或更亮的背景颜色。使用rgba，您可以使用黑色或白色，并降低不透明度以将其与背景混合。

快速和肮脏的凸版印刷

关于文本阴影的好处在于，实际上你可以使用它们比平均阴影更多。例如，这是创建插入文本错觉的快速技巧。

您要做的第一件事是将文本颜色设置为比背景颜色稍暗的阴影。接下来，应用具有降低的不透明度的轻微白色文本阴影。

如您所见，我使用＃222的背景颜色，然后将文本设置为黑色，不透明度为60％。最后，我的白色阴影位于略微向下和向右的10％不透明度。

硬影

请记住，您根本不必模糊阴影。由于它们的复古性质，硬文字阴影实际上非常“正在”现在，所以请随意在您的设计中试验它们。

双影

当你意识到自己并不局限于一个阴影时，真正的乐趣就开始了。使用逗号分隔声明，您可以根据需要应用任意数量的阴影！

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

将此付诸实践，这是一个文本处理的例子，你现在可以在网上看到。这个想法基本上是应用两个阴影，第一个阴影与背景颜色相同。

结果几乎是老式报纸的感觉。

向下和遥远

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

下面我使用了一个高达四个阴影，所有阴影都指向不同程度的距离和模糊。

关闭和沉重

这是同一个想法的另一个例子，这次有三个阴影保持更接近源。这种效果使你的文字看起来更重一些。

一点帮助

环顾四周其他设计师所做的事情，我找到了两种我认为非常适合这篇文章的优秀技巧。第一个来自Mark Dotto，第二个来自Gordon Hall。

Mark Dotto的严肃3D文字

这是我一直认为看起来令人印象深刻的一个例子。它来自MarkDotto.com，利用令人印象深刻的十二个独立阴影来实现非常可信的3D效果。

戈登霍尔的真实插入文本

请注意，在上面的示例中，我将我的技术称为“快速而肮脏”的凸版印刷效果。那是因为有一种更为复杂的方式来创建一些更加可信的严重插入文本。

戈登使用一些严肃的CSS伏都教不仅可以拉出外阴影，还可以拉出真正的内阴影。查看他的博客文章，了解该技术的完整说明。

更多有趣的阴影

现在你已经对代码背后的逻辑有了一个很好的感觉，这里有一些我掀起的无聊解释的例子。随意窃取它们并在工作中使用它们！

发光的

超级英雄

多个光源

柔软的浮雕

结论

与大多数CSS效果一样，文本阴影在基本形式中实现起来非常简单，但如果您真正将一些工作放入其中，则可以采用各种不同的形式。使用逗号作为分隔符，您可以将CSS阴影堆叠在一起，以显着增加效果的兴趣和真实感。