Wie Farben in CSS funktionieren

Wir hatten bereits eine Spitze bei der Änderung von Textfarben und Hintergrundfarben, aber bisher haben wir nur benannte Farben verwendet. Offensichtlich kann es keinen Namen für jede der Millionen Farben geben, die das menschliche Auge wahrnehmen kann. Daher bietet CSS neben benannten Farben für die häufigsten Farben verschiedene Möglichkeiten, einen Farbwert auszudrücken.

RGB Farben

Farben auf Computern bestehen normalerweise aus einer Mischung der drei Hauptfarben: Rot, Grün und Blau. Jedes von diesen kann einen numerischen Wert zwischen 0 und 255 haben, der die Menge der in der Mischung zu verwendenden Farbe ausdrückt. In CSS können Sie eine Farbe mit einer bestimmten RGB-Syntax wie folgt definieren:

<p style="color: rgb(0,0,0);">Black text</p>

Null Rot, Grün und Blau ergibt die schwarze Farbe. Am anderen Ende der Skala haben wir offensichtlich Weiß, das durch einen Rot-, Grün- und Blauwert von 255 dargestellt wird:

<p style="color: rgb(255,255,255); background-color: rgb(0,0,0);">White text</p>

Wie Sie sehen können, ist die Syntax ziemlich einfach - das Wort rgb, gefolgt von einem Satz von Klammern, die die drei Werte für Rot, Grün und Blau umgeben, die jeweils durch ein Komma getrennt sind.

Hinzufügen der Tansparenz mit RGBa

Als Erweiterung zu RGB können Sie RGBa verwenden, mit dem Sie einen vierten Wert definieren können, der die Transparenzstufe für die betreffende Farbe definiert. Auf diese Weise erhalten Sie ein semitransparentes Element und können häufig durchsichtige Überlagerungen auf Websites erstellen.

Der letzte Teil eines RGBa-Sets muss eine Zahl zwischen 0 und 1 sein, wobei 0 vollständig transparent und 1 vollständig einfarbig ist. Ich werde Ihnen ein Beispiel zeigen, aber um Ihnen einen besseren Eindruck davon zu geben, wie es funktioniert, verwende ich einen Bildhintergrund - keine Sorge, dies wird in einem der nächsten Kapitel behandelt.

<style type="text/css">
.background {
	padding: 20px;
	background-image: url('http://www.css3-tutorial.net/images/random_grey_variations.png');
}

.box {
	width: 200px;
	height: 100px;
	background-color: rgba(128,128,128,0.3);
	padding: 10px;
	color: white;
}
</style>
<div class="background">
	<div class="box">
		This is a semi-transparent box
	</div>
</div>

Beachten Sie, dass die Box eine transparente Ebene hat, auf der Sie Text und Bilder ablegen können, sodass Sie das Hintergrundbild dahinter sehen können - ziemlich cool, oder? Sie können den letzten Teil des RGBa-Werts regulieren, um die Box je nach Bedarf mehr oder weniger transparent zu machen.

HEX Farben

Alternativ zur RGB-Notation können Sie die HEX-Notation verwenden, die aus einem Hash-Zeichen (#) gefolgt von 6 oder 3 Zeichen / Zahlen besteht. Jeder Zeichensatz repräsentiert die hexadezimale Darstellung der Rot-, Grün- und Blaukomponente der Farbe. Erlauben Sie mir, mit einem Beispiel zu veranschaulichen:

<p style="color: #000000;">Black text</p>
<p style="color: #0000ff;">Blue text</p>
<p style="color: #ff0000;">Red text</p>

Sie können die Werte lesen, indem Sie das Hash-Zeichen verwerfen und die verbleibenden 6 Zeichen in Zweiergruppen aufteilen. Jeder Satz definiert die Werte für R, G und B in hexadezimaler Schreibweise.

In Fällen, in denen alle drei Sätze aus zwei gleichen Zeichen bestehen, können Sie die Kurzschreibweise verwenden, indem Sie nur das erste Zeichen für jeden Satz schreiben. So wird beispielsweise Schwarz zu # 000, Blau zu # 00f und Rot zu # f00.

Die Verwendung der HEX-Notation scheint etwas schwieriger zu sein, da Sie die R-, G- und B-Zahlen in hexadezimale Werte umwandeln müssen. Die meisten Web-Editoren können Ihnen dabei jedoch behilflich sein. Dies geschieht häufig, indem ein Farbwähler angeboten wird, mit dem Sie die Farbe visuell auswählen können, und indem zwischen benannten Farbwerten, RGB-Farben und HEX-Farben für Sie konvertiert wird. Denken Sie auch daran, dass bei HEX-Werten die Groß- und Kleinschreibung nicht berücksichtigt wird. # F00 entspricht # f00.

Benannte Farben

Wie bereits erwähnt, unterstützt CSS eine breite Palette benannter Farben. Diese können leichter zu merken sein als HEX- oder RGB-Werte. Für eine vollständige Liste Schauen Sie sich bitte eine der zahlreichen Online-Referenzen an, z.B.: http://www.cssportal.com/css3-color-names/ .

Zusammenfassung

Wie Sie sehen, gibt es viele Möglichkeiten, Farben bei der Verwendung von CSS zu definieren. Welche Sie verwenden, hängt von der jeweiligen Situation und Ihren persönlichen Vorlieben ab. Einige Leute bestehen darauf, dass nur eine Art von Farbnotation verwendet wird, andere mischen und stimmen je nach Kontext und gewünschter Farbe überein. Es liegt wirklich an dir!