僅使用CSS的多色文本

我不確定我的標題是否連貫地表達了我的問題，但我會在下面解釋。僅使用CSS的多色文本

我想使用僅 CSS文本字符串指定不同的顏色給每個字符。

要看到視覺我的問題有進一步的解釋：http://codepen.io/Connor3xL/pen/ZOyzJK

我不能用這個，這是一個有點時間反正耗時：

<!--I don't want this, and I cannot use it--> 
<span style="font-family: tahoma"> 
<span style="color: red">U</span> 
<span style="color: blue">s</span> 
<span style="color: red">e</span> 
<span style="color: blue">r</span> 
<span style="color: red">n</span> 
<span style="color: blue">a</span> 
<span style="color: red">m</span> 
<span style="color: blue">e</span> 
</span>

我想這一點，只能用這樣的：

<span class="username">Username</div>

其中「username」將由CSS定義。那CSS是我需要的。這也顯然與HTML版本具有相同的效果。

我只需要在CSS中的原因是因爲我在Xenforo用戶名上使用此代碼。我以前看過它，所以我知道這很可能。我已經搜索了大約半個小時，嘗試了漸變，無法複製它。我希望有人能幫助。

來源

2016-07-03 ConnorLx3

我不認爲這是可能的。你可以用':: first-letter'來設置第一個字母的樣式，但是像':: nth-letter（n）'這樣沒有僞元素，所以你在這裏運氣不好。 – moped

我幾乎100％肯定這絕對是可能的，因爲我已經看到它在由相同引擎驅動的類似論壇上完成，這意味着它們也只能使用CSS。雖然，這個論壇是由我知道的一些最好的程序員管理的，但我相信這是可能的。 – ConnorLx3

因此，如果您無法親自檢查代碼，請給我們一個指向那個世界上最好的編碼器的高超論壇的鏈接。 – moped

只有啞CSS的解決方案 - 在你需要把每一個字母到獨立<span>所以你可以使用:nth-child(2n+1)

.username span { 
 
    color: red; 
 
} 
 
.username span:nth-child(2n+1) { 
 
    color: blue; 
 
}

<span class="username"><span>U</span><span>s</span><span>e</span><span>r</span><span>n</span><span>a</span><span>m</span><span>e</span></span>

可以使用小型的JavaScript像Ryan Rodemoyer建議答案：

var message = "The quick brown fox."; 
 
var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue 
 
for (var i = 0; i < message.length; i++) 
 
    document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");

也許你正在尋找的東西像this

來源

2016-07-03 03:54:00 moped

這可以用CSS雖然只用幾個注意事項來實現：

等寬字型必須使用
所需的文本必須通過被傳遞到CSS

總的原則是：

輸出全詞在所需基色
使用一個絕對定位的僞元素來輸出替代顏色，這是通過指定所需的字母和使用空格來保留基本顏色來完成的

這是可行的，因爲等寬字體中的字母佔用相同的空間量（因此您可以確定這些字母將處於正確的位置）。通過使用絕對定位，可以將字母放置在HTML中設置的單詞的頂部。

.username { 
 
    color: red; 
 
    font-family: monospace; 
 
    position: relative; 
 
} 
 
.username:after { 
 
    color: blue; 
 
    content: attr(data-descr); 
 
    left: 0; 
 
    position: absolute; 
 
}

<div class="username" data-descr="u e n m">username</div>

JS Fiddle

來源

2016-07-03 07:03:23

僅使用CSS的多色文本

回答

相關問題