使用CSS3在文本上创建两色尖锐渐变 [英] Creating a Two-Color Sharp Gradient on Text With CSS3

问题描述

我需要为我正在构建的网站上的标题和导航文本创建一个清晰"的渐变.我正在尝试使其尽可能地纯HTML5/CSS3，并希望坚持使用 @ font-face ，而不要移至Cufon.我所说的尖锐渐变是两种颜色，两者之间没有混合.

I need to create a "sharp" gradient for both the header and navigation text on a site I'm building. I'm trying to make it as pure HTML5/CSS3 as possible, and would like to stick with @font-face and not move over to Cufon. What I mean by sharp gradient is two colors, with no blending in between.

示例: http://dl.dropbox.com/u/12147973/sharp-gradient.png

我在Cufon中找到了一种方法，但正如我所说，我想坚持使用 @ font-face .Cufon让我对IE感到非常悲伤，我真的很喜欢 @ font-face 的工作方式.

I found a way to do it in Cufon, but as I said, I want to stick to @font-face. Cufon gives me too much grief in IE, and I really love how @font-face works.

我还找到了一种使用CSS3对文本进行渐变的方法，但是我不知道如何使用清晰"渐变来实现渐变. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/

I also found a way to do gradients on text with CSS3, but I can't figure out how to do it with "sharp" gradients. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/

从我的示例中可以看到，使用PNG图像技巧不起作用，因为它的背景不是很稳定.如果其他所有方法都失败了，我将使用平滑的渐变，但是我相信StackOverflow的优秀人才.

As you can see from my example, using the PNG image trick won't work, because it's not on a solid background. If all else fails, I'll just use a smooth gradient, but I have trust in the good people of StackOverflow.

我当前正在使用的渐变:

Gradient I'm currently working with:

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(50%,#a8a8a8), color-stop(50%,#6d6d6d), color-stop(100%,#6d6d6d))

注意:我不介意它是否只是一个浏览器的解决方案.如果仅此而已，那么至少总比没有好.

NOTE: I don't mind if it's only a one-browser solution. If that's all their is, then at least it's better than nothing.

推荐答案

我相信您需要使用色标.在这种情况下，您将需要为渐变中的颜色停止在确切的位置.

I believe you'll need to use color stops. In this situation, you'll want to colors in your gradient to stop at the exact spot.

看看您在Nettuts上的演示，我采用了代码，并对其进行了修改，以使用此代码创建两色调的尖锐渐变:

Looking at the demo you have on Nettuts, I took the code and modified it to create a two-tone sharp gradient using this code:

    -webkit-mask-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, rgba(15,8,188,1)),
color-stop(0.5, rgba(70,62,255,0.5)));

用上面的内容替换演示中的"-webkit-mask-image"片段，它应该是您想要的.调整您喜欢的颜色的RGB值.请注意，尽管在演示中，CSS中还有一些其他东西可能会产生意想不到的结果，例如e.x."h1 a"选择器中的color属性以及color&"h1:after"选择器中的text-shadow属性.您可能希望删除这些内容，以更好地了解效果的最纯粹形式.

Replace "-webkit-mask-image" piece from the demo with what I have above and it should be what you're looking for. Adjust the RGB values for your preferred colors. Note though in the demo there's some additional things in the CSS that might produce unexpected results, e.x. the color property in the "h1 a" selector and the color & text-shadow property in the "h1:after" selector. You may want to remove those to get a better idea of how the effect looks like in its purest form.

此外，请注意，以上代码仅适用于基于Webkit的浏览器(例如Chrome和Safari).您需要为其他浏览器(例如-moz-)实现适当的浏览器前缀属性，但在执行此操作之前，请确保浏览器支持"mask-image"和"gradient"属性.

Also, please note that the above code will only work for webkit based browsers (e.g. Chrome & Safari). You'll need to implement the appropriate browser prefix properties for other browsers (e.g. -moz-), but before you do that make sure the browser supports the "mask-image" and "gradient" property.

干杯！:)

这篇关于使用CSS3在文本上创建两色尖锐渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！