Thinking on ways to solve TOASTS

19 589
9
Следующее
Популярные
97 дней – 18 9486:01
What are Related Website Sets?
118 дней – 52 6175:05
What’s new in DevTools: Chrome 119-120
Опубликовано 8 декабря 2021, 8:00
In today's GUI Challenge, @AdamArgyleInk shares thinking on a way to build toasts, a non-interactive and passive component for UI to provide user feedback. Explore the [output] element, CSS grid, animations and the FLIP technique which helps build an adaptive and accessible component.

Chapters:
0:00 - Introduction
0:23 - Overview
2:02 - [output]
3:00 - Layout
4:41 - Animation
5:50 - JavaScript Part 1
6:55 - Reduced Motion
7:43 - Keyframes
8:09 - JavaScript Part 2
10:48 - F.L.I.P.
14:18 - Outro

Resources:
Read along → goo.gle/3GghBfI
Try a demo → goo.gle/3EHsuXG
Get the source → goo.gle/3oykceU
FLIP → goo.gle/3oz8P6D
Paul Lewis (from SuperCharged) → goo.gle/31IOFy0

Watch more GUI Challenges → goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs

#GUIchallenges #CSS #ChromeDeveloper
автотехномузыкадетское