Question

我需要为我正在构建的网站上的标题和导航文本创建“锐利”渐变。我试图尽可能使它成为纯HTML5 / CSS3，并且希望坚持@font-face而不是转移到Cufon。锐利渐变的意思是两种颜色，两者之间没有混合。

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

我在Cufon找到了一种方法，但正如我所说，我想坚持@font-face。 Cufon在IE中给了我太多的悲伤，我真的很喜欢@font-face的工作方式。

我还找到了一种用CSS3对文本进行渐变的方法，但我无法弄清楚如何使用“锐利”渐变来做到这一点。 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/

从我的示例中可以看出，使用PNG图像技巧不起作用，因为它不在坚实的背景上。如果所有其他方法都失败了，我只会使用平滑的渐变，但我相信StackOverflow的好人。

Gradient我目前正在使用：

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

注意：我不介意它是否只是一个浏览器解决方案。如果那是他们的全部，那么至少它总比没有好。

Answer 1

我相信你需要使用色块。在这种情况下，您希望渐变中的颜色停在准确的位置。

观看你在Nettuts上的演示，我使用这段代码修改了代码并修改它以创建一个双色调的渐变：

    -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”选择器中的颜色属性和颜色＆amp; “h1：after”选择器中的text-shadow属性。您可能希望删除它们以更好地了解效果在最纯粹的形式中的效果。

另请注意，上述代码仅适用于基于webkit的浏览器（例如Chrome和Safari）。您需要为其他浏览器（例如-moz-）实现适当的浏览器前缀属性，但在此之前请确保浏览器支持“mask-image”和“gradient”属性。

干杯！：）

Answer 2

以下是我为应用中的按钮所做的示例

a.primary[type="button"],input.primary[type="button"], input.primary[type="submit"],input.primary[type="reset"]{
              background-image: linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -o-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -moz-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -webkit-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -ms-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
a.primary[type="button"] span,a.secondary[type="button"] span{padding: 0 20px;height: 20px;}

然后您可以将它与输入或带有type = button

的标签一起使用

<a type="button" class="primary" href="/neeto"><span>Button!</span>

使用CSS3在文本上创建双色Sharp渐变

2 个答案: