Einzelne Buchstaben über CSS färben, wie?
Ich möchte über CSS in einem HTML Dokument einzelne Buchstaben eines Wortes färben. Z.B. Hallo (H in Grün, a in blau, l in lila, usw.)
Kann mir jemand sagen wie genau das funktioniert?
Am besten gleich die Syntax.
3 Antworten
Vielleicht hilft dir jQuery dabei, es etwas dynamischer zu gestalten. Ich habe mal PeterKremsners und Bananenbrot24s Lösungswege ein bisschen weiterentwickelt: http://codepen.io/Minilexikon/pen/YqVKBL
Du kannst in dem Array charcolors einfach die Farben für die Buchstaben (eigentlich die Klassennamen) festlegen und das Array beliebig erweitern; den Rest macht jQuery ;)
Kleine Warnung: Das geht nur bei Divs oder p-Tags, die nur Text enthalten.
Über Spans, denke ich. Geht bestimmt noch irgendwie einfacher, aber im Prinzip machst du ein paar Klassen und verwendest diese in spans.
.font-red { color: #hexcode-für-rot;}
.font-blue { color: #selbes-spiel-hier;}
[...]
<span class="font-red">H</span><span class="font-blue">A</span>[...]
Kannst du mit htmltags leichter machen:
<span style="color: green;">H</span>
<span style="color: blue;">a</span> usw.
Siehe hier: