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 görüntüleme

amazing what a few lines of #CSS can do

amazing what a few lines of #CSS can do

32,950 görüntüleme

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 görüntüleme

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

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

34,575 görüntüleme

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 görüntüleme

#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 görüntüleme

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 görüntüleme

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 görüntüleme

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 görüntüleme • 4 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 2 yıl önce

#CSS only carousels arrive in Chrome 135 ⤷

#CSS only carousels arrive in Chrome 135 ⤷

75,729 görüntüleme • 1 yıl önce

#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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 8 ay önce

#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 görüntüleme • 2 yıl önce

#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 görüntüleme • 1 yıl önce

a sizzle of some of my UI work

a sizzle of some of my UI work

31,460 görüntüleme • 11 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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

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

19,791 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

#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 görüntüleme • 3 yıl önce