Einzelne Buchstaben über CSS färben, wie?

3 Antworten

Minilexikon
22.03.2016, 16:01

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.
Woher ich das weiß:Berufserfahrung – Seit 2014
Bananenbrot24  22.03.2016, 16:29

Mit Kanonen auf Spatzen schießen... :D

Minilexikon  22.03.2016, 16:45
@Bananenbrot24

Tja, das Ding ist, dass die Variante mit den Spans ziemlich aufwendig wird, wenn du mal nicht nur Halle hast.
Bananenbrot24
21.03.2016, 13:58

Ü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>[...]
MJH1998 
Beitragsersteller
 21.03.2016, 14:05

Ja danke. Aber leider muss  ich es in CSS machen.... Das mit den Spans weiß ich schon. Aber trotzdem danke!

PeterKremsner  21.03.2016, 14:09
@MJH1998

das .font-red usw. kommt in deine CSS Datei, das ist mit CSS gelöst,

ebenso wie meines, denn in der Style Eigenschaft eines HTML Tags stehen CSS Eigenschaften, die dem Objekt zugeordnet werden.
PeterKremsner
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
21.03.2016, 13:57

Kannst du mit htmltags leichter machen:

<span style="color: green;">H</span>

<span style="color: blue;">a</span> usw.

Siehe hier:

https://jsfiddle.net/n80gxht0/
MJH1998 
Beitragsersteller
 21.03.2016, 13:59

Is´ leider eine Aufgabe und ich muss es über CSS machen...

PeterKremsner  21.03.2016, 14:07
@MJH1998

Naja du kannst es mit Klassen machen so wie Bananenbrot24.

Eventuell kannst du noch etwas über nth-child selector erreichen, aber das ist dann für den Fall schon mehr als umständlich.