7 Farben, Hintergründe und Verläufe

7.1 Hintergrundbilder und -muster

Hintergrundbilder und -muster sind eine effektive Methode, um Webseiten zu gestalten und visuell ansprechend zu machen. CSS bietet eine Vielzahl von Eigenschaften zur Steuerung von Hintergrundbildern und -mustern, die es ermöglichen, Bilder dynamisch zu skalieren, zu wiederholen oder zu positionieren.

7.1.1 Grundlagen für Hintergrundbilder

Die grundlegende CSS-Eigenschaft zur Definition eines Hintergrundbildes ist background-image. Mit dieser Eigenschaft lässt sich ein Bild als Hintergrund für ein Element festlegen.

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

Das Bild background.jpg wird als Hintergrund des body-Elements angezeigt.

7.1.2 Mehrere Hintergrundbilder

CSS unterstützt die Verwendung mehrerer Hintergrundbilder innerhalb eines Elements. Die Bilder werden durch Kommas getrennt und von oben nach unten gestapelt.

body {
    background-image: url('images/pattern.png'), url('images/background.jpg');
}

In diesem Beispiel wird das Bild pattern.png über dem background.jpg angezeigt.

7.1.3 Wiederholung von Hintergrundbildern

Die Eigenschaft background-repeat steuert, ob und wie das Hintergrundbild wiederholt wird:

• repeat: Das Hintergrundbild wird horizontal und vertikal wiederholt.
• repeat-x: Das Hintergrundbild wird nur horizontal wiederholt.
• repeat-y: Das Hintergrundbild wird nur vertikal wiederholt.
• no-repeat: Das Hintergrundbild wird nicht wiederholt.

body {
    background-image: url('images/pattern.png');
    background-repeat: repeat-x;
}

Hier wird das Bild nur horizontal wiederholt.

7.1.4 Positionierung von Hintergrundbildern

Mit der background-position-Eigenschaft lässt sich die Position des Hintergrundbildes im Container festlegen. Diese Position kann in relativen Werten (z. B. center, top right) oder in absoluten Einheiten (z. B. 50px 100px) definiert werden.

body {
    background-image: url('images/background.jpg');
    background-position: center center;
}

Das Hintergrundbild wird hier zentriert.

7.1.5 Skalierung und Anpassung von Hintergrundbildern

Die background-size-Eigenschaft passt die Größe des Hintergrundbildes an:

• auto: Das Bild behält seine Originalgröße bei.
• cover: Das Bild wird so skaliert, dass es den gesamten Container füllt, ohne das Seitenverhältnis zu verzerren.
• contain: Das Bild wird vollständig innerhalb des Containers angezeigt und dabei skaliert, sodass das Seitenverhältnis erhalten bleibt.

body {
    background-image: url('images/background.jpg');
    background-size: cover;
}

Hier füllt das Hintergrundbild den gesamten Container.

7.1.6 Fixierte und lokale Hintergrundbilder

Die background-attachment-Eigenschaft steuert, ob das Hintergrundbild beim Scrollen fixiert bleibt oder sich mit dem Inhalt bewegt:

• scroll: Das Hintergrundbild bewegt sich mit dem Inhalt.
• fixed: Das Hintergrundbild bleibt beim Scrollen fixiert.
• local: Das Hintergrundbild bewegt sich innerhalb eines scrollbaren Containers.

body {
    background-image: url('images/background.jpg');
    background-attachment: fixed;
}

7.1.7 Kombination von Hintergrundeigenschaften

CSS ermöglicht die Verkettung von Hintergrundeigenschaften in einer einzigen background-Eigenschaft:

body {
    background: url('images/background.jpg') no-repeat center center / cover;
}

Hier wird das Bild zentriert, nicht wiederholt und auf die Größe des Containers skaliert.

7.1.8 CSS-Hintergrundmuster mit background-image

Anstelle eines Bildes kann auch ein CSS-Verlauf oder ein SVG-Muster als Hintergrund verwendet werden, um ein Muster zu erstellen. Solche Muster sind vektorisiert und somit skalierbar, ohne dass sie an Qualität verlieren.

