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

StackOverflow https://stackoverflow.com/questions/155584

  •  03-07-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

Другие советы

На стороне сервера вы можете сделать это достаточно легко, не раздражая поисковые системы 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 или любого другого на основе его идентификатора, разделите его, перекодируйте, как указано выше, и замените атрибут 'innerHTML' P или DIV.

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top