Ich bin kürzlich auf einen coolen Effekt gestoßen, der als Glassmorphism in einem Dribbble-Shot bekannt ist. Mein erster Gedanke war, dass ich ihn schnell in wenigen Minuten nachbauen könnte, wenn ich nur Emojis für die Icons verwende, ohne Zeit zu verschwenden...
Ich liebe diese kleinen Beiträge, bei denen ein scheinbar kniffliges Design mit einer einzigen Zeile CSS und einer wenig bekannten Eigenschaft gelöst wird. In diesem Fall handelt es sich bei dem Design um einen Frosted-Glass-Effekt und die CSS-Eigenschaft ist backdrop-filter.…
Die Landingpage für Apple Arcade hat einen coolen Effekt, bei dem ein "weißer" Text eine Art transluzenten Effekt hat. Man kann *etwas* von der Farbe des Hintergrunds durch den Text sehen. Es ist nicht wie Knockout-Text…
Die backdrop-filter-Eigenschaft in CSS wird verwendet, um Filtereffekte (grayscale, contrast, blur usw.) auf den Hintergrund/Backdrop eines Elements anzuwenden. Der backdrop-filter hat die gleiche Wirkung wie die filter-Eigenschaft, außer dass die Filtereffekte …
Du kannst einen Filter auf ein ganzes Element ganz einfach mit der filter-Eigenschaft anwenden. Aber was, wenn du einen Filter *nur* auf den Hintergrund eines Elements anwenden möchtest? Das ist seltsamerweise knifflig.
Es gibt CSS-Eigenschaften, die spezifisch …
Ich hatte bis gestern noch nie von der backdrop-filter-Eigenschaft gehört, aber nach ein paar Stunden, in denen ich damit herumgespielt habe, bin ich sicher, dass es nichts weiter als Magie ist. Denn sie fügt Filter hinzu (wie z. B. die Änderung des Farbtons, des Kontrasts oder …
