5.1 Lineare Verläufe
Verläufe sind ein mächtiges Werkzeug im Webdesign, das es ermöglicht, sanfte Übergänge zwischen Farben zu schaffen, ohne Bilder zu verwenden. CSS bietet zwei Hauptarten von Verläufen: lineare (linear-gradient) und radiale (radial-gradient). Diese Verläufe werden für den Hintergrund von Elementen, die Erstellung von Buttons und andere visuelle Effekte verwendet.
Lineare Verläufe (linear-gradient)
Ein linearer Verlauf schafft einen sanften Übergang zwischen zwei oder mehr Farben entlang einer definierten Linie (Achse). Die Linie kann horizontal, vertikal oder in jedem beliebigen Winkel verlaufen.
Syntax
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Werte
direction: Richtung des Verlaufs. Kann in Grad angegeben werden (z.B.90deg), mit Schlüsselwörtern (z.B.to right,to bottom left)color-stop: Farbstopp, der die Farbe und ihre Position im Verlauf definiert
Nutzungsbeispiele
Horizontaler Verlauf:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Horizontaler Verlauf</div>
</body>
Vertikaler Verlauf:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Vertikaler Verlauf</div>
</body>
Diagonaler Verlauf:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Diagonaler Verlauf</div>
</body>
Mehrfarbiger Verlauf:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Mehrfarbiger Verlauf</div>
</body>
Code-Erklärung:
to right: Verlauf geht von links nach rechtsto bottom: Verlauf geht von oben nach unten45deg: Verlauf geht im Winkel von 45 Gradred,yellow,green,blue: mehrere Farbstopps für die Erstellung eines mehrfarbigen Verlaufs
5.2 Radiale Verläufe
radial-gradient erzeugt einen sanften Übergang zwischen Farben, der vom Zentrum aus zu den Rändern eines Kreises oder einer Ellipse reicht. Radiale Verläufe können interessante visuelle Effekte erzeugen, wie z.B. die Simulation von Dreidimensionalität.
Syntax:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Werte:
shape: Form des Verlaufs, kanncircle(Kreis) oderellipse(Ellipse) sein (Standardwert)size: Größe des Verlaufs, kann seinclosest-side,closest-corner,farthest-side,farthest-cornerposition: Position des Verlaufszentrums, kann in Prozent, Pixeln oder mit Schlüsselwörtern angegeben werden (z.B.center,topleft)color-stop: Farbstopp, der die Farbe und ihre Position im Verlauf definiert
Nutzungsbeispiele
Kreisverlauf:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Kreisverlauf</div>
</body>
Elliptischer Verlauf:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Elliptischer Verlauf</div>
</body>
Zentrale Verlauf:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Zentrale Verlauf</div>
</body>
Verlauf von der Ecke:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Verlauf von der Ecke</div>
</body>
Code-Erklärung:
circle: erstellt einen Kreisverlaufellipse: erstellt einen elliptischen Verlaufat center: Verlauf beginnt im Zentrumat top left: Verlauf beginnt oben linksred,blue,green: mehrere Farbstopps für die Erstellung eines mehrfarbigen Verlaufs
5.3 Zusätzliche Einstellungen für Verläufe
Wiederholbare Verläufe
1. Wiederholbare lineare Verläufe (repeating-linear-gradient)
Wiederholbare lineare Verläufe erstellen ein sich wiederholendes Muster mit einem linearen Verlauf.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Wiederholbare radiale Verläufe (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Transparente Farbstopps
Farbstopps können Transparenz enthalten, um komplexere visuelle Effekte zu erzielen.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Verwendung mehrerer Verläufe
Es können mehrere Verläufe verwendet werden, um komplexe Hintergründe zu erstellen.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION