iiinova — where your digital self keeps evolving

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 02/07/2026

**Prop For That** now exposes the visiting browsers UA information as CSS variables prop-for-that.netlify.app/docsite/d…

045 5

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 03/02/2026

Wild how far you can push "customizable select" with just #CSS nerdy.dev/nice-select

0201 20

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 23/01/2026

a powerful #CSS transition technique enters the ring: Anchor Interpolated Morphing (AIM) nerdy.dev/anchor-interpolated-morph…

031 3

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 23/01/2026

#CSS `@custom-media` available behind a flag in Firefox Nightly Lovely syntax, just lovely. nerdy.dev/custom-media

@custom-media --motionOK (prefers-reduced-motion: no-preference);

@media (--motionOK) {
transition: transform .3s ease;
}

43110 31

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 05/12/2025

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

0175 17

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 30/10/2025

ep216 of Whiskey Web and Whatnot (live) All Things Open 2025 Shruti Kapoor shares her career journey, career tips, tricks, and trips, and a little bit of whatnot in this episode with host Robbie and guest host Jason Lengstorf […] [Original post on front-end.social]

000 0

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 27/10/2025

workin on a web component: `<color-input>`

2371 37

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 26/10/2025

Sneak peak at my upcoming @btconf talk 👀 Be there or be `aspect-ratio: 1` nerdy.dev/beyond-tellerrand-2025

010 1

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 28/08/2025

gradient.style has finally - come out of beta - offers multiple background editing - is open source 🎉 nerdy.dev/gradient.style-is-out-of-…

a radial gradient shown over a conic gradient of sun rays

a linear gradient shown overtop a radial gradient

a conic gradient on top of another conic gradient

158 8

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 27/08/2025

The making of a #CSS5 HDR enabled gradient tool a fun peek into the sketching that led to the gradient line UI, the color picker, the overall layout, some math and more! nerdy.dev/the-making-of-gradient.st…

084 8

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 28/07/2025

a quick prototype sprint on an LLM chat interface ✅ view transitions ✅ readablestreams ✅ flow control ✅ light/dark nerdy.dev/llm-chat-prototype

131 3

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 13/06/2025

Recreating the Nintendo Switch Homescreen scroll UX - 90% done with CSS - a li'l JS for sounds, vibrations n' taps nerdy.dev/nintendo-switch-homescree…

051 5

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 10/06/2025

It's not a challenge to design for reduced transparency, it's an opportunity. nerdy.dev/prefers-reduced-transpare… - adaptive frosted glass - adaptive captions

An image with a caption is showed in two styles, one with a semi-transparent overlay of the caption and one with the caption underneath the image with no transparency used at all.

021 2

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 22/05/2025

3 Unintuitive #CSS Layout “Solutions” ``` min-width: 0? flex-shrink: 0? repeat(auto-fill, minmax(min(10rem, 100%), 1fr)) ``` wat? nerdy.dev/3-unintuitive-layout-solu…

A horse on a boat on the ocean holding a kitten

123 3

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 16/05/2025

workin on the design for my slides at CSS Day 3D view transitions between pages/slides? li'l bit-o-glitch and some split text. i'm diggin it.

020 2

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 10/04/2025

Smells like an attack vector for people into that

010 1

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 24/03/2025

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

153 5

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 11/03/2025

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! `transition-delay: calc(sibling-index() * .1s);` or ```css --hue: calc(sibling-index() * 50); color: oklch(70% 70% var(--hue)); ``` more info and a Codepen to fork ⤷ nerdy.dev/sibling-index

0174 17

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 17/01/2025

#CSS advanced `attr()` Unlocking new ways to integrate with CSS from your HTML nerdy.dev/advanced-attr

075 7

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 15/01/2025

#CSS **`scroll-state()` container queries** in Chrome 133 ```css @container scroll-state(stuck: top) { … } ``` Read all about snapped, stuck and scrollable in this post: developer.chrome.com/blog/css-scrol… ↪ nerdy.dev/scroll-state-container-qu…

0102 10

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 15/01/2025

if ShadCN and Open Props had a baby… ✨ **Open Props UI** ✨ An introduction and overview of this new **copy & paste** UI Library nerdy.dev/open-props-ui Congrats Felix Bohlin! Lib looks rad 🤘🏻💀

Open Props UI: The UI library of the future (or now, with feature flags). Components you can copy and paste to your project.

icons buttons shown, all the variants look great

a custom select is shown. the first UI library I've seen embrace the new component.

a tall screenshot with previews of many components

2192 19

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 14/01/2025

#CSS `text-box` a very exciting feature! available in: Chrome 133 & Safari 18.2 My post on Chrome Developers: developer.chrome.com/blog/css-text-… ↪ nerdy.dev/text-box-trim

077 7

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 30/12/2024

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it codepen.io/argyleink/pen/gbYGgrB (use Canary for the scroll-state() support)

331 3

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 20/12/2024

Putting AI in your product? You're gonna need #CSS gradient text animations (if you want to be cool) So here, a recipe! codepen.io/argyleink/pen/vEBmZNw ↪ nerdy.dev/animated-gradient-text

171 7

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 19/12/2024

Wildest #CSS media query I've written in a while `@container (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, buttons adapt to containers […] [Original post on front-end.social]

0112 11

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 05/12/2024

**CSS Wrapped 2024** one stop shop for the Chrome #CSS features launched in 2024! nerdy.dev/css-wrapped-2024

141 4

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 14/11/2024

Take my `<dialog>` this one is centered and pushes the page back exposing a nice gradient. also has light-dismiss but is more subtle about the hint. nerdy.dev/have-a-dialog

092 9

Adam Argyle @argyleink.front-end.social.ap.brid.gy · 14/11/2024

Take my `<dialog>` this one slides out from the side with an elegant inset, and also offers a mouse effect to show that it supports light-dismiss nerdy.dev/have-a-dialog

020 2