和CSS text-shadow一起玩的时光
每当我在工作中有空闲时间，我都会尝试玩弄一些之前没有接触太多的前端技术，我想看看它在创造酷炫效果方面到底有什么潜能。
上周，我决定看一下这个并不起眼的text-shadow。
探索这个属性
浏览器都很好地支持CSS text-shadow，但它的定义方式会让它看上去有些奇怪。
当在文本中使用text-shadow的时候，你可以给这阴影指定颜色，偏移量(x和y的方向)和模糊半径。但不像box-shadow，你不能指定阴影伸展的尺寸(spread值)，这使得如果在一段文本中只应用一个text-shadow的话，实际实现效果是十分受限的。
See the Pen Basic text-shadow effect by Ashley Nolan (@ashleynolan) on CodePen.
一个应用了简单text-shadow效果的单词。
在大多数环境下，想用text-shadow这一种方式创造出出色的文字效果，是需要为文本添加多个文本阴影。一个通俗的方法是在最上方的文本阴影层上添加一个新的文本阴影层来创建一个围绕着文本的轮廓线(或描边)。下面的CSS展示如何达到这种效果：
|
1 2 3 4 |
text-shadow: 2px 2px 1px #000, -2px -2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000; |
你可能像我一样会想到，CSS的text-stroke会更加适合这种情况。或许你还没遇到过CSS的text-stroke属性，而且它现在还不是W3C说明文档的一部分，所以它的支持程度仍然受限——?现在仅仅在写有webkit前缀代码时可用。
比text-stroke实现程度更加令人沮丧的是，你不能控制文本描边在文字边缘的位置。如果你想让描边在你的文本外边缘延伸，那么text-stroke属性不会让你有这个运气—— 它反而总是闯入文字的内边缘，因为它被用来作为一种由中心到两侧的描边。如果能够控制描边的位置，这将会让它更加实用。
下面这个例子展示了在实践中，text-shadow和text-stroke分别为文本创建的描边效果的差异。
See the Pen Comparing text-shadow to text-stroke by Ashley Nolan (@ashleynolan) on CodePen.
text-shadow和text-stroke分别为文本加上轮廓或描边的对比。
更吸引人的东西
我常见的一种text-shadow的用法是为文本创造凸起的3D错觉或为文本创建类似浮雕的效果，使用text-shadow这个用法可以创造一些漂亮的效果。
当我查阅Dribbble寻找设计灵感时，我发现这一来自Kickass Factory的创意，它看起来具有一定的挑战性，我决定尝试仅用CSS再现类似的视觉效果——当鼠标悬停时让它动起来。我专注于使用:hover，但之后CSS不能被轻微的改进来使其在触摸设备上效果更好。
重新制作轮廓和阴影的效果是比较简单的，我发现了一个很好的使用mixin方法的CodePen的案例，这让我制作字母凸起的效果变得更加简单。只需将代码作一些简单调整，就让我做出了基本的效果，而所有效果的实现仅仅是用到了text-shadow属性。
最后的挑战是在文本上添加图案，我尝试了两种方法。
我第一个尝试了CSS的background-clip；这个属性允许你指定一个背景的绘制区域—— 在这个例子，用一个线性渐变创建一个斑马线的效果 – 然后用它裁剪一个元素 – 这里裁剪区域是文本。
|
1 2 3 4 5 6 |
.backgroundclip { background: linear-gradient(#e62915 50%, #e7e7e7 50%); background-size: 4px 4px; -webkit-background-clip: text; text-fill-color: transparent; } |
在这段代码单独运行期间，我发现一旦应用text-shadow属性，阴影就会被渲染在背景的上方，这样就导致背景效果在文本上变得模糊。虽然有一些技巧可以解决这个问题，但这要求你所有文本的父元素没有被指定背景属性，尽管知道这是可行的，但在实际中，并不是很好的解决办法。
background-clip: text 现在还没成为标准，所以只有写了webkit代码前缀的，才会被相应浏览器所适用。
See the Pen Example of background-clip with text-shadow applied by Ashley Nolan (@ashleynolan) on CodePen.
使用带有text-shadow的background-clip的案例。
SVG来营救
在我第一次尝试失败后，我开始去寻找另一个可能解决的方案。经过短时间的搜索，我偶然发现了一篇关于SVG填充的文章。这篇文章让我知道了SVG填充也能将渐变作为一种输入，所以这看来正是我寻找的解决方案。
你可以到我在CodePen创建的案例中看到最后的效果，而且里面还带有几个简单只用了text-shadow的比较简单的效果。
不幸的是，这个效果只能在Chrome中完美运行；Firefox和IE会在SVG文本指定了填充的情况下，失去text-shadow的效果，而Safari一想起SVG和text-shadow一起运动就会完全发疯了(形容兼容性比较差)。
总结
像往常一样，结合多个CSS属性一起使用，可能会在渲染方面产生意想不到的的副作用。CSS的text-shadow属性可以为文本添加多个阴影，这样可以创建一些漂亮的效果。
不幸的是，结合text-shadow和SVG的渐变填充会导致一些浏览器会产生一些奇怪的结果。但你会高兴地看到这个实现将会变得更加一致，正如我所想的那样，人们可以创造出一些很棒的文字效果。
如果有人有其它利用text-shadow创作的文本效果，请你fork(克隆别人的代码库到自己的项目中) 这个样本，然后告诉我你想出来了什么 – 我认为我通过我的努力只能触及表层的东西。
