Thinking on ways to solve DIALOG

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=GDzzIlRhEzM


Category:
Vlog
Duration: 16:07
32,807 views
1,304

In today's GUI Challenge, @AdamArgyleInk shows how to visually enhance the dialog element while maintaining great accessible and international UX.

Chapters:
0:00 - Introduction
0:22 - Overview
0:53 - dialog UX Review
2:33 - dialog Markup
3:00 - Show/Hide
4:20 - Debugging Corner
5:38 - Adaptive color
6:09 - Layout
7:10 - Reduced Motion
8:30 - UX
9:55 - Custom events
11:00 - Scrollable
13:37 - International layout
14:52 - Recap
15:30 - Outro

Resources:
Read along → https://goo.gle/3E8K72W
Try a demo → https://goo.gle/3viMNa6
Get the source → https://goo.gle/3jyxgxF

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

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2022-05-11Introduction to Angular
2022-05-11What's new in Chrome OS I/O 2022
2022-05-11Measure performance with web-vitals.js, Google Analytics, and BigQuery
2022-05-11Creating instant and seamless web apps with Chrome
2022-05-11What's new for the web platform
2022-05-11Build more accessible apps in Angular
2022-05-10Performance insights panel | DevTools Tips
2022-05-03Is .css a bad idea? Is inlining the way forward? | HTTP 203
2022-04-27Adaptive frosted glass #Shorts
2022-04-21Chrome 101 - What’s New in DevTools
2022-04-13Thinking on ways to solve DIALOG
2022-03-304 lines of CSS for a vertical responsive slideshow #Shorts
2022-03-29New in Chrome 100: User Agent string updates, Multi-screen window placement API, and more!
2022-03-29What key was pressed? (You won't believe how keyboard events work) | HTTP 203
2022-03-24Chrome 100 - What’s New in DevTools
2022-03-23Cache your fonts, images & pages - Unpacking the Workbox
2022-03-18FLEDGE demo walkthrough | What is the Privacy Sandbox?
2022-03-16Thinking on ways to solve a LOADING BAR
2022-03-15Building VR and AR experiences using HTML | HTTP 203
2022-03-10CSS Grid debugging tools | DevTools Tips
2022-03-08Chrome 99 - What’s New in DevTools


Tags:
purpose: Educate
pr_pr: Chrome
series: GUI Challenges
type: Screencast (10-20min)
GDS: Yes
gui challenges
css
css tutorial
how to use css
what is css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
Adam Argyle