Heute möchte ich euch einen weiteren Hintergrund für eure Webprojekte oder Livestreams vorstellen. Diesmal ist es nicht so ein einfacher Hintergrund wie gestern mit dem einfarbigen oder Farbverlauf. Heute gehen wir mal ein wenig weiter.

Wir haben heute ebenfalls 2 Farbe aber einen einfachen Hintergrund 2 Streifen Elemente. Jedes dieser Streifen kann man selbst definieren und auch den Hintergrund selbst. Hier hat man also wirklich viel mehr Möglichkeiten, um einen kreativen Hintergrund seinen Wünschen entsprechend anzupassen.

Ebenfalls spannend an dieser CSS Anleitung ist, dass wir hier Variablen direkt in CSS verwenden können. Eigentlich ist diese Funktion schon älter, Chrome zum Beispiel unterstützt die Variable Funktion var() eigentlich bereits seit 2016 aber wirklich im Einsatz seh ich diese Funktion sehr selten. Der Vorteil ist ganz klar, ich kann nun am Anfang einer CSS Datei die Farben definieren und kann sie dann immer weiter verwenden. Sollte ich die Farbe dann anpassen wollen, dann muss ich das nur an 1 Stelle machen und nicht im ganzen Dokument suchen & ersetzen.

Aber jetzt kennt ihr sie ja und könnt sie einsetzen.

Video

HTML

1
2
3
4
5
6

<div class="scene variable">
	<div class="background">
		<div class="line line1"></div>
		<div class="line line2"></div>
	</div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    .scene.variable {
	--bg-light: #ffd85d;
	--bg-dark: #ffbd51;
}
 
.background {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-light);
	color: var(--bg-dark);
}
 
.background .line {
	position: absolute;
	top: 0;
	height: 100vw;
	background-color: currentColor;
}
 
.background .line1 {
	width: 35vw;
	left: -20vw;
	transform: skew(-45deg);
}
 
.background .line2 {
	width: 55vw;
	left: 60vw;
	transform: skew(-65deg);
}