梯度文本跨瀏覽器

我試圖與水平梯度的菜單欄。我使用-webkit-background-clip取得了一些成功，但在Firefox中無法使用。梯度文本跨瀏覽器

我發現一個jQuery插件pxgradient這是跨瀏覽器兼容的，但我不能讓它跨越梯度幾個li元素。請參閱以下的jsfiddle：

function gradient1() { 
    $(".test").pxgradient({ 
     step: 10, 
     colors: ["#ff0066", "#2850FF"], 
     dir: "x" 
    }); 
};

我想要的梯度更像頂一個。理想情況下，我希望邊框底部包含相同的懸停漸變，但我可能生活在沒有這個的世界中。

PS-的font-awesome圖標是存在的，只是因爲它給了我前面的問題，所以我現在包括，以確保它的工作原理。

更新： 另一種可能的想法，我用了讀元素的數量，然後除以每個元素的顏色，並使用第n個孩子（）選擇每種顏色指定播放。

<script> 
//Get number of list items 
var menuItems = $("li").children().length; 

//Convert colors to hex 
hexString1 = '2850FF'; 
hexString2 = 'FF0066'; 
color1 = parseInt(hexString1, 16); 
color2 = parseInt(hexString2, 16); 

//Calculate difference in colors and color step 
colorDifference = color2 - color1; 
colorStep = colorDifference/(menuItems - 1); 
colorStep = parseInt(colorStep); 

//Loop through elements and apply gradients 
for (i = 0; i < menuItems; i++) { 
    newColor1 = color1 + (i * colorStep); 
    newColor2 = color1 color2 -1; 
    gradientStart = newColor1.toString(16); 
    gradientEnd = newColor2.toString(16); 

    //use gradientStart and gradientEnd as colors in the function, not sure on this part yet 

} 

</script>

雖然這似乎是如此矯枉過正，但必須有一個更簡單的解決方案？與具有幾個字符的元素相比，具有許多字符的元素也將具有相對較慢的漸變。這可以通過計算每個元素的字符數來解決，但它看起來效率相當低。

來源

2015-06-18 Robert

嗯，你的小提琴瞎搞我刪除從中使文本看起來像你想要的鏈接HREF屬性，但是當我試圖pxgradiant呼叫作出後注入URL，它不工作。 [你可以在這裏看到]（http://jsfiddle.net/vnv4nyhj/11/）如果找到工作或其他方式，生病讓你知道。 – crazymatt

謝謝你看看。我有一個不同的想法，但我怎樣才能用普通的編輯器回答我自己的問題？ stackoverlow的長時間讀者，第一次海報。 – Robert

@羅伯特編輯你的問題，如果你需要澄清的東西。如果您在查找時遇到問題，編輯「按鈕」位於標籤下方。 –

一個簡單的解決方案，將在FF，鉻和Safari工作，可使用混合模式。

訣竅是，梯度是一個下設置，在UL。

設置混合 - 混合模式：屏幕，這個顏色會顯示僅在黑色的地方（文本，鼠標懸停時的邊界）

ul { 
 
    display: inline-block; 
 
    padding: 0; 
 
    font-size: 30px; 
 
    font-weight: bolder; 
 
    background: linear-gradient(90deg, red, blue); 
 
} 
 
li { 
 
    mix-blend-mode: screen; 
 
    background-color: white; 
 
    box-shadow: 8px 0px 0px white; 
 
} 
 
li, li a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    border-bottom: 3px solid white; 
 
} 
 
li:hover a { 
 
    border-bottom: 3px solid black; 
 
    text-shadow: 0px 0px 2px gray; 
 
}

<div class="navigation"> 
 
\t <ul> 
 
\t \t <li><a href="#">Nav 1</a></li> 
 
\t \t <li><a href="#">Nav 2</a></li> 
 
\t \t <li><a href="#">Nav 3</a></li> 
 
\t \t <li><a href="#">Nav 4</a></li> 
 
\t \t <li><a href="#">Nav 5</a></li> 
 
\t </ul> 
 
</div>

來源

2015-06-27 17:38:31 vals

沒辦法！我放棄了像你的簡單解決方案的希望。 – Robert

梯度文本跨瀏覽器

回答

相關問題