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

Question

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

El diseñador incluye un archivo como este para cada página. Prefiero no tener que generar manualmente una imagen para cada página, ya que eso dificulta que los editores no técnicos del sitio agreguen páginas y cambien los nombres de las páginas.

Answer 1

Aquí hay un poco de 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 hacer esto fácilmente 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 un código HTML en línea simple y muerto, escriba Javascript del lado del cliente para recuperar el mensaje de una P o DIV determinada o lo que sea en función de su ID, divídalo, recodifíquelo como se indica arriba y reemplace la P o DIV Atributo 'innerHTML'.

Answer 3

Definitivamente, no hay una solución que use solo CSS, ya que los selectores de CSS no le dan acceso a letras individuales (aparte de : primera letra ).

Answer 4

  

Prefiero no tener que generar manualmente una imagen para cada página

Luego genera la imagen automáticamente.

No especifica qué tecnología de servidor está usando, pero una buena le permitirá manipular imágenes (o al menos llamar a una utilidad de imagen externa)

Por lo tanto, los usuarios no técnicos solo deberían hacer algo como esto:

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

Y la secuencia de comandos redblueyellow.cfm usaría un programa.png existente o generaría una nueva imagen con los múltiples colores que desee.

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