9.1 Kombination von Farb-Funktionen
Webdesign erfordert ein tieferes Verständnis und den Einsatz von Farb-Funktionen, um komplexe, aber harmonische und anpassungsfähige Interfaces zu schaffen. Schauen wir uns komplexere Manipulationen mit Farben in CSS an, indem wir Funktionen wie rgba(), hsla(), hsl() und rgb() verwenden.
Beispiel 1: Einen halbtransparenten Verlauf erstellen
Um komplexe Verläufe zu erstellen, kann man mehrere Farb-Funktionen kombinieren.
In diesem Beispiel wird ein linearer Verlauf verwendet, der halbtransparente Farben kombiniert, die mit rgba() und hsla() definiert sind:
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
to right,
rgba(255, 0, 0, 0.8),
hsla(240, 100%, 50%, 0.7),
rgba(0, 255, 0, 0.6)
);
}
Beispiel 2: Verlauf mit Übergang durch mehrere Farben
Hier wird ein linearer Verlauf im 45-Grad-Winkel verwendet, der sanft durch fünf Farben übergeht, wobei jede mit verschiedenen Farb-Funktionen definiert ist:
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
45deg,
hsl(0, 100%, 50%) 0%,
rgb(255, 255, 0) 25%,
hsla(240, 100%, 50%, 0.7) 50%,
rgba(0, 255, 0, 0.6) 75%,
rgb(0, 255, 255) 100%
);
}
9.2 Erstellen komplexer Schatten und halbtransparenter Effekte
Beispiel 3: Schatten mit rgba()
In diesem Beispiel wird ein komplexer Schatten erzeugt, der halbtransparente Farben verwendet, um einen Effekt von Volumen und Licht zu erzeugen:
<div class="shadow"></div>
.shadow {
min-height: 155px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-10px -10px 20px rgba(255, 255, 255, 0.2);
}
Beispiel 4: Halbtransparente Ränder und Hintergründe
Halbtransparente Ränder und Hintergründe können mit rgba() und hsla() erstellt werden, was ermöglicht, mehrschichtige und strukturierte Effekte zu kreieren:
<div class="border-background"></div>
.border-background {
min-height: 200px;
border: 2px solid rgba(0, 0, 0, 0.5);
background-color: hsla(120, 100%, 50%, 0.3);
}
9.3 Animation und Übergänge mit Farb-Funktionen
Beispiel 5: Hintergrundanimation mit hsl()
In diesem Beispiel wird eine Animation verwendet, die den Hintergrundfarbe sanft durch verschiedene Farbtöne ändert, indem hsl() benutzt wird:
<div class="animated-background"></div>
@keyframes color-change {
0% {
background-color: hsl(0, 100%, 50%);
}
50% {
background-color: hsl(120, 100%, 50%);
}
100% {
background-color: hsl(240, 100%, 50%);
}
}
.animated-background {
min-height: 200px;
animation: color-change 5s infinite;
}
Beispiel 6: Farbwechsel bei Text
Hier ändert der Text sanft seine Farbe und Transparenz, wenn du mit der Maus darüber fährst, indem rgba() und die Eigenschaft transition verwendet werden:
<div class="text-transition">Some text</div>
.text-transition {
min-height: 100px;
color: rgba(255, 0, 0, 1);
transition: color 2s;
}
.text-transition:hover {
color: rgba(0, 0, 255, 0.5);
}
9.4 Verwendung von CSS-Variablen
Schauen wir uns Beispiele zur Verwendung von CSS-Variablen mit Farb-Funktionen an.
Beispiel 7: Variablen und Farb-Funktionen
Die Verwendung von CSS-Variablen mit Farb-Funktionen ermöglicht eine zentrale Verwaltung von Farben und das Erstellen komplexer, aber einfach zu verwaltender Styles:
<div class="advanced"></div>
:root {
--primary-color: rgba(255, 0, 0, 0.8);
--secondary-color: hsl(240, 100%, 50%);
--border-color: rgba(0, 0, 0, 0.5);
}
.advanced {
min-height: 200px;
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
border: 2px solid var(--border-color);
}
Beispiel 8: Kombination mehrerer Verläufe
In diesem Beispiel werden zwei lineare Verläufe übereinander gelegt, um einen komplexen, mehrschichtigen Effekt zu erzeugen:
<div class="multi-gradient"></div>
.multi-gradient {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
linear-gradient(to bottom, hsla(240, 100%, 50%, 0.5), hsla(60, 100%, 50%, 0.5));
}
GO TO FULL VERSION