如何將漸變添加到字體（CSS）？

我正在尋找一種方式來增加梯度大粗體字是這樣的：如何將漸變添加到字體（CSS）？

詞可以有一個或兩行字體高度取決於視口的高度。

此示例適用於Chrome，但不是FF：http://dabblet.com/gist/1695257

你有什麼建議的任何工作純CSS的解決方案？

來源

2012-04-12 Atadj

不，你要什麼仍然是在「建議」階段。瀏覽器在這方面達成共識還需要一段時間。 – 2012-04-12 11:36:59

該鏈接中使用的方法不是純粹的CSS？ – 2012-04-12 11:50:57

@JoshDavenport這是純CSS，但不是_working_ CSS！ – 2012-04-12 11:54:59

我同意什麼納撒尼爾上面說的，但如果你仍然想嘗試一下，那麼你可以這樣做：

Sample Code @ Codepen

<style> 
h1 { 
font-size: 60px; 
text-align: center; 
margin: 40px; 
color: #000; 
} 

h1.methodA { 
background: -webkit-linear-gradient(top, #1965a9, #000); 
background: linear-gradient(top, #1965a9, #000); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
} 

h1.methodB { 
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1)); 
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1)); 
} 
</style> 

<h1 class="methodA">Awesome Gradient Text Method A</h1> 

<h1 class="methodB">Awesome Gradient Text Method B</h1>

來源

2014-03-25 18:42:59 CodeOverRide

-2

的一點是，這個功能是不是很容易與不同的瀏覽器兼容的，然而我花時間，以谷歌爲你而發現這一點： http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

希望它可以幫助你。

編輯：在評論的人讓我知道的事實，這不會對文字工作，爲此，我發現這個其他文章至極給你這個問題的答案： http://webdesignerwall.com/tutorials/css-gradient-text-effect

來源

2012-04-12 11:32:27 dennis

OP希望漸變文本，而不是背景 – Curt 2012-04-12 11:34:28

我認爲上面的方法可以應用於任何對象，不只是背景，因爲文本可以作爲具有w和h屬性的對象返回 – dennis 2012-04-12 11:36:00

@dennis不，背景漸變是圖像。您無法將圖片應用於文字。自己嘗試一下。 – 2012-04-12 11:40:07

這是不可能在所有在純CSS中做non-webkit瀏覽器。您的示例是在webkit中執行此操作的正確方法，但我會執行webkit檢測媒體查詢，以確保Firefox從不嘗試使用沒有文本剪輯的梯度（請參閱CSS prefixes are becoming a threat - but is Webkit really to blame?），如so。我可以提醒你，這是非規格的東西，你真的不應該使用它。

來源

2012-04-12 13:51:32 Nathaniel

如何將漸變添加到字體（CSS）？

回答

相關問題