css - primera - poner mayusculas en html

¿Hay algún método limpio de CSS 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 un archivo como este 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

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 quieres un código HTML en línea muerto simple, escribe el Javascript del lado del cliente para recuperar el mensaje de un P o DIV dado o lo que sea basado en su ID, divídelo como antes, y reemplaza el P ''o el DIV''s'' innerHTML '' atributo.

Answer 2

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

Answer 3

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

Luego genera la imagen automáticamente.

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

Entonces los usuarios no técnicos solo tendrían que hacer algo como esto:

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

Y el script redblueyellow.cfm usaría un programs.png existente o generaría una nueva imagen con los colores múltiples según lo deseado.

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

Answer 4

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>