CSS - Farben: Eine farbenfrohe Reise für Anfänger

Hallo da draußen, zukünftige Webdesign-Meister! ? Ich freue mich sehr, euch auf eine lebendige Reise durch die Welt der CSS-Farben mitzunehmen. Als jemand, der dies seit Jahren unterrichtet, kann ich euch sagen, dass das Verständnis von Farben in CSS so ist, als würde man mit Code malen. Es ist spaßig, kreativ und unglaublich befriedigend, wenn man es richtig macht!

CSS - Colors

CSS-Farbenwerte

Lassen wir mit den Grundlagen beginnen. In CSS haben wir mehrere Möglichkeiten, Farben auszudrücken. Es ist, als hätte man verschiedene Pinsel in seinem Werkzeugkasten. Hier ist eine praktische Tabelle zur Zusammenfassung:

Farbvalue-Typ	Beispiel	Beschreibung
Schlüsselwort	`red`, `blue`, `green`	Vordefinierte Farbnamen
Hexadezimal	`#FF0000`, `#00FF00`	6-stellige Codes, die RGB-Werte darstellen
RGB	`rgb(255, 0, 0)`	Rot, Grün, Blaue Werte (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	RGB mit Alpha (Deckkraft) Kanal
HSL	`hsl(0, 100%, 50%)`	Farbton, Sättigung, Helligkeit
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL mit Alpha Kanal

Nun tauchen wir tiefer in jede dieser Möglichkeiten ein und schauen uns an, wie wir unsere Webseiten damit gestalten können!

CSS-Hintergrundfarbe

Die Hintergrundfarbe ist wie die Leinwand deiner Webseite. Lassen wir mit einem einfachen Beispiel beginnen:

body {
background-color: #87CEEB;
}

Dieser Code setzt den Hintergrund deiner gesamten Seite auf ein schönes Himmelblau. Das #87CEEB ist ein hexadezimaler Farbbox. Denke daran als einen geheimen Code, den Browser verstehen, um Farben anzuzeigen.

Aber was ist, wenn du einer bestimmten Komponente eine Hintergrundfarbe hinzufügen möchtest? Kein Problem!

.highlight-box {
background-color: rgb(255, 255, 0);
}

Dies macht jedes Element mit der Klasse highlight-box mit einem hellem gelben Hintergrund. Hier verwenden wir RGB-Werte, wobei jede Zahl die Intensität von Rot, Grün und Blau darstellt.

CSS-Textfarbe

Nun, da wir unseren Hintergrund gestaltet haben, lassen wir uns die Textfarbe ansehen:

p {
color: #333333;
}

Dies setzt alle Absatztexte auf eine dunkle Grau. Beachte, dass wir die Eigenschaft color für Text verwenden, nicht text-color. Es ist eines dieser Kuriositäten, an die man sich gewöhnen wird!

Lassen wir das etwas interessanter gestalten:

.warning {
color: rgba(255, 0, 0, 0.7);
}

Dies erstellt eine halbtransparente rote Farbe für Elemente mit der Klasse warning. Der letzte Wert in rgba() ist der Alpha-Kanal, der die Deckkraft von 0 (vollkommen transparent) bis 1 (vollkommen deckend) steuert.

CSS-Rahmenfarbe

Rahmen sind wie der Rahmen deines Gemäldes. Lassen wir auch ihnen Farbe verleihen:

.box {
border: 2px solid #4CAF50;
}

Dies erstellt einen 2-Pixel-breiten, festen grünen Rand um Elemente mit der Klasse box.

Warum aber nicht bei einer Farbe bleiben? Lassen wir es kunstvoll sein:

.fancy-box {
border-top: 3px dotted red;
border-right: 3px dashed green;
border-bottom: 3px solid blue;
border-left: 3px double yellow;
}

Jetzt haben wir verschiedene Farben und Stile für jede Seite des Rahmens. Es ist wie eine kleine Regenbogenbox!

CSS-Cursorfarbe

Wusstest du, dass du sogar die Farbe des blinkenden Cursors in Eingabefeldern ändern kannst? Dafür gibt es caret-color:

input {
caret-color: purple;
}

Jetzt siehst du in jedem Eingabefeld einen fabulous violetten Cursor!

CSS-Farbschlüsselwörter

Manchmal willst du Dinge einfach halten. Das ist, wo Farbschlüsselwörter praktisch sind:

.sky {
background-color: skyblue;
}

.grass {
background-color: limegreen;
}

.sun {
background-color: gold;
}

Diese vordefinierten Farbnamen sind leicht zu merken und zu verwenden. Es gibt 140 Farbschlüsselwörter in CSS3, die dir viele Optionen bieten, ohne komplexe Codes merken zu müssen.

CSS-Farben Erben Schlüsselwort

Das inherit Schlüsselwort ist so, als würdest du einem Element sagen: "Verwende einfach die Farbe deines Elternteils." Es ist großartig für die Wahrung der Konsistenz:

.parent {
color: blue;
}

.child {
color: inherit;
}

In diesem Fall werden die .child Elemente auch blau sein, indem sie die Farbe ihres Elternteils erben.

CSS-Farben Transparent Schlüsselwort

Manchmal möchtest du gar keine Farbe haben. Das ist, wo transparent ins Spiel kommt:

.ghost-button {
background-color: transparent;
border: 2px solid black;
}

Dies erstellt eine Schaltfläche ohne Hintergrundfarbe, nur mit einem schwarzen Rand. Es ist wie ein Fenster in deinem Design!

CSS-Farben currentColor Schlüsselwort

Das currentColor Schlüsselwort ist wie ein Chamäleon – es nimmt die aktuelle Farbe des Elements an:

.chameleon {
color: green;
border: 1px solid currentColor;
}

Hier wird der Rand grün, passend zur Textfarbe. Wenn du die Textfarbe änderst, ändert sich auch die Randfarbe automatisch!

CSS-Farben codes erstellen

Nun, lassen wir uns über das Erstellen eigener Farbcodes sprechen. Hexadezimalcodes sind wie das Mischen von Farben:

/* Rein Rot */
.red-box { background-color: #FF0000; }

/* Rein Grün */
.green-box { background-color: #00FF00; }

/* Rein Blau */
.blue-box { background-color: #0000FF; }

Jede Paar von Zeichen repräsentiert die Intensität von Rot, Grün und Blau respectively, von 00 (keine) bis FF (volle).

HSL ist eine andere Möglichkeit, Farben zu denken:

/* Helles Rot */
.bright-red { color: hsl(0, 100%, 50%); }

/* Pastellblau */
.pastel-blue { color: hsl(210, 100%, 80%); }

Hier ist die erste Zahl der Farbton (0-360), die zweite ist die Sättigung (0-100%), und die dritte ist die Helligkeit (0-100%).

CSS-Browser-sichere Farben

In den Anfängen des Internets mussten wir uns an eine begrenzte Palette von 216 Farben halten, die alle Browser anzeigen konnten. Diese wurden "web-sicher" Farben genannt. Heute, mit modernen Anzeigen, ist das nicht mehr so wichtig, aber es ist gut zu wissen:

.old-school {
color: #CC3300; /* Eine web-sichere Orange */
}

Diese Farben sind Kombinationen von 00, 33, 66, 99, CC und FF für jeden RGB-Bestandteil.

Und das war's, meine farbenfrohen Gefährten! Wir haben die Grundlagen der CSS-Farben durchgemalt. Denke daran, der beste Weg zum Lernen ist das Experimentieren. Also, öffne deinen Code-Editor und fange an, deine digitale Welt zu gestalten. Viel Spaß beim Coden und möge deine Designs immer leuchtend sein! ??‍??‍?

Credits: Image by storyset