颠覆网络35天 ─ 使用文字阴影来烘托效果

====================================

本文作者为Frederic Wenzel──Mozilla网站开发团队成员。

CSS属性text-shadow正如名字所示：生成轻微模糊的、移动的文字影像，而让整体的效果看起来好像是真实的文字阴影。

text-shadow属性最初出现在CSS 2的规范中，但是由于在当时并没有很好的做出定义，对于他的支持在CSS 2.1中又被废弃了。这个特性在CSS 3中重新被提出来，而现在已经在Firefox 3.5中获得实现。

怎么来做呢？

根据CSS 3的规范，text-shadow属性可以拥有下列赋值：


none | [<shadow>, ] * <shadow>,

<shadow>被定义为：


[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],

这里前面两个length表示水平方向和竖直方向上的位移，第三个length表示可选的模糊半径。描述他的最好办法就是举例说明。

我们可以简单的做一个阴影效果，例如：


text-shadow: 2px 2px 3px #000;

A simple shadow

（文中所有的举例都先使用真实的代码，但是可能您没有正在使用支持text-shadow的浏览器，所以会紧跟着一个正确效果的示例图片──这样您也可以比较您正在使用的浏览器同Firefox 3.5之间的区别。[译]由于图片中使用英文，所以示例部分就不翻译了，应该不影响效果）

如果您是一个硬轮廓的粉丝，您可以不使用模糊半径的参数，例如：


text-shadow: 2px 2px 0 #888;

I don’t like blurs

发光的文字和多重阴影

由于这个特性的灵活性，我们的乐趣并不只有这么一点点。通过改变文字位移、模糊半径，当然还有颜色，我们可以制造出缤纷绚丽的效果，例如发光效果的文字：


text-shadow: 1px 1px 5px #fff;

Glowing text

或者简单的模糊效果：


text-shadow: 0px 0px 5px #000;

Blurry text

最后，我们还可以添加“超过一个阴影”，绝对能帮助你制作出“超炫”的效果（引用自http://www.css3.info/preview/text-shadow/ css3.info）：


text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

Multiple shadows are hot

理论上来说，您可以叠加的text-shadow效果是不受数量限制的，想象一下吧～～

跟所有的CSS属性一样，完全可以使用JavaScript来随心所欲的改变text-shadow效果：

使用JavaScript显示阴影动画效果

开始/停止动画

性能、无障碍访问和跨浏览器兼容性

使用图片（或者更糟糕的使用Flash）来制作文字效果的年代已经过去了：

首先，使用文字代替图片来实现这种效果有很多好处。不使用图片可以节省很大一部分贷款和HTTP连接。在无障碍访问性上，使用屏幕阅读工具的人们和搜索引擎将会获益良多。同时，页面缩放功能将会有更好的效果，因为文字的缩放要比纯粹拉伸图片的像素缩放要更清晰美观。

第二，这个特性基本被主流现代浏览器兼容：

Opera从9.5版本开始就支持text-shadow。根据Mozilla开发者中心，Opera 9.x系列版本支持同一元素上叠加最多6次阴影效果。
Safari也从1.1开始添加了对该特性的支持（当然也包括那些使用WebKit为核心的浏览器）。
IE不支持text-shadow属性，但是能够很好的还原为正常文字显示。另外，如果想在MSIE中实现类似text-shadow的效果，可以使用微软的”Shadow”和”DropShadow”属性过滤器。
同MSIE类似，其他的、之前版本的浏览器都不支持这个特性（包括Firefox 3以及以前版本），他们都只是显示没有阴影的常规文字效果。

值得注意的一点是所谓的“绘画顺序”：Opera 9.x是符合CSS 2标准中的绘画顺序的（就是最先定义的影子被画在最下面一层），而Firefox 3.5遵循的是CSS 3的绘画顺序（即先定义的在顶上一层）。如果需要多重影子效果的话，这点可能需要注意一下。

结论

text-shadow是一个精细的但是很强大的CSS特性，现在Firefox 3.5开始正式支持，相信在不远的将来，这一特性会得到所有现代浏览器的支持。同时由于旧版本或者某些不支持的浏览器并不会因为这个属性而有什么渲染上的麻烦，我们建议您可以放心的使用这个特性来增强文字效果。

最后，需要提醒的一点是：效果虽然非常迷人，也要用之有度。如果全世界的网站开发者都过度使用这个效果，text-shadow估计也就由于审美疲劳被淘汰了。

综上所述：来试试吧，哈哈！

更多资料

文档

示例

Comments (2)

Fred Wenzel wrote:

Thank you for translating this. I hope this will help people who are not fluent in English!

Wednesday, June 10, 2009 at 11:54 pm #
Jia Mi wrote:

@Fred Glad that I can help this and can get involved in Firefox 3.5 launch,

Thursday, June 11, 2009 at 12:42 pm #

Trackbacks/Pingbacks (3)

颠覆网络35天 ─ 文字阴影聚光灯 < MJiA on Friday, June 26, 2009 at 2:32 pm

[…] Zachary Johnson制作了另一个很炫的演示 has put together another fun demo。他使用JavaScript和text-shadow属性制作了一个聚光灯效果。已经被嵌入到下面了。如果看不到的话，查看他的博客文章。使用Firefox 3.5观看演示 Post a comment | Trackback URI […]
谋智社区 » Blog Archives » 颠覆网络35天 ─ 使用文字阴影来烘托效果 on Thursday, July 9, 2009 at 1:26 pm

[…] <!– var textshadow = { colors: [ ‘#f00′, ‘#0f0′, ‘#00f’ ], shadows: [ ‘0 -10px 2px’, ‘10px 10px 2px’, ‘-10px 10px 2px’ ], state: [0, 1, 2], animate: function() { var t = document.getElementById(”animationtext”); var s = ”; for (var i = 0; i < 3; i++) { if (s) s += “, “; var myshadows = this.shadows[this.state[i]]; s += myshadows + ‘ ‘ + this.colors[i]; this.state[i] = ++this.state[i] % 3; /* rotate */ } t.style.textShadow = s; }, toggleAnimation: function() { if (this.handle) { window.clearInterval(this.handle); this.handle = false; var t = document.getElementById(’animationtext’); t.style.textShadow = ”; } else { this.handle = window.setInterval(function() { textshadow.animate(); }, 100); } return false; } } //–> 开始/停止动画 […]
谋智社区 » Blog Archives » 颠覆网络35天 ─ 文字阴影聚光灯 on Wednesday, August 19, 2009 at 1:59 pm

[…] Zachary Johnson制作了另一个很炫的演示 has put together another fun demo。他使用JavaScript和text-shadow属性制作了一个聚光灯效果。已经被嵌入到下面了。如果看不到的话，查看他的博客文章。使用Firefox 3.5观看演示 Posted in 颠覆网络35天 | Trackback | del.icio.us | Top Of Page […]

MJiA