Adam Argyle's banner

Adam Argyle

@argyleink • 58,612 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,904 просмотров

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,513 просмотров

"Tinkerer by Night" from Sanne 't Hooft at #CSSDay had me at the edge of my seat and completely mesmerized! So inspiring! Check out all the demo's for yourself (Chrome only mostly) here at their rad site!

"Tinkerer by Night" from Sanne 't Hooft at #CSSDay had me at the edge of my seat and completely mesmerized! So inspiring! Check out all the demo's for yourself (Chrome only mostly) here at their rad site!

54,611 просмотров

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

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

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

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 просмотров

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,138 просмотров

- grid - font-size: max(1rem, 15cqmin) - writing-mode: vertical-rl - line-height: 1.1cap - color-scheme: dark light - [contenteditable] 💀🤘🏻

- grid - font-size: max(1rem, 15cqmin) - writing-mode: vertical-rl - line-height: 1.1cap - color-scheme: dark light - [contenteditable] 💀🤘🏻

14,824 просмотров

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

CSS trick: transition `field-sizing: content` on a textarea with anchor

CSS trick: transition `field-sizing: content` on a textarea with anchor

17,109 просмотров • 16 дней назад

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,662 просмотров • 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. 🤯

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

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

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

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

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,745 просмотров • 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 просмотров • 10 месяцев назад

#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,467 просмотров • 2 лет назад

#CSS only carousels arrive in Chrome 135 ⤷

#CSS only carousels arrive in Chrome 135 ⤷

75,834 просмотров • 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,463 просмотров • 1 год назад

#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,945 просмотров • 3 лет назад

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,470 просмотров • 1 год назад

Experimental #CSS carousel ✅ subgrid ✅ scroll driven animations (SDA) ✅ oklch() ✅ property ✅ Layer *Lots of code comments* to help break down the effects 🤓 ✅ SDA changes hue/theme ✅ SDA toggles next/prev ✅ SDA syncs dots

Experimental #CSS carousel ✅ subgrid ✅ scroll driven animations (SDA) ✅ oklch() ✅ property ✅ Layer Lots of code comments to help break down the effects 🤓 ✅ SDA changes hue/theme ✅ SDA toggles next/prev ✅ SDA syncs dots

84,493 просмотров • 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 🤘🏻

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

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,445 просмотров • 3 лет назад

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,574 просмотров • 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,621 просмотров • 2 лет назад

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 год назад