Есть ли какой-нибудь чистый метод CSS, чтобы сделать каждую букву в слове разным цветом?

Question

Мне нужен способ, позволяющий каждой букве слова вращаться через 3 разных цвета. Я знаю о некоторых не очень чистых способах сделать это с помощью asp.NET, но мне интересно, может ли быть более чистое решение CSS / JavaScript, более удобное для поисковых систем.

Дизайнер включает файл, подобный этому для каждой страницы. Я бы предпочел не создавать вручную изображение для каждой страницы, поскольку это затрудняет редакторам нетехнических сайтов добавлять страницы и изменять названия страниц.

Answer 1

Вот немного 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

Определенно нет решения, использующего только CSS, поскольку селекторы CSS не дают вам доступа к отдельным буквам (кроме :first-letter).

Answer 3

На стороне сервера вы можете сделать это достаточно легко, без раздражающих поисковых систем 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;
}

Если вам действительно нужен мертвый простой встроенный HTML-код, напишите Javascript на стороне клиента, чтобы извлечь сообщение из заданного P или DIV или чего-либо еще на основе его идентификатора, разбить его, перекодировать, как указано выше, и заменить P или DIV. Атрибут 'innerHTML'.

Answer 4

Я бы предпочел не создавать вручную изображение для каждой страницы

Затем сгенерируйте изображение автоматически.

Вы не указываете, какую серверную технологию вы используете, но любая хорошая из них позволит вам манипулировать изображениями (или, по крайней мере, вызвать утилиту внешнего изображения)

Так что нетехническим пользователям просто нужно сделать что-то вроде этого:

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

И сценарий redblueyellow.cfm будет либо использовать существующий файл Programs.png, либо создать новое изображение с несколькими цветами по желанию.

Я могу предоставить образец CFML или псевдокода для этого, если хотите?