Existe-t-il une méthode CSS propre pour attribuer à chaque lettre d’un mot une couleur différente?

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

  •  03-07-2019
  •  | 
  •  

Question

J'ai besoin d'un moyen de permettre à chaque lettre d'un mot de faire pivoter 3 couleurs différentes. Je connais des moyens moins propres de faire cela avec asp.NET, mais je me demande s’il existe une solution plus propre pour CSS / JavaScript, plus conviviale pour les moteurs de recherche.

Le concepteur inclut un fichier comme celui-ci . pour chaque page. Je préférerais ne pas avoir à générer manuellement une image pour chaque page, car les éditeurs de sites non techniques ont de la difficulté à ajouter des pages et à modifier les noms de page.

Était-ce utile?

La solution

Voici du 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>

Autres conseils

Du côté serveur, vous pouvez le faire assez facilement sans gêner les moteurs de recherche, autant que je sache. 

// 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 vous voulez vraiment du code HTML simple et mort, écrivez du code Javascript côté client pour récupérer le message sur un P ou un DIV donné, ou sur un autre critère en fonction de son ID, scindez-le, recodez-le comme ci-dessus et remplacez le P ou le DIV. Attribut "innerHTML".

Il n’existe aucune solution utilisant uniquement le CSS, car les sélecteurs CSS ne vous permettent pas d’accéder aux lettres individuelles (à l’exception de : première lettre ).

  

Je préférerais ne pas avoir à générer manuellement une image pour chaque page

Générez ensuite l'image automatiquement.

Vous ne spécifiez pas la technologie côté serveur que vous utilisez, mais toute technologie appropriée vous permettra de manipuler des images (ou au moins d'appeler un utilitaire d'image externe)

Ainsi, les utilisateurs non techniques auraient simplement besoin de faire quelque chose comme ceci: 

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

Et le script redblueyellow.cfm utiliserait alors un programme existant.png ou générerait une nouvelle image avec les multiples couleurs souhaitées.

Je peux vous fournir un exemple de code CFML ou un pseudo-code pour le faire, si vous le souhaitez.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top