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

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

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

我找到了一种方法做这件事的Cufón，但正如我所说的，我要坚持到@font-face。 Cufon在IE中给了我太多的伤感，我真的很喜欢@font-face的工作原理。

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

正如您从我的示例中看到的，使用PNG图像技巧将无法使用，因为它不在纯色背景上。如果一切都失败了，我会用一个平滑的渐变，但我相信StackOverflow的好人。

梯度我目前正在工作：

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

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

来源

2011-11-03 JacobTheDev

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

看着你对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-掩码图像”从片演示与我上面的东西，它应该是你在找什么。调整您喜欢的颜色的RGB值。请注意，尽管在演示中CSS中有一些额外的东西可能会产生意想不到的结果e.x. “h1 a”选择器中的颜色属性以及“h1：after”选择器中的颜色& text-shadow属性。您可能想要删除这些以更好地了解其最纯粹形式的效果。

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

干杯！ :)

来源

2011-11-04 02:04:21

-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;}

然后，可以与输入或与类型代码使用它确实对按钮=按钮

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

来源

2011-11-04 02:56:58

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

回答

相关问题