
English: 
I already prepared some things and chose this beautiful picture from pexels.com as the background
Let's set the background to fixed and it shouldn't repeat
And also make sure the background-size is set to "cover"
Let's begin with the .frosted-glass class
For this example I will set the size to 400 x 200 px
Now I'll set a background, so I can see the element

German: 
Ich habe bereits einige Dinge vorbereitet und habe dieses Bild von pexels.com als Hintergrund festgelegt
Setze den Hintergrund auf "fixed". Außerdem sollte er sich nicht wiederholen.
Stelle außerdem sicher, dass "background-size" auf "cover" gesetzt ist
Beginnen wir mit der ".frosted-glass"-Klasse
Für dieses Beispiel setze ich die Größe auf 400 x 200 px
Jetzt werde ich einen Hintergrund festlegen, damit ich das Element besser sehen kann

German: 
"position" sollte auf "relative" gesetzt werden
Jetzt erstellen wir ein "::before" Pseudo-Element
Setze dessen "position" auf "absolute"
Und "top", "right", "bottom" und "left" zu "0"

English: 
The position should be changed to "relative"
Now let's create a "::before" pseudo element
Set it's position to "absolute"
And "top", "right", "bottom" and "left" to "0"

German: 
".frosted-glass" soll die Hintergrund-Einstellungen erben. Also setze "background" auf "inherit".
Dasselbe gilt für das Pseudo-Element
Lass uns eine halbtransparente Überlagerung erstellen, um ".frosted-glass" wieder sichtbar zu machen
Ändere die "z-index" Werte, um den Text wieder nach vorne zu bringen
Siehst du? Wir können ihn wieder auswählen.

English: 
.frosted-glass should inherit the background settings of its parent. So set "background" to "inherit".
Do the same on the pseudo element
Let's create a half transparent overlay to make the .frosted-glass element visible again
Change the "z-index" settings to bring the text back to the front
See? We can select it again.

German: 
Füge jetzt den "blur"-Filter hinzu
Das sieht besser aus
Entferne die weichen Kanten mit "overflow: hidden"
Und füge ein negatives "margin" zu ".frosted-glass" hinzu
Es sollte ein wenig mehr in den Mittelpunkt gerückt werden

English: 
Now add the "blur" filter
That looks better
Remove the smooth edges with "overflow: hidden"
And add a negative margin to .frosted-glass
Let's bring it a little bit more to the center

German: 
Sieht nett aus, oder? Zum Schluss füge ich noch einen schicken Schlagschatten hinzu.

English: 
Looks nice, right? Finally let's add a nice drop shadow.
