Wie man Toasts (Snackbars) erstellt - HTML, CSS & JavaScript Tutorial - Deutsch

2 Views
Published
Das Wort „Toast“ bezeichnet nicht nur leckeres Weißbrot, sondern im Webdesign auch eine der beliebtesten Methoden, um Benachrichtigungen anzuzeigen. Wie die meisten dynamischen Komponenten sind Toasts, die manchmal auch Snackbars genannt werden, nicht im HTML-Standard enthalten, und müssen deshalb bei Bedarf mit HTML, CSS & JavaScript selbst implementiert werden. Wie das geht, schauen wir uns in diesem Tutorial an.

GitHub des fertigen Projekts: https://github.com/dev-planet-germany/toasts

00:00 Was wir erstellen werden
00:21 Die Ausgangssituation
01:13 Die Struktur der Toasts im HTML
02:10 Positionierung der Toasts mit CSS
04:20 Gestalten der Toasts mit CSS
06:37 Einfaches Einblenden der Toasts mit CSS & JavaScript
12:21 Eigene HTML-Attribute erstellen: die data-Attribute
13:36 Automatisches Ausblenden der Toasts mit dynamischer Anzeigedauer
16:37 Toasts nach ihrer Aktualität ordnen
18:30 Toasts nur einblenden, wenn sie nicht schon sichtbar sind
20:00 Animationen für das Einblenden und Ausblenden der Toasts
24:30 Anonyme Funktionen in JS: Funktionen ohne Namen
27:12 Code ausführen, wenn eine CSS transition endet: der transitionend EventListener
32:00 Abonniert den Kanal! :)
Category
Web design
Be the first to comment