Blureffekte nutzen mit CSS3
Seit sehr langer Zeit war es im Grunde genommen unmöglich in Webanwendungen eine Hintergrundunschärfe bzw. Gaussian Blur zu implementieren. Das gab Entwicklern eine ständige Entschuldigung und Designern ein ständiges Kopfzerbrechen. In dieser traurigen Welt hassten Webentwickler motivierte Designer, die ein UI-Konzept mit Hintergrundunschärfe vorschlugen. Warum? Einfach weil Sie wussten, dass es unmöglich zu implementieren oder furchtbar kompliziert war und somit den Aufwand nicht wert.
Verwischen oder nicht verwischen?
Im Jahr 2018 änderte sich etwas sehr Wichtiges. Auf leisen Sohlen und wenigen bekannt kam der backdrop-filter und mit seiner Veröffentlichung war alles ganz anders. Nennen wir es eine Revolution! Heute, einige Jahre später, unterstützen alle großen Browser das Feature und die Träume vieler UI-Designer sind endlich wahr geworden. Schließlich gehören die nervenaufreibenden Diskussionen der Vergangenheit an. We just blur it.
So erstellst du in CSS3 eine Hintergrundunschärfe mit der Eigenschaft backdrop-filter mit einer Codezeile:
backdrop-filter: blur(5px);Was ist ein backdrop-filter?
Laut MDN: “Mit der CSS-Eigenschaft backdrop-filter kannst du grafische Effekte wie Unschärfe oder Farbwechsel auf den Bereich hinter einem Element anwenden. Da es für alles hinter dem Element gilt, musst du das Element oder seinen Hintergrund, zumindest teilweise transparent machen.“
In einfachen Worten sagen die Experten vom Mozilla Developer Network, dass ein verschwommener Hintergrund in der Entwicklung oder Produktion, genauso wie in Deinem Design-Tool der Wahl, also Figma, Photoshop, Illustrator, Sketch, Adobe XD oder Framer, erstellt werden kann. Das ist einfach großartig und bietet aufregende neue Möglichkeiten für Anwendungsoberflächen und Benutzererfahrung.
Einfache Beispiel-Unschärfe
Lass uns ein einfaches Beispiel machen. Erstelle zunächst ein <div> mit einer Klasse von .background
<div class="background"></div>Okay, lass uns eine wohlverdiente Kaffee und Muffin Pause nehmen. Staub dich ab und füge dann ein wenig CSS zu der Klasse .background hinzu. Wir werden ein schönes Hintergrundbild einer saftigen Ananas hinzufügen und die gesamte Seite damit bedecken. Fügen wir nun die Unschärfe hinzu. Wir werden uns leise in das <div> mit der Klasse von .background schleichen und sanft ein div mit der Klasse von .blur erstellen.
Wir werden mit unserem .blur Element die gesamte Höhe des Fensters abdecken, aber nur die Hälfte der Breite, damit wir den Unterschied nach der Anwendung des Filters sehen können. Wenn du möchtest, dass die Unschärfe eine Farbe hat, musst du der Hintergrundeigenschaft einen RGBA-Wert hinzufügen. Stelle sicher, dass opacity() weniger als den Wert 1.0 besitzt, damit wir die Farbe auch durchsehen können. Dann werden wir die magische backdrop-filter CSS-Eigenschaft hinzufügen und ihr einen Wert von blur(8px) geben.
+/- beim px-Wert führt zu +/- Menge an Unschärfe. Du solltest jetzt direkt auf den Höhepunkt des menschlichen Einfallsreichtums starren. Vier Ananas, von denen die Hälfte wunderbar verschwommen ist.
Benutze mehrere Filter
Wenn du einem Element mehrere Eigenschaften des backdrop-filters hinzufügen möchtest, trenne Sie einfach mit Leerzeichen. Sei jedoch vorsichtig, denn Sie arbeiten möglicherweise nicht gut zusammen. Offensichtlich kannst du mit diesen Optionen sehr kreativ werden. Das Team, dass die Implementierung von backdrop-filter vorantrieb, hat hervorragende Arbeit geleistet. Im Namen aller UX oder UI Designer möchten wir uns bedanken. Ihr habt Träume wahr werden lassen!
Die Eigenschaft ist seit einiger Zeit experimentell. Überprüfe also die Browserkompatibilität. Nach dem jetzigen Stand sagt MDN, dass jeder größere Browser, mit Ausnahme von Internet Explorer, das Feature unterstützt. Du könntest in diesem Fall eine Fallback-Lösung schreiben oder einfach ältere Browser ignorieren.
Danke fürs Lesen. Wir wünschen Dir einen verschwommenen Tag! 💎
Beitragsautor
