Appearance
Kapitel 19: Verläufe
🎨 Lernziel: Meistern Sie CSS-Verläufe (Gradienten), um Farbübergänge zu erstellen, Bilder zu ersetzen und die Ladegeschwindigkeit zu verbessern.
19.1 Linear-Gradient
💡 Was ist ein linearer Verlauf?
Ein linearer Verlauf lässt Farben in einer Richtung fließen (von oben nach unten, von links nach rechts oder in einem Winkel).
🎯 Grundlegende Syntax
css
/* Einfacher Verlauf von oben nach unten */
background: linear-gradient(rot, blau);
/* Verlauf von links nach rechts */
background: linear-gradient(to right, rot, blau);
/* Verlauf in einem Winkel (45 Grad) */
background: linear-gradient(45deg, rot, blau);📝 Beispiel 1: Einfacher Verlauf
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Linearer Verlauf</title>
<style>
.verlauf-container {
width: 300px;
height: 200px;
/* Verlauf von oben (rot) nach unten (blau) */
background: linear-gradient(red, blue);
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="verlauf-container">
Einfacher Verlauf
</div>
</body>
</html>Erklärung:
linear-gradient(red, blue)- Verlauf von rot zu blau- Standardmäßig: von oben nach unten
📝 Beispiel 2: Verlauf in verschiedenen Richtungen
css
/* Von oben nach unten (Standard) */
background: linear-gradient(rot, blau);
/* Von links nach rechts */
background: linear-gradient(to right, rot, blau);
/* Von links oben nach rechts unten */
background: linear-gradient(to bottom right, rot, blau);
/* In einem Winkel (45 Grad) */
background: linear-gradient(45deg, rot, blau);📝 Beispiel 3: Mehrfarbiger Verlauf
css
/* Drei Farben */
background: linear-gradient(rot, gelb, grün);
/* Mit Farbstopps (Prozentangabe) */
background: linear-gradient(rot 0%, gelb 50%, grün 100%);19.2 Radial-Gradient
💡 Was ist ein radialer Verlauf?
Ein radialer Verlauf strahlt von einem Mittelpunkt nach außen (wie ein Kreis oder eine Ellipse).
🎯 Grundlegende Syntax
css
/* Einfacher radialer Verlauf */
background: radial-gradient(rot, blau);
/* Kreisförmiger Verlauf */
background: radial-gradient(circle, rot, blau);
/* Elliptischer Verlauf (Standard) */
background: radial-gradient(ellipse, rot, blau);📝 Beispiel: Radialer Verlauf
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Radialer Verlauf</title>
<style>
.radial-container {
width: 300px;
height: 300px;
/* Radialer Verlauf von der Mitte (rot) nach außen (blau) */
background: radial-gradient(red, blue);
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 50%; /* Macht es rund */
}
</style>
</head>
<body>
<div class="radial-container">
Radialer Verlauf
</div>
</body>
</html>19.3 Verlaufsüberlagerung und Mehrfarbenverläufe
🎯 Verlaufsüberlagerung
Sie können mehrere Verläufe übereinanderlegen:
css
/* Hintergrundbild + Verlauf */
background:
linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
url('hintergrund.jpg');🎯 Mehrfarbenverläufe
css
/* Regenbogen-Verlauf */
background: linear-gradient(
to right,
rot,
orange,
gelb,
grün,
blau,
indigo,
violett
);19.4 Praxis: Verlaufs-Buttons, Verlaufshintergründe, Verlaufstext
🎨 Praxis 1: Verlaufs-Button
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Verlaufs-Button</title>
<style>
.verlauf-button {
padding: 15px 30px;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
border-radius: 25px;
/* Linearverlauf von links oben nach rechts unten */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
cursor: pointer;
transition: transform 0.3s ease;
}
.verlauf-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<button class="verlauf-button">Klick mich!</button>
</body>
</html>🎨 Praxis 2: Verlaufshintergrund für die gesamte Seite
css
body {
/* Vollbild-Verlauf von oben links nach unten rechts */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
margin: 0;
}🎨 Praxis 3: Verlaufstext
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Verlaufstext</title>
<style>
.verlauf-text {
font-size: 72px;
font-weight: bold;
/* Verlauf auf den Text anwenden */
background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body>
<div class="verlauf-text">Verlaufstext</div>
</body>
</html>Erklärung:
background-clip: text- Beschneidet den Hintergrund auf den Text-webkit-text-fill-color: transparent- Macht die Textfarbe transparent, damit der Verlauf sichtbar wird
✅ Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅ Linear-Gradient - Lineare Verläufe in verschiedenen Richtungen
- ✅ Radial-Gradient - Radiale Verläufe (Kreis/Ellipse)
- ✅ Verlaufsüberlagerung - Mehrere Verläufe kombinieren
- ✅ Praxis-Anwendungen - Verlaufs-Buttons, Hintergründe und Text
🎯 Übung
Übung 1: Erstellen Sie eine Schaltfläche mit einem Verlauf von Grün zu Blau.
Übung 2: Erstellen Sie einen kreisförmigen Bereich mit einem radialen Verlauf.
Übung 3: Erstellen Sie einen Titel mit Verlaufstext.
📚 Nächstes Kapitel
Im nächsten Kapitel lernen wir Übergänge (Transitions), um stilistische Änderungen flüssiger zu gestalten.
[Weiter zu Kapitel 20: Übergänge →]