7.1.8.1 Beispiel für ein einfaches Streifenmuster

body {
    background-image: linear-gradient(45deg, #f06, transparent 50%);
    background-size: 10px 10px;
}

Hier erzeugt ein diagonaler Farbverlauf in Kombination mit background-size ein regelmäßiges Streifenmuster.

7.2 CSS-Gradients

CSS-Gradients (Verläufe) ermöglichen es, sanfte Übergänge zwischen zwei oder mehr Farben direkt in CSS zu erstellen, ohne dass ein Bild verwendet werden muss. Gradients sind vielseitig einsetzbar und verbessern die Ladezeiten und Anpassbarkeit von Webseiten, da sie als vektorbasierte Hintergründe eine flexible Alternative zu Bilddateien darstellen.

7.2.1 Grundtypen von CSS-Gradients

Es gibt drei Haupttypen von CSS-Gradients: lineare Verläufe, radiale Verläufe und konische Verläufe. Jeder Typ kann durch Anpassung von Farben, Winkeln und Positionen gesteuert werden.

7.2.2 Lineare Verläufe

Ein linearer Verlauf wechselt die Farben entlang einer Linie, die durch einen bestimmten Winkel oder eine Richtung definiert ist. Lineare Verläufe werden mit der Funktion linear-gradient() erstellt.

Syntax:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction: Gibt die Richtung des Verlaufs an (z. B. to right, to bottom, oder in Winkeln wie 45deg).
• color-stop: Definiert die Farben und optional den Prozentsatz, ab dem die nächste Farbe beginnt.

7.2.2.1 Beispiel für einen linearen Verlauf

background-image: linear-gradient(to right, #ff7e5f, #feb47b);

In diesem Beispiel verläuft der Übergang von einem Pinkton (#ff7e5f) zu einem Orangeton (#feb47b) von links nach rechts.

7.2.2.2 Anpassung mit Winkeln

Anstelle von Richtungen kann auch ein Winkel angegeben werden:

background-image: linear-gradient(45deg, #ff7e5f, #feb47b);

Hier verläuft der Gradient in einem 45-Grad-Winkel.

7.2.2.3 Farbstopps

Mit Farbstopps können Positionen innerhalb des Verlaufs definiert werden, an denen bestimmte Farben erscheinen. Dies ermöglicht mehrfarbige Verläufe und präzise Übergänge.

background-image: linear-gradient(to bottom, #ff7e5f 20%, #feb47b 80%);

Hier beginnt der Übergang zu Orange bei 20% und endet bei 80%.

7.2.3 Radiale Verläufe

Radiale Verläufe (radial gradients) erzeugen kreisförmige oder ellipsenförmige Übergänge, die von einem zentralen Punkt aus nach außen verlaufen. Sie werden mit der Funktion radial-gradient() erstellt.

Syntax:

background-image: radial-gradient(shape size, color-stop1, color-stop2, ...);

• shape: Gibt die Form des Verlaufs an, entweder circle (Kreis) oder ellipse (Ellipse).
• size: Legt die Größe des Verlaufs fest, z. B. closest-side, farthest-corner.
• color-stop: Definiert die Farben und ihre Positionen innerhalb des Verlaufs.

7.2.3.1 Beispiel für einen radialen Verlauf

background-image: radial-gradient(circle, #ff7e5f, #feb47b);

Dieser Verlauf beginnt in der Mitte mit Pink und wechselt sanft zu Orange, wobei die Form ein Kreis ist.

7.2.3.2 Ellipsenförmiger radialer Verlauf

background-image: radial-gradient(ellipse, #ff7e5f, #feb47b);

Hier wird der Verlauf als Ellipse dargestellt, die sich von der Mitte des Elements aus ausbreitet.

7.2.4 Konische Verläufe

Ein konischer Verlauf (conic gradient) wechselt die Farben kreisförmig um einen Mittelpunkt, ähnlich wie ein Kuchendiagramm. Er wird mit der Funktion conic-gradient() erstellt und ist ideal für Diagramme oder spezielle Design-Effekte.

Syntax:

background-image: conic-gradient(from angle, color-stop1, color-stop2, ...);

• from angle: Der Startwinkel für den Verlauf (optional).
• color-stop: Definiert die Farben und ihre Positionen.

7.2.4.1 Beispiel für einen konischen Verlauf

background-image: conic-gradient(from 0deg, #ff7e5f, #feb47b, #86a8e7, #7f7fd5);

Dieser Verlauf wechselt die Farben kreisförmig um die Mitte, beginnend mit Pink, dann Orange, Blau und Lila.

7.2.5 Transparente Verläufe

Farben in CSS-Gradients können mit Transparenz kombiniert werden, um weichere Übergänge und überlagerte Effekte zu schaffen. Transparente Verläufe werden durch Verwendung der rgba()-Funktion oder des Schlüsselworts transparent erreicht.

background-image: linear-gradient(to bottom, rgba(255, 126, 95, 0.8), transparent);

Dieser Verlauf geht von einer leicht transparenten Farbe in vollständige Transparenz über.

7.2.6 Wiederholung von Verläufen

Mit der Funktion repeating-linear-gradient() und repeating-radial-gradient() lassen sich sich wiederholende Verläufe erstellen, die Muster erzeugen.

background-image: repeating-linear-gradient(45deg, #ff7e5f, #feb47b 10%);

Dieser Verlauf wiederholt sich alle 10% und erzeugt ein diagonales Streifenmuster.

7.2.7 Praktische Anwendungen

• Hintergrundmuster: Verläufe können als Hintergrundmuster dienen, die sich flexibel an den Container anpassen.
• Overlay-Effekte: Überlagerungen auf Hintergrundbildern verbessern die Lesbarkeit von Text.
• 3D-Effekte: Sanfte Farbverläufe lassen Flächen plastischer erscheinen.

7.3 Blendmodes und Filter

Blendmodes und Filter bieten leistungsstarke Möglichkeiten, visuelle Effekte direkt in CSS anzuwenden. Sie können verwendet werden, um Farben und Bildebenen zu überlagern, Kontraste anzupassen oder kreative Effekte zu erzielen, ohne zusätzliche Bildbearbeitungssoftware zu benötigen.

7.3.1 Blendmodes (Mischmodi)

Blendmodes bestimmen, wie zwei Ebenen (zum Beispiel ein Bild und sein Hintergrund) miteinander interagieren. CSS bietet mit der Eigenschaft mix-blend-mode für Elemente und background-blend-mode für Hintergründe verschiedene Mischmodi, die aus Grafikdesign-Programmen wie Photoshop bekannt sind.

7.3.1.1 mix-blend-mode

Die mix-blend-mode-Eigenschaft legt fest, wie ein Element mit dem darunterliegenden Inhalt gemischt wird. Dies ist besonders nützlich für kreative Überlagerungen und Effekte auf Texten, Bildern und anderen Inhalten.

Beispiel:

img {
    mix-blend-mode: multiply;
}

Hier wird das Bild im Multiply-Modus überlagert, was die Farben des Bildes mit denen des darunterliegenden Hintergrunds multipliziert und so dunklere Töne erzeugt.

7.3.1.2 Werte für mix-blend-mode

Wichtige Werte sind:

• normal: Keine Überlagerung, Standardverhalten.
• multiply: Multipliziert die Farben des Elements und des Hintergrunds, um dunklere Farben zu erzeugen.
• screen: Hellt die Farben auf, indem das Element mit dem Hintergrund kombiniert wird.
• overlay: Verstärkt die Kontraste, indem helle Bereiche aufgehellt und dunkle Bereiche weiter verdunkelt werden.
• darken und lighten: Zeigt jeweils die dunkleren bzw. helleren Farben des Elements und des Hintergrunds.
• difference: Erzeugt ein invertiertes Bild, indem die Farben voneinander subtrahiert werden.

7.3.1.3 Beispiel für mix-blend-mode auf Text

h1 {
    color: red;
    mix-blend-mode: difference;
}

Der Text erscheint invertiert über seinem Hintergrund und erzeugt einen auffälligen Kontrasteffekt.

7.3.1.4 background-blend-mode

Die background-blend-mode-Eigenschaft wird verwendet, um mehrere Hintergrundbilder miteinander zu mischen. Dies ermöglicht kreative Hintergründe, die aus verschiedenen Farb- und Bildschichten bestehen.

Beispiel:

div {
    background-image: url('background.jpg'), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-blend-mode: overlay;
}

Hier wird ein Bild mit einem halbtransparenten Verlauf überlagert, um dem Hintergrundbild eine dunkle Überlagerung zu geben.

7.3.2 Filter

Filter erlauben die Anwendung von Effekten wie Unschärfe, Kontrastanpassungen oder Farbveränderungen auf Bilder und andere Elemente. Sie werden mit der filter-Eigenschaft angewendet und bieten eine Vielzahl an Effekten, die sich auch miteinander kombinieren lassen.

7.3.2.1 Filter-Typen und Beispiele

• blur(): Fügt einen Unschärfeeffekt hinzu, der weichere Ränder und Tiefenwirkung erzeugt.

  img {
      filter: blur(5px);
  }

• brightness(): Passt die Helligkeit des Elements an, wobei Werte über 1 das Bild aufhellen und Werte unter 1 abdunkeln.

  img {
      filter: brightness(0.8);
  }

• contrast(): Erhöht oder verringert den Kontrast des Elements.

  img {
      filter: contrast(150%);
  }

• grayscale(): Wandelt das Element in einen Graustufenbereich um.

  img {
      filter: grayscale(100%);
  }

• hue-rotate(): Dreht die Farbwerte des Elements, was interessante Farbeffekte erzeugen kann.

  img {
      filter: hue-rotate(90deg);
  }

• invert(): Kehrt die Farben des Elements um und erzeugt einen negativen Effekt.

  img {
      filter: invert(100%);
  }

• opacity(): Passt die Deckkraft des Elements an, was für halbtransparente Effekte nützlich ist.

  img {
      filter: opacity(50%);
  }

• sepia(): Fügt einen Sepiaeffekt hinzu, um einen warmen, vintage-artigen Look zu erzeugen.

  img {
      filter: sepia(80%);
  }

7.3.2.2 Kombination mehrerer Filter

Filter können kombiniert werden, um komplexe Effekte zu erzielen. Die Filtereffekte werden in der Reihenfolge angewendet, in der sie angegeben werden.

img {
    filter: brightness(1.2) contrast(120%) saturate(1.5) blur(2px);
}

Hier wird das Bild zuerst aufgehellt, der Kontrast und die Sättigung erhöht und schließlich eine leichte Unschärfe hinzugefügt.

7.3.3 Praktische Anwendungen von Blendmodes und Filtern

• Bildüberlagerungen: Durch mix-blend-mode können Farbüberlagerungen auf Bildern erstellt werden, ohne dass separate Bilddateien benötigt werden.
• Hervorhebung und Fokus-Effekte: Filter wie blur() oder brightness() lassen bestimmte Bereiche eines Bildes oder Textes in den Vordergrund rücken oder hervorheben.
• Vintage- und Retro-Looks: Filter wie sepia() und grayscale() sind ideal, um Bildmaterial einen klassischen Look zu verleihen.
• Hover-Effekte: Filter und Blendmodes können in Kombination mit :hover verwendet werden, um interaktive und dynamische Effekte zu erzeugen.

7.3.4 Beispiel für Hover-Effekt mit Filtern und Blendmodes

img {
    filter: grayscale(100%);
    transition: filter 0.3s;
}

img:hover {
    filter: grayscale(0%) brightness(1.2);
}

Hier wird das Bild zunächst in Graustufen dargestellt und auf Farbe zurückgesetzt, wenn der Benutzer mit der Maus darüber fährt.