Adam Argyle's banner

Adam Argyle

@argyleink • 58,598 subscribers

@Shopify design-engineer; prior @GoogleChrome, @GoogleCloud, CSSWG, and CSS Podcast. Host on @whiskeywebfm, maker of @OpenProps, https://t.co/lb3SDxC6EC and more

Shorts

PREVIOUSLY: separate rulesets for light and dark NOW: one ruleset with `light-dark()`

PREVIOUSLY: separate rulesets for light and dark NOW: one ruleset with `light-dark()`

269,849 просмотров

amazing what a few lines of #CSS can do

amazing what a few lines of #CSS can do

32,950 просмотров

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog

67,503 просмотров

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`

34,575 просмотров

Recreating the Nintendo Switch Homescreen scroll UX - 90% done with #CSS - a li'l #JS for sounds, vibrations n' taps

Recreating the Nintendo Switch Homescreen scroll UX - 90% done with #CSS - a li'l #JS for sounds, vibrations n' taps

24,166 просмотров

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

22,444 просмотров

weird, I love it, feels like it should be in a video game

weird, I love it, feels like it should be in a video game

36,302 просмотров

View Transition on rotate 🤓 how? a throttled resize listener waits for 100ms of no resizing before firing `flipGallery()` window.onresize = () => { clearTimeout(window.resizeEndTimer) window.resizeEndTimer = setTimeout(flipGallery, 100) } try it!

View Transition on rotate 🤓 how? a throttled resize listener waits for 100ms of no resizing before firing `flipGallery()` window.onresize = () => { clearTimeout(window.resizeEndTimer) window.resizeEndTimer = setTimeout(flipGallery, 100) } try it!

16,100 просмотров

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Wild how far you can push "customizable select" with just #CSS

Wild how far you can push "customizable select" with just #CSS

98,432 просмотров • 4 месяцев назад

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it

469,407 просмотров • 2 лет назад

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯

456,886 просмотров • 3 лет назад

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

92,826 просмотров • 6 месяцев назад

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

351,554 просмотров • 2 лет назад

#CSS only carousels arrive in Chrome 135 ⤷

#CSS only carousels arrive in Chrome 135 ⤷

75,729 просмотров • 1 год назад

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

127,962 просмотров • 2 лет назад

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! ⤷

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! ⤷

70,325 просмотров • 1 год назад

in the audience, scratchin an itch: responsive #CSS scroll animation try it!

in the audience, scratchin an itch: responsive #CSS scroll animation try it!

39,306 просмотров • 8 месяцев назад

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks

94,838 просмотров • 2 лет назад

#CSS scroll-driven animation + scroll snap events synchronized with a number input scrollSnapChange is lazy: used to update the blue highlight feedback UX scrollSnapChanging is eager: used to immediately update the number input value to match the snapped item set to ship in Chrome 129 snap events available to try today in Canary behind the web experiments flag try it blog post in the works that'll give all the details and tons more demo's 🤘🏻

#CSS scroll-driven animation + scroll snap events synchronized with a number input scrollSnapChange is lazy: used to update the blue highlight feedback UX scrollSnapChanging is eager: used to immediately update the number input value to match the snapped item set to ship in Chrome 129 snap events available to try today in Canary behind the web experiments flag try it blog post in the works that'll give all the details and tons more demo's 🤘🏻

61,950 просмотров • 1 год назад

a sizzle of some of my UI work

a sizzle of some of my UI work

31,460 просмотров • 11 месяцев назад

Animates <table> ✅ row.remove() ✅ table.insertAdjacentHTML() ❤️‍🔥 special animation like the table is crushing a row out of existence hehe ✅ used devtools in the vid to slowmo the effect viva View Transitions: src on Codepen:

Animates <table> ✅ row.remove() ✅ table.insertAdjacentHTML() ❤️‍🔥 special animation like the table is crushing a row out of existence hehe ✅ used devtools in the vid to slowmo the effect viva View Transitions: src on Codepen:

52,421 просмотров • 2 лет назад

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!

31,206 просмотров • 1 год назад

Wildest #CSS media query I've written in a while `Container and Packaging (inline-size >= calc(100cqi - 120px))` yep, `calc()` in a MQ! WHY? to re-anchor buttons to be "inside" when space is tight video: purple outline's are containers

Wildest #CSS media query I've written in a while `Container and Packaging (inline-size >= calc(100cqi - 120px))` yep, `calc()` in a MQ! WHY? to re-anchor buttons to be "inside" when space is tight video: purple outline's are containers

27,516 просмотров • 1 год назад

Custom boilerplate with transitions This is very early, but one day, you'll want this badly. For now, bookmark it, and/or checkout what I've built with it. ⤷

Custom boilerplate with transitions This is very early, but one day, you'll want this badly. For now, bookmark it, and/or checkout what I've built with it. ⤷

29,344 просмотров • 1 год назад

CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it awesome work Noam Rosenthal 🦋 nomster.bsky.social and smfr!

CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it awesome work Noam Rosenthal 🦋 nomster.bsky.social and smfr!

23,266 просмотров • 1 год назад

tired of seeing fugly `<details>` try this one

tired of seeing fugly `<details>` try this one

19,791 просмотров • 1 год назад

Scroll snap + scroll driven animation carousel 💡 in the mobile size it looks a lot like the iOS app switcher eh? try it!?

Scroll snap + scroll driven animation carousel 💡 in the mobile size it looks a lot like the iOS app switcher eh? try it!?

22,577 просмотров • 1 год назад

#CSS only full URL page navigation with View Transitions - 5 minute prototype - 1 meta tag - a few lines of CSS - Open Props Behind a flag in Canary: chrome://flags/#view-transition-on-navigation It's not finished yet, but there's really rad opportunities already available 🤓

#CSS only full URL page navigation with View Transitions - 5 minute prototype - 1 meta tag - a few lines of CSS - Open Props Behind a flag in Canary: chrome://flags/#view-transition-on-navigation It's not finished yet, but there's really rad opportunities already available 🤓

30,398 просмотров • 3 лет назад