使用CSS文本阴影创建压纹文本

dingshi7798

于 2010-04-22 00:00:00 发布

阅读量98

点赞数

text-shadow属性在文本下方创建阴影，从名称中可以明显看出该阴影！它在语法和功能上与box-shadow类似，但它遵循单个字母的形状，而不是围绕元素的边界框进行渲染。和颜色：

text-shadow:3px 3px 1px #999;

…及其对应的图像：现在我不认识你，但是在任何情况下我都不希望我的文字看起来像那样！我从来没有在需要这种效果的设计上工作过，而且我认为它看起来也不是很好。这很俗气-就像您在垃圾邮件中或在Geocities网站上所看到的那样。

一抹课

但是text-shadow 是一个特定的任务非常有用，这似乎是几乎完全就是它的使用在野外- 创建浮雕文字是这样的：

它具有以下阴影属性：

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

仔细地做，不要太粗鲁，效果会很吸引人；它使按钮和标题等功能性文本更加生动有趣。您可以在此页面上看到一些示例：

橙色按钮，例如顶部搜索表单中的“搜索”按钮，或右侧栏中用于订阅新闻通讯的“订阅”按钮
海军标题的框，例如我们刚才提到的“新闻简报注册”框，说“在收件箱中获取专家提示”，或顶部附近的类别标签

那么它是怎样工作的？

灯光和阴影

阴影和深度效果是通过模拟光线和阴影来创建的，因此可以得出以下两种基本方法，即使用text-shadow来创建浮雕效果：

正白阴影 ，可在字母底部产生光的感觉，本质上是：
```
text-shadow:1px 1px 0 white;
```
负的黑色阴影 ，在字母顶部产生阴影效果：
```
text-shadow:-1px -1px 0 black;
```

但是出现的问题是，要达到真实的效果， 很难找到正确的阴影平衡 ，要应用多少阴影。太微妙了，用肉眼几乎看不见。太明显了，它开始看起来像一个阴影。不幸的是，要获得正确效果最困难的效果之一是在浅色背景上显示深色文本 ，尤其是因为文本阴影是在字体外部而不是字体顶部呈现的。

技巧和窍门

那么，我们该怎么做才能使效果更逼真-使其看起来更像浮雕或雕刻-而不像大的丑陋阴影？这是我的提示：首先，请使用RGBA颜色值 ，以使效果具有部分不透明度。这样可以使其与背景更好地融合，并让您更好地控制效果的强度。（尽管RGBA颜色缺少IE中的支持，但这是学术性的，因为它始终不支持此属性。）不要在x和y方向上都偏移阴影，因为它在视觉上太多了。如果仅在y方向上偏移，则看起来更好，就好像光线在上方一样，然后根据要使用的颜色组合使用不同的阴影：

对于彩色（但不是很暗）背景上的浅色文本，请使用不透明度从0.25到更高的深色负阴影（值越高，效果越明显）。在这里，我还使用1px模糊半径稍微柔化了效果：
```
#light-on-color{    background:#f60;    color:#fff;    text-shadow:0 -1px 1px rgba(0,0,0,0.5);}
```
对于浅色（而不是白色）背景上的彩色文本，请使用具有较高不透明度的浅色正阴影：
```
#color-on-light{    background:#eea;    color:#229;    text-shadow:0 1px 0 rgba(255,255,255,0.75);}
```
其他组合则比较棘手：对于很暗的背景或带有非常暗的文本，暗阴影将无效；对于带有亮的背景或文本的浅阴影，暗阴影将无效。但是经过一堆实验后，我认为最好的效果是将明暗阴影巧妙地结合在一起 。在深色阴影上添加低透明度，在浅色阴影上添加高透明度，并向背景阴影稍加倾斜（因此，对于浅色背景上的深色文本，请使用更多的浅色阴影，并减少深色；反之亦然）。与此类似：
```
#dark-on-light{    background:#eee;    color:#223;    text-shadow:0 -1px 0 rgba(0,0,0,0.15),                0 1px 0 rgba(255,255,255,0.8)}#light-on-dark{    background:#223;    color:#eee;    text-shadow:0 -1px 0 rgba(0,0,0,0.3),                0 1px 0 rgba(255,255,255,0.4)}
```
您可以越远离任何一种极端（也就是朝着较浅的深色或较浅的深色），最终效果应该越好。

这些最后的例子远非完美，其效果仅微不足道（这就是我们阻止它看起来太像阴影的方式）。但是我认为它们充分利用了尴尬的颜色组合，因此考虑所有因素，它们看起来都还不错。我将演示页面与所有这四个示例放在一起，我认为它们的外观是好的。