Thinking on ways to solve FABs

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


Duration: 14:30
12,770 views
496

In today's GUI Challenge, @AdamArgyleInk builds a couple of floating action buttons (FABs) and talks about the UX and CSS considerations for fixed position buttons on the web.

Chapters:
0:00 - Introduction
0:43 - Logical Properties
1:50 - Accessibility Tree
3:18 - FAB Group
4:41 - Focus Order vs Document Order
6:21 - .fabs CSS
7:16 - .fab CSS
12:54 - Animation
14:02 - Outro

Resources:
Try a demo → https://goo.gle/3IgJEhr
Get the source → https://goo.gle/3n4Sfcg

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-08-03What are Chrome release channels?
2022-08-02New in Chrome 104: Region Capture, Media Queries, Shared Element Transitions, and more!
2022-07-28How to log messages in the Console | DevTools Tips
2022-07-28Chrome 104 - What’s New in DevTools
2022-07-27Thinking on ways to solve CAROUSELS
2022-07-26DOM ready events considered harmful | HTTP 203
2022-07-14How to emulate CSS user preference media features | DevTools Tips
2022-07-13Breaking words with wbr and ­ #Shorts
2022-07-12Demystifyingish SVG paths | HTTP 203
2022-06-30How to inspect CSS container queries | DevTools Tips
2022-06-29Thinking on ways to solve FABs
2022-06-28FLIP animations | HTTP 203
2022-06-22Gradient shadow #Shorts
2022-06-21New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!
2022-06-16Chrome 103 - What’s New in DevTools
2022-06-08New in Chrome 102: PWAs as File Handlers, inert, the navigation API, and more!
2022-06-07The history API is dead. Long live the navigation API | HTTP 203
2022-05-30Chrome 102 - What’s New in DevTools
2022-05-25Huellipsis #Shorts
2022-05-24Samsung Internet - the why & how | HTTP 203
2022-05-18Thinking on ways to solve BUTTONS


Tags:
Chrome
Developers
Google
Web
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