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

Live Cam

Adam Argyle

Shorts

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

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

amazing what a few lines of #CSS can do

Focus By Demotion a use case for #CSS `:hover &gt; :not(:hover)`

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

#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 ⤷

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

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

Videos

Watch Anya Live

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

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

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. 🤯

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!

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

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

#CSS only carousels arrive in Chrome 135 ⤷

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a &lt;select&gt; with #CSS! ⤷

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

#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

a sizzle of some of my UI work

Animates &lt;table&gt; ✅ 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:

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

Wildest #CSS media query I've written in a while `Container and Packaging (inline-size &gt;= 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

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. ⤷

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!

tired of seeing fugly `&lt;details&gt;` try this one

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

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

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!

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

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:

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

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