Thinking on ways to solve CARD STACK

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


Duration: 23:50
12,487 views
368

In today's GUI Challenge, @AdamArgyleInk creates an animated stack of cards using transform origin, grid and :has().

Chapters:
0:00 - Introduction
0:35 - Overview
2:21 - Debugging Corner
4:19 - Grid Layouts
11:02 - Transforms
15:42 - Transform vs Individual Transform
20:45 - :has()
22:16 - Recap
23:19 - Outro

Resources:
Demo → https://goo.gle/3XqdkzB
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-12-29Debugging Project Fugu APIs | DevTools Tips
2022-12-28What are Blink Intents?
2022-12-28Thinking on ways to solve BASIC PHYSICS
2022-12-22ChromeOS new feature updates
2022-12-21What is Blink?
2022-12-152022 year in review!
2022-12-14Rounded corner gradient border - GUI Snippets #shorts
2022-12-02Simulate mobile devices with Device Mode | DevTools Tips
2022-11-29New in Chrome 108: New viewport size units, COLRv1 support for variable fonts, and more!
2022-11-28Chrome 108 - What’s New in DevTools
2022-11-23Thinking on ways to solve CARD STACK
2022-11-22Season 3 recap & what’s next | The CSS Podcast
2022-11-17Let's talk Accessibility with Carie Fisher and Melanie Sumner
2022-11-15Nesting | The CSS Podcast
2022-11-09SVG Masks #Shorts
2022-11-08Subgrid | The CSS Podcast
2022-11-01Media query range syntax | The CSS Podcast
2022-11-01Topics API demo and colab walkthrough
2022-10-27Different ways to open Chrome DevTools | DevTools Tips
2022-10-26Thinking on ways to solve TRANSITIONS
2022-10-26Color functions: An update | The CSS Podcast


Tags:
gui challenges
css
css tutorial
how to use css
what is css
intro to css
introduction to css
chrome developer
chrome developers
google chrome developer
google chrome developers
developer
developers
google chrome
chrome
google
chrome latest
chrome updates
Adam Argyle