Channel: Google Chrome Developers

Category: Science & Technology

Tags: cssgoogle chrome developerthinking on ways to solve toastsdevelopersflip techniquegds: yesoutputgoogle chromeuiaccessible componenthow to use csshow to solve toastsways to build toastscss tutorialflipwhat is csschromeadam argylewhat is toastsoutput elementadaptive componenttoasts tutorialgooglewhat are toastsuser interfacegoogle chrome developerscss gridgui challengeschrome developerchrome developersdeveloper

Description: In today's GUI Challenge, @Adam Argyle 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