Adam Argyle's banner

Adam Argyle

@argyleink • 58,599 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,878 次观看

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 次观看

amazing what a few lines of #CSS can do

amazing what a few lines of #CSS can do

32,950 次观看

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,135 次观看

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

99,746 次观看 • 5 个月前

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,499 次观看 • 3 年前

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,937 次观看 • 3 年前

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 次观看 • 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,884 次观看 • 7 个月前

#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

128,362 次观看 • 2 年前

#CSS only carousels arrive in Chrome 135 ⤷

#CSS only carousels arrive in Chrome 135 ⤷

75,741 次观看 • 1 年前

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,326 次观看 • 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,389 次观看 • 10 个月前

#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,896 次观看 • 3 年前

#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,989 次观看 • 1 年前

a sizzle of some of my UI work

a sizzle of some of my UI work

31,460 次观看 • 1 年前

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,427 次观看 • 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,530 次观看 • 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,615 次观看 • 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,607 次观看 • 1 年前