Farben und Hintergründe
Farben und Hintergründe sind zentrale Elemente im Webdesign, die massgeblich zur visuellen Identität und Benutzererfahrung einer Website beitragen. In diesem Kapitel lernen Sie, wie Sie Farben effektiv einsetzen und Hintergründe mit CSS gestalten können.
Farbwerte in CSS
Abschnitt betitelt „Farbwerte in CSS“CSS bietet verschiedene Möglichkeiten, Farben zu definieren:
Benannte Farben
Abschnitt betitelt „Benannte Farben“CSS unterstützt 140 benannte Farben:
h1 { color: red;}
p { color: steelblue;}
.warning { color: orange;}Benannte Farben sind leicht zu verwenden, bieten jedoch begrenzte Auswahlmöglichkeiten.
Hexadezimalwerte (HEX)
Abschnitt betitelt „Hexadezimalwerte (HEX)“Hexadezimalwerte sind die am häufigsten verwendete Methode zur Farbdefinition:
h1 { color: #ff0000; /* Rot */}
p { color: #4682b4; /* Stahlblau */}
.highlight { color: #ffa500; /* Orange */}Ein Hexadezimalwert beginnt mit dem Zeichen # gefolgt von sechs Ziffern (0-9) oder Buchstaben (A-F). Die sechs Stellen repräsentieren drei Farbkomponenten:
- Die ersten zwei Stellen stehen für Rot (RR)
- Die mittleren zwei für Grün (GG)
- Die letzten zwei für Blau (BB)
Jeder Farbkanal kann Werte von 00 (kein Anteil) bis FF (maximaler Anteil) haben.
Wenn die sechs Ziffern paarweise identisch sind, kann die Kurzform verwendet werden:
.shorthand { color: #f00; /* Entspricht #ff0000 */}RGB und RGBA
Abschnitt betitelt „RGB und RGBA“RGB (Rot, Grün, Blau) definiert Farben mit numerischen Werten von 0 bis 255 für jeden Farbkanal:
h1 { color: rgb(255, 0, 0); /* Rot */}
p { color: rgb(70, 130, 180); /* Stahlblau */}RGBA fügt einen Alpha-Kanal (Transparenz) hinzu, der Werte von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) annehmen kann:
.overlay-text { color: rgba(0, 0, 0, 0.7); /* Schwarzer Text mit 70% Deckkraft */}
.highlight { background-color: rgba(255, 255, 0, 0.3); /* Gelbe Hervorhebung mit 30% Deckkraft */}HSL und HSLA
Abschnitt betitelt „HSL und HSLA“HSL (Farbton, Sättigung, Helligkeit) ist ein alternatives Farbmodell, das oft intuitiver für Farbmanipulation ist:
.primary { color: hsl(120, 100%, 50%); /* Reines Grün */}
.secondary { color: hsl(240, 100%, 50%); /* Reines Blau */}
.pastel { color: hsl(180, 50%, 80%); /* Pastellfarbenes Cyan */}- Farbton (Hue): 0-360 Grad auf dem Farbkreis (0/360 ist Rot, 120 ist Grün, 240 ist Blau)
- Sättigung (Saturation): 0% (Grauton) bis 100% (Vollfarbe)
- Helligkeit (Lightness): 0% (Schwarz) bis 100% (Weiss), 50% ist die normale Farbhelligkeit
HSLA fügt wie RGBA einen Alpha-Kanal für Transparenz hinzu:
.transparent-overlay { background-color: hsla(0, 0%, 0%, 0.5); /* Halbtransparentes Schwarz */}Hintergrundfarben
Abschnitt betitelt „Hintergrundfarben“Die Eigenschaft background-color legt die Hintergrundfarbe eines Elements fest:
body { background-color: #f0f0f0; /* Hellgrauer Hintergrund */}
header { background-color: #333333; /* Dunkelgrauer Hintergrund */}
.highlight-box { background-color: rgba(255, 255, 0, 0.2); /* Leicht transparenter gelber Hintergrund */}Hintergrundbilder
Abschnitt betitelt „Hintergrundbilder“Mit CSS können Sie Hintergrundbilder hinzufügen und deren Darstellung steuern:
Grundlegende Verwendung
Abschnitt betitelt „Grundlegende Verwendung“.hero { background-image: url('images/background.jpg');}Hintergrundwiederholung
Abschnitt betitelt „Hintergrundwiederholung“Die background-repeat-Eigenschaft steuert, wie ein Hintergrundbild wiederholt wird:
.no-repeat { background-image: url('icon.png'); background-repeat: no-repeat; /* Bild wird nicht wiederholt */}
.repeat-x { background-image: url('pattern.png'); background-repeat: repeat-x; /* Bild wird nur horizontal wiederholt */}
.repeat-y { background-image: url('pattern.png'); background-repeat: repeat-y; /* Bild wird nur vertikal wiederholt */}
.repeat { background-image: url('pattern.png'); background-repeat: repeat; /* Bild wird in beide Richtungen wiederholt (Standard) */}Hintergrundposition
Abschnitt betitelt „Hintergrundposition“Die background-position-Eigenschaft bestimmt, wo das Hintergrundbild positioniert wird:
.centered { background-image: url('logo.png'); background-repeat: no-repeat; background-position: center; /* Zentriert */}
.top-right { background-image: url('icon.png'); background-repeat: no-repeat; background-position: top right; /* Oben rechts */}
.custom-position { background-image: url('icon.png'); background-repeat: no-repeat; background-position: 20px 50px; /* 20px von links, 50px von oben */}
.percentage { background-image: url('large-image.jpg'); background-repeat: no-repeat; background-position: 75% 50%; /* Bei 75% horizontal und 50% vertikal */}Hintergrundgrösse
Abschnitt betitelt „Hintergrundgrösse“Die background-size-Eigenschaft steuert die Grösse des Hintergrundbildes:
.contain { background-image: url('image.jpg'); background-repeat: no-repeat; background-size: contain; /* Skaliert, um vollständig zu passen, wobei das Seitenverhältnis erhalten bleibt */}
.cover { background-image: url('image.jpg'); background-repeat: no-repeat; background-size: cover; /* Skaliert, um den Container vollständig zu füllen, wobei das Seitenverhältnis erhalten bleibt */}
.custom-size { background-image: url('icon.png'); background-repeat: no-repeat; background-size: 50px 50px; /* Genau 50x50 Pixel */}
.percentage-size { background-image: url('pattern.jpg'); background-size: 50% 100%; /* 50% der Breite, 100% der Höhe */}Hintergrundbefestigung
Abschnitt betitelt „Hintergrundbefestigung“Die background-attachment-Eigenschaft bestimmt, ob das Hintergrundbild mit dem Rest der Seite scrollt:
.scroll { background-image: url('large-image.jpg'); background-attachment: scroll; /* Bild scrollt mit dem Element (Standard) */}
.fixed { background-image: url('large-image.jpg'); background-attachment: fixed; /* Bild bleibt fest an seiner Position, unabhängig vom Scrollen */}
.local { background-image: url('pattern.jpg'); background-attachment: local; /* Bild scrollt mit dem Inhalt des Elements */}Hintergrund-Kurzschreibweise
Abschnitt betitelt „Hintergrund-Kurzschreibweise“Sie können alle Hintergrundeigenschaften in einer Kurzschreibweise kombinieren:
.hero { background: #f0f0f0 url('hero-image.jpg') no-repeat center/cover; /* Farbe, Bild, Wiederholung, Position/Grösse */}Mehrere Hintergrundbilder
Abschnitt betitelt „Mehrere Hintergrundbilder“CSS erlaubt die Verwendung mehrerer Hintergrundbilder, die übereinander geschichtet werden:
.multiple-backgrounds { background: url('top-layer.png') no-repeat center top, url('middle-layer.png') no-repeat center center, url('bottom-layer.png') no-repeat center bottom, #333333; /* Der erste Hintergrund ist ganz oben, der letzte (Farbe) ganz unten */}Farbverläufe
Abschnitt betitelt „Farbverläufe“CSS-Farbverläufe erzeugen einen weichen Übergang zwischen zwei oder mehr Farben:
Lineare Verläufe
Abschnitt betitelt „Lineare Verläufe“Lineare Verläufe verlaufen entlang einer geraden Linie:
.vertical-gradient { background: linear-gradient(#e66465, #9198e5); /* Von oben (#e66465) nach unten (#9198e5) */}
.horizontal-gradient { background: linear-gradient(to right, #e66465, #9198e5); /* Von links (#e66465) nach rechts (#9198e5) */}
.diagonal-gradient { background: linear-gradient(to bottom right, #e66465, #9198e5); /* Von oben links (#e66465) nach unten rechts (#9198e5) */}
.angled-gradient { background: linear-gradient(45deg, #e66465, #9198e5); /* 45-Grad-Winkel von unten links nach oben rechts */}Mehrfarbige Verläufe
Abschnitt betitelt „Mehrfarbige Verläufe“Sie können mehr als zwei Farben angeben:
.multi-color { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Regenbogenverlauf von links nach rechts */}Farbstopps
Abschnitt betitelt „Farbstopps“Sie können bestimmen, wo jede Farbe im Verlauf beginnt:
.color-stops { background: linear-gradient(to right, red 0%, orange 15%, yellow 30%, green 50%, blue 70%, indigo 85%, violet 100% );}Radiale Verläufe
Abschnitt betitelt „Radiale Verläufe“Radiale Verläufe verlaufen von einem Mittelpunkt nach aussen:
.radial-gradient { background: radial-gradient(#e66465, #9198e5); /* Von der Mitte (#e66465) nach aussen (#9198e5) */}
.positioned-radial { background: radial-gradient(at top right, #e66465, #9198e5); /* Mittelpunkt ist oben rechts */}
.shaped-radial { background: radial-gradient(circle, #e66465, #9198e5); /* Kreisförmiger Verlauf */}
.elliptical-radial { background: radial-gradient(ellipse, #e66465, #9198e5); /* Elliptischer Verlauf (Standard) */}Wiederholende Verläufe
Abschnitt betitelt „Wiederholende Verläufe“Wiederholende Verläufe erzeugen Streifenmuster:
.repeating-linear { background: repeating-linear-gradient( 45deg, #f0f0f0, #f0f0f0 10px, #cccccc 10px, #cccccc 20px ); /* 45-Grad-Streifen, die sich alle 20px wiederholen */}
.repeating-radial { background: repeating-radial-gradient( circle at center, #f0f0f0, #f0f0f0 10px, #cccccc 10px, #cccccc 20px ); /* Konzentrische Kreise, die sich alle 20px wiederholen */}Farbschemata und Designtipps
Abschnitt betitelt „Farbschemata und Designtipps“Kontrastreiches Text-Hintergrund-Verhältnis
Abschnitt betitelt „Kontrastreiches Text-Hintergrund-Verhältnis“Achten Sie auf ausreichenden Kontrast zwischen Text und Hintergrund für gute Lesbarkeit:
.good-contrast { background-color: #333333; color: #ffffff; /* Weisser Text auf dunklem Hintergrund */}
.poor-contrast { background-color: #444444; color: #666666; /* Schlechter Kontrast, schwer zu lesen */}Farbschemata
Abschnitt betitelt „Farbschemata“Ein typisches Farbschema für eine Website könnte so aussehen:
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --accent-color: #e74c3c; --text-color: #333333; --background-color: #f5f5f5; --light-color: #ffffff; --dark-color: #222222;}
body { background-color: var(--background-color); color: var(--text-color);}
header { background-color: var(--primary-color); color: var(--light-color);}
.button-primary { background-color: var(--primary-color); color: var(--light-color);}
.button-secondary { background-color: var(--secondary-color); color: var(--light-color);}
.highlight { color: var(--accent-color);}Die Verwendung von CSS-Variablen macht es einfach, ein konsistentes Farbschema auf der gesamten Website zu implementieren und bei Bedarf zu ändern.
Übung: Farbschema und Hintergrundgestaltung
Abschnitt betitelt „Übung: Farbschema und Hintergrundgestaltung“Im nächsten Kapitel werden wir uns mit der Positionierung von Elementen in CSS beschäftigen und lernen, wie Sie Elemente präzise auf Ihrer Webseite platzieren können.