¿Hay algún método CSS limpio para hacer que cada letra de una palabra tenga un color diferente?

Question

Necesito una manera de permitir que cada letra de una palabra gire a través de 3 colores diferentes. Conozco algunas formas no tan claras de cómo puedo hacer esto con asp.NET, pero me pregunto si podría haber una solución CSS/JavaScript más limpia que sea más amigable para los motores de búsqueda.

El diseñador está incluyendo a file like this para cada página. Preferiría no tener que generar manualmente una imagen para cada página, ya que eso dificulta que los editores de sitios no técnicos puedan agregar páginas y cambiar los nombres de las páginas.

Answer 1

Aquí hay algunos JavaScript.

<script type="text/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>"); 
</script> 

Answer 2

En el lado del servidor, puede hacerlo con la suficiente facilidad sin molestar a los motores de búsqueda 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; 
} 

Si realmente desea código HTML en línea absolutamente simple, escribir JavaScript del lado cliente para recuperar el mensaje de una P o DIV o lo que sea la base de su identidad, que se dividió dado, recodificar que el anterior, y reemplazar el atributo 'innerHTML' de P o DIV.

Answer 3

Definitivamente no hay solución con solo CSS, ya que los selectores CSS no le dan acceso a letras individuales (excepto :first-letter).

Answer 4

prefiero no tener que generar una imagen de forma manual para cada página

Luego genere la imagen automáticamente.

No se especifica que la tecnología del lado del servidor que está utilizando, pero cualquier buena le permitirá manipular imágenes (o al menos llamar a una utilidad de imagen externa)

lo que los usuarios no técnicos haría sólo tiene que hacer algo como esto:

<img src="images/redblueyellow.cfm/programs.png" alt="programs"/> 

Y el guión redblueyellow.cfm sería entonces o bien utilizar un programs.png existente o generar una nueva imagen con los múltiples colores según se desee.

Puedo proporcionar una muestra de CFML o pseudocódigo para hacer esto, si lo desea?