Pop n' Lock Dialog Mini Web Machine

Опубликовано 31 июля 2024, 16:00

It pops, it locks, this is the dialog element. Discover a mini web machine that captures the users attention and focuses them into a blocking, overlaying action experience! A fast paced introductory video providing a high level overview of the dialog element and how to transition it with transition-behavior and @starting-style.

Chapters:
0:00 - Introduction
1:06 - Basic Dialog Machine
1:55 - Machine Super Powers
3:15 - No z-index Battles
4:17 - Transitioning / Animating
6:41 - Outro

Resources:
MDN dialog → goo.gle/4d06qIF
MDN transition-behavior → goo.gle/4fnfwkp
MDN @starting-style → goo.gle/3StqWcH
MDN overlay → goo.gle/3yKNRsT
MDN ::backdrop → goo.gle/3WLyGcB
Material dialog → goo.gle/3YIrhMD
CSS Podcast ep 80 → goo.gle/3SS4ydh

Demo Campout
basic dialog → goo.gle/3LLVnab
basic dialog + transitions → goo.gle/3yg9lOv
dialog using invokers → goo.gle/4deXrU0
fixed element vs the top-layer → goo.gle/3Wpv6TW
default, error, waiting, notify, confirm, transitions, light dismiss and custom → goo.gle/3A1Nrz5
dialog lightbox with view transitions - codepen.io/argyleink/pen/ZENRL...


Watch more Mini Web Machines→ goo.gle/MiniWebMachines
Subscribe to Chrome for Developers → goo.gle/ChromeDevs


#ChromeForDevelopers #Chrome


Speaker: Adam Argyle