Thinking on ways to solve TABS

Appears in: GUI Challenges

In today’s GUI challenge, we’re building a tabs component with some really cool features that you may not have thought about. Our tabs component is responsive, supports multiple device inputs, works across browsers, and let’s you mimic some of the buttery features you love on apps.

@Adam Argyle will be responding to your comments for the first 30 minutes after the episode releases. Connect with us here, ask questions, or submit your own code!

00:00 Introduction
00:42 Features overview
03:03 HTML
04:14 Scrolling
05:04 Inspect Layouts
07:35 Layout Styles
12:10 prefers-reduced-motion
13:10 JavaScript & Animation
14:37 Conclusion

Read along → https://goo.gle/37jHOen
Try a demo → http://goo.gle/3prCpb2
Get the source → http://goo.gle/2NsK7EK

@ScrollTimeline Polyfill → http://goo.gle/2NfUhZs

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

#GUIchallenges #CSS #ChromeDeveloper