Existe algum método CSS limpo para fazer com que cada letra de uma palavra uma cor diferente?

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

  •  03-07-2019
  •  | 
  •  

Pergunta

Eu preciso de uma maneira de permitir que cada letra de uma palavra para girar através de 3 cores diferentes. Eu sei de algumas maneiras não tão limpas que eu posso fazer isso com asp.NET, mas eu estou querendo saber se pode haver uma solução CSS limpador / JavaScript que é mais motor de busca amigável.

O designer está incluindo um arquivo como este para cada página. Eu prefiro não ter de gerar manualmente uma imagem para cada página como que torna difícil para os editores do site não-técnicos para adicionar páginas e nomes de página mudança.

Foi útil?

Solução

Aqui está um pouco 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>

Outras dicas

No lado do servidor, você pode fazer isso com bastante facilidade, sem motores de busca irritantes 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;
}

Se você quiser realmente simples morto código embutido HTML, do lado do cliente gravação Javascript para recuperar a mensagem para fora de um determinado P ou DIV ou o que quer com base em sua ID, dividi-lo, recode-lo como acima, e substituir o P ou DIV 'innerHTML' atributo.

Não há dúvida nenhuma solução usando apenas CSS, como seletores CSS dará nenhum acesso a cartas individuais (para além de :first-letter).

Eu prefiro não tem para gerar uma imagem manualmente para cada página

Em seguida, gerar a imagem automaticamente.

Você não especificar qual a tecnologia do lado do servidor que você está usando, mas qualquer boa lhe permitirá manipular imagens (ou pelo menos chamar um utilitário de imagem externa)

Assim, os usuários não-técnicos seria só precisa fazer algo como isto: 

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

E o script redblueyellow.cfm então quer usar um programs.png existente ou gerar uma nova imagem com as várias cores como desejado.

Eu posso fornecer CFML amostra ou pseudo-código para fazer isso, se você gostaria?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top