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 erstellen Sie 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 können Sie grafische Effekte wie Unschärfe oder Farbwechsel in den Bereich hinter einem Element anwenden. Da es für alles hinter dem Element gilt, müssen Sie 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 Ihrem Design-Tool der Wahl, 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
Lassen Sie uns ein einfaches Beispiel machen. Erstellen Sie zunächst ein <div> mit einer Klasse von .background
<div class="background"></div>Okay, lassen Sie uns eine wohlverdiente Kaffee- und Bananen-Nuss-Muffin Pause nehmen. Stauben Sie sich ab und fügen Sie 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 Sie möchten, dass die Unschärfe eine Farbe hat, müssen Sie der Hintergrundeigenschaft einen RGBA-Wert hinzufügen. Stellen Sie sicher, dass opacity() weniger als den Wert 1.0 besitzt, damit wir die Farbe 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. Sie sollten jetzt direkt auf den Höhepunkt des menschlichen Einfallsreichtums starren. Vier Ananas, von denen die Hälfte wunderbar verschwommen ist.
Addieren Sie mehrere Filter
Wenn Sie einem Element mehrere Eigenschaften des backdrop-filters hinzufügen möchten, trennen Sie sie einfach mit Leerzeichen. Seien Sie jedoch vorsichtig, denn sie spielen möglicherweise nicht gut zusammen. Offensichtlich können Sie 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üfen Sie also die Browserkompatibilität. Nach dem jetzigen Stand sagt MDN, dass jeder größere Browser, mit Ausnahme von Internet Explorer, das Feature unterstützt. Sie könnten in diesem Fall eine Fallback-Lösung schreiben oder einfach ältere Browser ignorieren.
Danke fürs Lesen. Wir wünschen Ihnen einen verschwommenen Tag! 💎
Beitragsautor
