Is there any clean CSS method to make each letter in a word a different color?
Here is some JavaScript.
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>");
}
On the server-side you can do this easily enough without annoying search engines AFAIK.
// This server-side code example is in JavaScript because that's
// what I know best.
var words = split(message, " ");
var c = 1;
for(var i = 0; i < words.length; i++) {
print("<span class=\"color" + c + "\">" + words[i] + "</span> ");
c = c + 1; if (c > 3) c = 1;
}
If you really want dead simple inline HTML code, write client-side Javascript to retrieve the message out of a given P or DIV or whatever based on its ID, split it, recode it as above, and replace the P or DIV's 'innerHTML' attribute.
There’s definitely no solution using just CSS, as CSS selectors give you no access to individual letters (apart from :first-letter
).