Verläufe

8.1 Lineare Verläufe (linear-gradient)

Verläufe in CSS ermöglichen es, sanfte Übergänge zwischen zwei oder mehr Farben zu erzeugen. Sie werden für Hintergründe, Buttons und andere Elemente verwendet, um visuelle Tiefe und Attraktivität hinzuzufügen. In CSS gibt es zwei hauptsächliche Arten von Verläufen: lineare (linear-gradient) und radiale (radial-gradient).

Ein linearer Verlauf erzeugt einen sanften Übergang zwischen Farben entlang einer geraden Linie. Die Richtung der Linie und Farbverläufe können genau angepasst werden.

Syntax:

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

Wo:

• direction: die Richtung des Verlaufs. Kann in einem Winkel angegeben werden (z.B. 45deg) oder als Schlüsselwörter (to right, to bottom, etc.)
• color-stop: definiert die Farbe und ihre Position im Verlauf

Beispiel 1: Einfacher linearer Verlauf

In diesem Beispiel wird ein Verlauf erstellt, der von Rot nach Blau von rechts nach links übergeht:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red, blue);
      }
    
  

Beispiel 2: Linearer Verlauf mit einem Winkel

In diesem Beispiel verläuft der Verlauf im Winkel von 45 Grad von Gelb nach Grün:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(45deg, yellow, green);
      }
    
  

Beispiel 3: Linearer Verlauf mit mehreren Farben

In diesem Beispiel verläuft der Verlauf von oben nach unten und geht sanft durch vier Farben: Rot, Gelb, Grün und Blau:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to bottom, red, yellow, green, blue);
      }
    
  

Beispiel 4: Linearer Verlauf mit Kontrollpunkten

In diesem Beispiel sind Kontrollpunkte angegeben, die die genaue Position jeder Farbe im Verlauf bestimmen:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
      }
    
  

8.2 Radiale Verläufe (radial-gradient)

Ein radialer Verlauf erzeugt sanfte Übergänge zwischen Farben, die vom Zentrum oder einem angegebenen Punkt ausgehen. Der Verlauf breitet sich zirkulär oder elliptisch aus.

Syntax:

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

Wo:

• shape: die Form des Verlaufs (circle oder ellipse)
• size: die Größe des Verlaufs (closest-side, farthest-side, closest-corner, farthest-corner)
• position: die Position des Verlaufszentrums (kann in Pixeln, Prozent oder Schlüsselwörtern wie center, top, left etc. angegeben werden)
• color-stop: definiert die Farbe und ihre Position im Verlauf

Beispiel 1: Einfacher radialer Verlauf

In diesem Beispiel wird ein radialer Verlauf erstellt, der vom Zentrum des Kreises von Rot zu Blau übergeht:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, blue);
      }
    
  

Beispiel 2: Radialer Verlauf mit unterschiedlicher Positionierung

In diesem Beispiel ist das Zentrum des radialen Verlaufs in die obere linke Ecke verschoben, wodurch ein Übergang von Gelb zu Grün entsteht:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at top left, yellow, green);
      }
    
  

Beispiel 3: Radialer Verlauf mit mehreren Farben

In diesem Beispiel verläuft der Verlauf vom Zentrum des Kreises, indem er sanft durch vier Farben geht: Rot, Gelb, Grün und Blau:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, yellow, green, blue);
      }
    
  

Beispiel 4: Radialer Verlauf mit Kontrollpunkten

In diesem Beispiel sind Kontrollpunkte angegeben, die die genaue Position jeder Farbe im Verlauf bestimmen:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
      }
    
  

8.3 Beispiele für komplexe Verläufe

Beispiel 1: Linearer Verlauf mit Transparenz

In diesem Beispiel wird Transparenz verwendet, um einen Verlauf von transparentem Rot zu transparentem Blau zu erstellen:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
      }
    
  

Beispiel 2: Radialer Verlauf mit Größen

In diesem Beispiel wird ein elliptischer radialer Verlauf erstellt, der die nächstgelegene Seite des Elements ausfüllt:

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(ellipse closest-side, red, blue);
      }
    
  

Beispiel 3: Erstellung von Verlauf für Buttons

Verläufe können Buttons attraktiver machen. Dieser Verlauf verläuft von oben nach unten, von hellgrün zu dunkelgrün, und verleiht dem Button Volumen und Tiefe:

    
      <button type="button" class="button">Button</button>
    
  

    
      .button {
        background: linear-gradient(to bottom, #4caf50, #2e7d32);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
      }
    
  

Vorteile der Verwendung von Verläufen:

1. Visuelle Attraktivität. Verläufe ermöglichen es, sanfte Übergänge zwischen Farben zu schaffen und Design-Elementen visuelle Tiefe und Attraktivität zu verleihen.

2. Flexibilität. Verläufe können angepasst werden, um verschiedene Effekte zu erzielen, von einfachen Übergängen bis hin zu komplexen, mehrfarbigen Hintergründen.

3. Unterstützung für responsives Design. Verläufe passen sich leicht an unterschiedliche Bildschirmgrößen und Auflösungen an, was sie nützlich für die Erstellung von responsiven Webdesigns macht.