Gibt es eine saubere CSS-Methode jeden Buchstaben in einem Wort eine andere Farbe zu machen?

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

  •  03-07-2019
  •  | 
  •  

Frage

Ich brauche einen Weg, jeder Buchstabe eines Wortes zu ermöglichen, durch 3 verschiedene Farben zu drehen. Ich kenne einige nicht so sauber Möglichkeiten, wie ich dies mit asp.NET tun kann, aber ich frage mich, ob es vielleicht eine sauberere CSS / JavaScript-Lösung, die mehr Suchmaschinen-freundlich ist.

Der Designer ist mit eine Datei wie diese für jede Seite. Ich möchte lieber nicht manuell für jede Seite ein Bild zu erzeugen, wie es für die nicht-technische Website-Editoren schwer macht, Seiten hinzufügen und Seitennamen ändern.

War es hilfreich?

Lösung

Hier finden Sie einige 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>

Andere Tipps

Auf der Server-Seite können Sie dies AFAIK ohne lästige Suchmaschinen leicht genug tun. 

// 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;
}

Wenn Sie wirklich tot einfache Inline-HTML-Code wollen, schreiben Sie clientseitige Javascript um die Nachricht aus einem gegebenen P oder DIV oder was auch immer auf der Grundlage seiner ID abzurufen, es aufgeteilt, neu kodieren sie, wie oben, und ersetzen die den P oder DIV 'innerHTML-' Attribut.

Es gibt definitiv keine Lösung nur mit Hilfe von CSS, wie CSS-Selektoren geben Sie keinen Zugriff auf einzelne Buchstaben (abgesehen von :first-letter).

  

Ich würde lieber nicht manuell für jede Seite ein Bild erzeugen

Dann wird das Bild automatisch erzeugen.

Sie geben nicht, welche serverseitige Technologie Sie verwenden, aber jede gute ermöglicht es Ihnen, Bilder zu manipulieren (oder zumindest rufen ein externes Bild Dienstprogramm)

So sind die nicht-technische Anwender würden nur brauchen so etwas wie dies zu tun: 

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

Und das redblueyellow.cfm Skript dann entweder mit den mehreren Farben wie gewünscht ein neues Bild eines vorhandenen programs.png oder erzeugen würde verwenden.

Ich kann Probe CFML oder Pseudo-Code zur Verfügung stellen, dies zu tun, wenn Sie möchten, dass?

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top