Bei Jim Fahad Digital habe ich eine tolle Inspiration für einen Fenster Effekt gefunden. Im Grunde ist die ganze Geschichte recht schnell umgesetzt.
Was ihr dafür benötigt ist eigentlich nur ein kleines bisschen CSS.
selector{
backdrop-filter: blur(5px); /* du kannst den px Wert für mehr oder weniger Blur variieren */
}Und so funktionierts
- Den Hintergrund in einem Container erstellen. Farbe, Bild oder wie es euch beliebt.
- Einen weiteren Container im übergeordneten Container erstellen.
- Den untergeordneten Container auswählen, auf den Erweitert Tab gehen -> unter Eigenes CSS den Code einfügen.
- Jetzt könnt ihr den Container stylen. Als Hintergrund solltet ihr eine Farbe wählen (blau bis schwarz macht sich sehr gut) und diese Farbe sehr transparent machen. Dadurch hebt sich der Container etwas vom Hintergrund ab.
- Außerdem könnt ihr natürlich noch Rahmen hinzufügen oder den Container animieren.
Beipiele mit Beschreibung
Fenster Effekt mit Hinergrundbild
In diesem Beispiel habe ich ein transparentes Hintergrundbild mit Tropfen verwendet. Das Bild kommt unter den Punkt: Hintergrund Überlagerung.
Das Bild habe ich von https://www.transparentpng.com/
Fenster Effekt mit Hinergrundfarben
In diesem Beispiel habe ich als Hintergrund Trennlinien verwendet. Der innere Container, der als Box dient, hat eine transparente blaue Hintergrundfarbe. Außerdem habe ich Bewegungseffekte im Erweitert Tab aktiviert.