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

CSS bietet verschiedene Möglichkeiten, Farben zu definieren:

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)

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

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

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

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

Mit CSS können Sie Hintergrundbilder hinzufügen und deren Darstellung steuern:

Grundlegende Verwendung

.hero {
  background-image: url('images/background.jpg');
}

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

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

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

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

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

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

CSS-Farbverläufe erzeugen einen weichen Übergang zwischen zwei oder mehr Farben:

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

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

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

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

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

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

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

Aufgabe: Gestalten einer Landing Page mit Farben und Hintergründen

1. Erstellen Sie eine neue HTML-Datei mit folgendem Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reiseblog: Entdecke die Welt</title>
  <link rel="stylesheet" href="travel-styles.css">
</head>
<body>
  <header class="hero">
    <div class="overlay">
      <h1>Entdecke die Welt</h1>
      <p class="tagline">Abenteuer, Geschichten und Inspirationen für Reisende</p>
      <button class="cta-button">Reiseziele entdecken</button>
    </div>
  </header>

  <section class="features">
    <div class="feature-card">
      <div class="icon-container mountains">
        <!-- Icon wird per CSS hinzugefügt -->
      </div>
      <h2>Bergabenteuer</h2>
      <p>Entdecken Sie majestätische Gipfel und atemberaubende Ausblicke.</p>
    </div>

    <div class="feature-card">
      <div class="icon-container beaches">
        <!-- Icon wird per CSS hinzugefügt -->
      </div>
      <h2>Traumstrände</h2>
      <p>Entspannen Sie an kristallklarem Wasser und weissen Sandstränden.</p>
    </div>

    <div class="feature-card">
      <div class="icon-container cities">
        <!-- Icon wird per CSS hinzugefügt -->
      </div>
      <h2>Urbane Erlebnisse</h2>
      <p>Tauchen Sie ein in die Kultur und Geschichte aufregender Städte.</p>
    </div>
  </section>

  <section class="testimonial">
    <blockquote>
      "Dieser Reiseblog hat mir geholfen, die versteckten Juwelen zu finden, die kein Reiseführer erwähnt. Eine unvergessliche Erfahrung!"
    </blockquote>
    <cite>- Maria Schmidt, Weltenbummlerin</cite>
  </section>

  <section class="newsletter">
    <h2>Bleiben Sie informiert</h2>
    <p>Erhalten Sie Reiseinspirationsdirekt in Ihr Postfach</p>
    <form>
      <input type="email" placeholder="Ihre E-Mail-Adresse">
      <button type="submit">Abonnieren</button>
    </form>
  </section>

  <footer>
    <p>&copy; 2025 Entdecke die Welt - Reiseblog</p>
  </footer>
</body>
</html>

2. Erstellen Sie eine neue Datei namens travel-styles.css im gleichen Ordner.
3. Gestalten Sie die Landing Page mit folgenden Anforderungen:

• Definieren Sie ein Farbschema mit CSS-Variablen (mindestens Primärfarbe, Sekundärfarbe, Akzentfarbe)
• Gestalten Sie einen Hero-Bereich mit einem Hintergrundbild und einem halbtransparenten Overlay
• Verwenden Sie einen Farbverlauf für den Newsletter-Bereich
• Styling für die Feature-Cards mit unterschiedlichen Hintergrundfarben oder -mustern
• Fügen Sie den Icon-Containern passende Hintergrundbilder oder -farben hinzu
• Gestalten Sie den Testimonial-Bereich mit einem subtilen Hintergrund
• Verwenden Sie Kontraste für gute Lesbarkeit, insbesondere bei Buttons und Überschriften
• Experimentieren Sie mit verschiedenen Hintergrundeffekten für verschiedene Abschnitte

4. Bonus-Herausforderungen:

• Fügen Sie einen subtilen Hintergrundeffekt für den gesamten Body hinzu
• Implementieren Sie Hover-Effekte mit Farbänderungen für interaktive Elemente
• Verwenden Sie mehrere Hintergrundbilder für einen der Abschnitte

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.