使用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在文本上創建雙色漸變漸變

回答

相關問題