Nostr notes by Adam Argyle

Try the latest `<color-input>` concept: ⚓️ anchor() ...

2026-03-23T05:22:11Z

Try the latest `<color-input>` concept:

⚓️ anchor() progressive enhancement
🤖 workers for color compute
🙈 new animations & interactions
🎨 gamut boundaries, mapping, stretching
☯️ contrast scores
& much more

https://nerdy.dev/rfc-latest-color-input-concept

to this, curved and motion blurred ...

2026-03-07T05:39:17Z

In reply to nevent1q…y6y4
_________________________

to this, curved and motion blurred
https://codepen.io/argyleink/pen/VYKjPgx

how to make #CSS view transitions swoop or have motion blur or ...

2026-03-07T05:39:17Z

how to make #CSS view transitions swoop or have motion blur

or how I learned to help view transitions not always go in straight lines

⤷ https://nerdy.dev/swoop-there-it-is

from this, always straight lines ...

2026-03-07T05:39:17Z

In reply to nevent1q…l0y5
_________________________

from this, always straight lines
https://codepen.io/argyleink/pen/NWOEvro

#CSS only scroll-driven geometric orbits ...

2026-02-27T16:26:32Z

#CSS only scroll-driven geometric orbits
https://nerdy.dev/css-scroll-driven-gyro-trig-experiments

```css img:hover { scale: 1.2; clip-path: inset( 10% 10% 10% 10% ...

2026-02-06T06:05:50Z

```css
img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}
```

nice, n' simple

https://codepen.io/argyleink/pen/MYeqYEb

#CSS `@custom-media` available behind a flag in Firefox Nightly ...

2026-01-23T05:13:09Z

#CSS `@custom-media` available behind a flag in Firefox Nightly

Lovely syntax, just lovely.
https://nerdy.dev/custom-media

HUZZAH 🎉 overscroll effects for ALL scrollers in Chrome 145+ ...

2026-01-21T04:36:56Z

HUZZAH 🎉
overscroll effects for ALL scrollers in Chrome 145+

https://nerdy.dev/overscroll-effects-on-nested-scrollers-in-all-browsers

ain't that pretty!? all that support ...

2026-01-11T06:06:49Z

ain't that pretty!?
all that support

https://nerdy.dev/have-a-dialog

How to use #CSS to fix the irradiation illusion / How to adjust ...

2025-11-29T21:52:55Z

How to use #CSS to fix the irradiation illusion /
How to adjust perceived font weight in dark mode without layout shift

https://nerdy.dev/adjust-perceived-typepace-weight-for-dark-mode-without-layout-shift

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

2025-10-27T06:09:06Z

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

you get a squircle, you get a squircle, i get a squirtle ...

2025-09-26T23:31:25Z

you get a squircle,
you get a squircle,
i get a squirtle

https://nerdy.dev/squircles #css

gradient.style has finally - come out of beta - offers multiple ...

2025-08-28T21:07:01Z

gradient.style has finally
- come out of beta
- offers multiple background editing
- is open source

🎉 https://nerdy.dev/gradient.style-is-out-of-beta

The making of a #CSS5 HDR enabled gradient tool a fun peek into ...

2025-08-27T05:58:41Z

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!

https://nerdy.dev/the-making-of-gradient.style

#CSS ✅ contrast-color() ✅ control-value() ✅ sibling-index() ...

2025-08-25T16:57:56Z

#CSS

✅ contrast-color()
✅ control-value()
✅ sibling-index()
✅ scroll-state()
✅ mixins/functions
✅ @starting-style

We chat these and much more over on the Working Draft (npub1u9r…fgs4) show

⤷ https://nerdy.dev/working-draft-show-revision-672

VisBug comes preinstalled in the Orion browser 🤘🏻💀 ...

2025-07-29T18:42:55Z

VisBug comes preinstalled in the Orion browser 🤘🏻💀

https://nerdy.dev/orion-ships-with-visbug-as-the-design-tools

a quick prototype sprint on an LLM chat interface ✅ view ...

2025-07-28T22:54:49Z

a quick prototype sprint on an LLM chat interface

✅ view transitions
✅ readablestreams
✅ flow control
✅ light/dark

https://nerdy.dev/llm-chat-prototype

`-webkit-focus-ring-color` `-moz-focus-ring-color` ^ the adaptive ...

2025-07-27T04:18:15Z

`-webkit-focus-ring-color`
`-moz-focus-ring-color`

^ the adaptive "system variable focus outline" color you can use to look integrated when using `color-scheme: light dark`

would be nice to not have the prefix, just be part of this https://developer.mozilla.org/en-US/docs/Web/CSS/system-color

some of my UI work https://nerdy.dev/sizzle-rizzle ...

2025-07-04T22:05:50Z

some of my UI work

https://nerdy.dev/sizzle-rizzle

Recreating the Nintendo Switch Homescreen scroll UX - 90% done ...

2025-06-13T22:22:55Z

Recreating the Nintendo Switch Homescreen scroll UX

- 90% done with CSS
- a li'l JS for sounds, vibrations n' taps

https://nerdy.dev/nintendo-switch-homescreen-css-recreation

```css textarea { scrollbar-width: thin; } ``` thoughts?

2025-05-27T04:28:07Z

```css
textarea {
scrollbar-width: thin;
}
```
thoughts?

3 Unintuitive #CSS Layout “Solutions” ``` min-width: 0? ...

2025-05-22T20:58:05Z

3 Unintuitive #CSS Layout “Solutions”

```
min-width: 0?
flex-shrink: 0?
repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
```

wat?
https://nerdy.dev/3-unintuitive-layout-solutions

workin on the design for my slides at CSS Day 3D view transitions ...

2025-05-16T16:37:31Z

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.

while on garden leave… I suppose I'll tend to a #CSS Zen ...

2025-04-23T17:35:32Z

while on garden leave…
I suppose I'll tend to a #CSS Zen Garden

⤷ https://nerdy.dev/zen-garden-leave

G̶o̶o̶g̶l̶e̶r̶… ex-Googler. https://nerdy.dev/ex-googler

2025-04-11T18:06:07Z

G̶o̶o̶g̶l̶e̶r̶… ex-Googler.

https://nerdy.dev/ex-googler

`<span>` more like `<spandex>`

2025-03-31T19:59:47Z

`<span>`

more like

`<spandex>`

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of ...

2025-03-24T21:32:21Z

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

⤷ https://nerdy.dev/customize-a-select

scrollbars and any arrow buttons they offer arent HTML elements, ...

2025-03-20T20:25:39Z

In reply to nevent1q…mn5j
_________________________

scrollbars and any arrow buttons they offer arent HTML elements, these scroll affordances are very similar to those, just easier to style and customize.

v2 of the spec will allow you to "bring your own buttons and links" that the browser will wire up as if they're scroll buttons and markers. but to keep the accessibility easy (aka less foot guns) having the browser manage them has a lot of userland benefits.

and yep, we're working on JS events and integrations more in v2 also!

#CSS only carousels arrive in Chrome 135 ⤷ ...

2025-03-20T16:40:11Z

#CSS only carousels arrive in Chrome 135

⤷ https://nerdy.dev/css-carousel-in-chrome-135

Rainbow drop shadow? I gotchu. ⤷ ...

2025-03-19T15:57:15Z

Rainbow drop shadow?
I gotchu.

⤷ https://nerdy.dev/rainbow-shadow-button

CSS, rad folks, virtual attendance? Smashing Meets #CSS: ...

2025-03-17T00:33:14Z

CSS, rad folks, virtual attendance?

Smashing Meets #CSS:
Smashing Magazine (npub1mzk…l99l)

⤷ https://nerdy.dev/smashing-meets-css-2025

amazing what a few lines of #CSS can do ...

2025-03-13T21:13:32Z

amazing what a few lines of #CSS can do

https://codepen.io/argyleink/pen/LEYOgxy

#CSS sibling-index() and sibling-count() available Chrome Canary ...

2025-03-11T00:50:40Z

#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
⤷ https://nerdy.dev/sibling-index

example of perspective in a view transition ...

2025-03-06T23:00:30Z

In reply to nevent1q…gyxj
_________________________

example of perspective in a view transition

https://codepen.io/argyleink/pen/qEWeYzd

want 3D perspective in your view transitions? ...

2025-02-27T23:06:47Z

want 3D perspective in your view transitions?

https://nerdy.dev/view-transitions-3d-perspective

Can emoji's save us from naming hell? ⤷ ...

2025-02-20T18:15:42Z

Can emoji's save us from naming hell?

⤷ https://nerdy.dev/css-emoji-convention

30 #CSS scroll driven animation examples which is your favorite? ...

2025-02-06T18:40:53Z

30 #CSS scroll driven animation examples

which is your favorite?
- z-stack and slither are mine

https://nerdy.dev/scroll-driven-animations-notebook

cc @npub1jpy…yfwv the webring got a redesign too 🙂

2025-01-30T06:29:10Z

In reply to nevent1q…u4r2
_________________________

cc Sara Joy :happy_pepper: (npub1jpy…yfwv)
the webring got a redesign too 🙂

new <footer> nerdy.dev ...

2025-01-30T06:27:52Z

new <footer>
nerdy.dev

#CSS advanced `attr()` Unlocking new ways to integrate with CSS ...

2025-01-17T16:52:13Z

#CSS advanced `attr()`

Unlocking new ways to integrate with CSS from your HTML

https://nerdy.dev/advanced-attr

could give mine a shot?! https://github.com/argyleink/morphull ...

2025-01-13T18:23:49Z

In reply to nevent1q…al2x
_________________________

could give mine a shot?! https://github.com/argyleink/morphull

astro based, each slide gets a page made (so deep links are easy) and all the view transitions are pretty much automated (but can be customized).

Focus By Demotion a use case for #CSS `:hover > ...

2025-01-06T17:10:40Z

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

https://nerdy.dev/hover-not-hover-sorry-not-sorry

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll ...

2024-12-30T21:12:27Z

#CSS feature faceoff:

scroll triggered stuck nav (left)
vs
scroll driven animation nav (right)

which do you prefer?

try it
https://codepen.io/argyleink/pen/gbYGgrB
(use Canary for the scroll-state() support)

Oh poo, I thought they supported @property now ...

2024-12-20T22:44:19Z

In reply to nevent1q…yl3m
_________________________

Oh poo, I thought they supported @property now

https://caniuse.com/mdn-css_at-rules_property

Putting AI in your product? You're gonna need #CSS gradient ...

2024-12-20T22:30:55Z

Putting AI in your product? You're gonna need #CSS gradient text animations (if you want to be cool)

So here, a recipe!
https://codepen.io/argyleink/pen/vEBmZNw

↪ https://nerdy.dev/animated-gradient-text

direct link to CSS Wrapped 2024 ...

2024-12-05T18:31:59Z

In reply to nevent1q…zpg4
_________________________

direct link to CSS Wrapped 2024

https://chrome.dev/css-wrapped-2024/

CSS Wrapped 2024 one stop shop for the Chrome #CSS features ...

2024-12-05T18:31:58Z

**CSS Wrapped 2024**

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

https://nerdy.dev/css-wrapped-2024

7 years at Google today 🎉 https://nerdy.dev/7-years-at-google

2024-12-04T17:03:34Z

7 years at Google today 🎉

https://nerdy.dev/7-years-at-google

Take my `<dialog>` this one is centered and pushes the page ...

2024-11-14T23:52:21Z

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.

https://nerdy.dev/have-a-dialog

rebeccapurple won by a long shot 💜 voting is closed. a new ...

2024-11-12T21:31:39Z

rebeccapurple won by a long shot 💜

voting is closed.
a new repo appears.
what's next?

https://nerdy.dev/a-community-css-logo

31 #CSS features in 50m watch on YouTube ...

2024-10-30T18:24:46Z

31 #CSS features in 50m

watch on YouTube

https://www.youtube.com/watch?v=D79TND9w_AY&list=PLuZ_sYdawLiWenx-X315dfZNOaliVnSTY&index=17

OR

read the blog post for quick links to subjects you're interested in

⤷ https://nerdy.dev/amazing-css-in-2024

after tons of iteration we're excited to share RC4 of the CSS ...

2024-10-29T21:17:05Z

after tons of iteration we're excited to share RC4 of the CSS logos, and we want the community to help us pick the final color:

https://github.com/CSS-Next/css-next/issues/105#issuecomment-2445341089

Vote by reacting to the comment!

it's great! we'll feel like we collaborated on it and got ...

2024-10-03T19:27:41Z

In reply to nevent1q…n6z5
_________________________

it's great! we'll feel like we collaborated on it and got to get all the good/bad ideas out together 🙂

thanks for these! looks a lot like our earlier passes too. ...

2024-10-03T19:27:06Z

In reply to nevent1q…zm5x
_________________________

thanks for these! looks a lot like our earlier passes too. i'll add them to the wake of iterations 🙂

there wont be anything stopping user variants! we just want to ...

2024-10-03T17:14:38Z

In reply to nevent1q…z0u7
_________________________

there wont be anything stopping user variants!

we just want to make sure we have simple, legible, easy to use base logos.

the bulk of our 1st pass on ideas was in this rhelm, and we felt ...

2024-10-03T16:15:02Z

In reply to nevent1q…wrsq
_________________________

the bulk of our 1st pass on ideas was in this rhelm, and we felt it both: constrained the width, which CSS being 3 letters was already feeling crunched inside, and the other thing was it wasnt giving the number enough of a moment to shine and be distinguished from the base logo

but keep the ideas flowin!

here's the link if you want it! `#E1137C`

lolol love it

2024-10-03T15:39:17Z

In reply to nevent1q…e03m
_________________________

lolol love it

i'm pretty sure we shouldnt spin the text

2024-10-03T15:20:46Z

In reply to nevent1q…csaa
_________________________

i'm pretty sure we shouldnt spin the text

like this? ...

2024-10-03T14:23:15Z

In reply to nevent1q…v33d
_________________________

like this?

the one's that come with the font were used in all the ...

2024-10-02T17:40:56Z

In reply to nevent1q…vlzk
_________________________

the one's that come with the font were used in all the previous versions that folks didnt like. consistent feedback that the numbers didnt match.

if you're gonna pick this variant to show the number, the ...

2024-10-02T17:34:36Z

In reply to nevent1q…qquw
_________________________

if you're gonna pick this variant to show the number, the number should have it's own nice moment

subtle text shadow works, but isnt great for the dark variant. ...

2024-10-02T17:16:38Z

In reply to nevent1q…5egu
_________________________

subtle text shadow works, but isnt great for the dark variant. also feels like it doesnt add as much emphasis to the number?

thoughts on this? ...

2024-10-02T16:22:36Z

In reply to nevent1q…6pnd
_________________________

thoughts on this? https://elk.zone/front-end.social/@argyleink/113238742484406025

thoughts on this update y'all? ...

2024-10-02T16:22:07Z

In reply to nevent1q…xx3x
_________________________

thoughts on this update y'all?

https://elk.zone/front-end.social/@argyleink/113238742484406025

the numbers still werent right, so here's an updated attempt ...

2024-10-02T16:21:25Z

In reply to nevent1q…dus8
_________________________

the numbers still werent right, so here's an updated attempt

- long shadow increases contrast and creates depth
- number isnt wider than 1 char of CSS
- number isnt taller than 1 char of CSS
- numbered variant calls subtle attention to the number

thoughts?

totally, we all agreed the big number was the best, but also the ...

2024-09-30T19:56:58Z

In reply to nevent1q…mghd
_________________________

totally, we all agreed the big number was the best, but also the least legible. we agreed it'd be great for a book or poster at an event

i like your inner radius matching and overall size. ill drop it into the figma file for when we go making another iteration! ty!

we tried putting them into a shape and folks tended to feel like ...

2024-09-30T19:41:28Z

In reply to nevent1q…mjay
_________________________

we tried putting them into a shape and folks tended to feel like the numbers were small or became too bulky https://mastodon.social/@itsjavi/113161164893645002

but, that doesnt mean we cant play with an alt font or something, to improve the balance!

i made the same note! we should figure out a way to ensure there ...

2024-09-30T16:55:52Z

In reply to nevent1q…pxp3
_________________________

i made the same note! we should figure out a way to ensure there aren't strange gaps. gonna take some small tweaks to the numbers, but totally doable. ty for the confirmation feedback!

CSS Logo - RC1 - Open Source font (Dinish) - More exciting ...

2024-09-30T16:16:10Z

In reply to nevent1q…8pln
_________________________

**CSS Logo - RC1**

- Open Source font (Dinish)
- More exciting pink
- accessible variants that want to use the level number

thoughts? vibes?

we'll eventually open source all this and folks can have fun making variants of their own: adding gradients, customizing the number, etc. but we feel the baseline should provide:
- solid defaults
- accessible defaults
- light/dark variants
- small variants for buttons/sidebars/etc

Transition reveal a password field with #CSS `interpolate-size` ...

2024-09-25T16:40:26Z

Transition reveal a password field with #CSS `interpolate-size` and `:has()`

Codepen
https://codepen.io/argyleink/pen/BaXyJRL

⤷ https://nerdy.dev/interpolate-size

Make a card, dialog, or overlay pop with an animated gradient box ...

2024-09-24T17:24:17Z

Make a card, dialog, or overlay pop with an animated gradient box shadow type effect

try it on Codepen
https://codepen.io/argyleink/pen/abezozz

⤷ https://nerdy.dev/animated-radial-gradient-box-shadow-effect

What do you call an emotionally in tune web typographer? An ...

2024-09-22T16:57:00Z

What do you call an emotionally in tune web typographer?

An empath

a customized `<select>` with: - transitions - anchor() with ...

2024-09-19T22:09:31Z

a customized `<select>` with:

- transitions
- anchor() with flipping
- custom content in the `<selectedoption>`
- spring easings
- scrollable picker
- sticky optgroup
- custom icons
- light/dark

⤷ https://nerdy.dev/custom-select-with-transitions-boilerplate

learn about #CSS `interpolate-size: allow-keywords;` from ...

2024-09-19T18:27:24Z

learn about #CSS `interpolate-size: allow-keywords;` from Bramus (npub159n…rz7e) on the Chrome Blog

Animate to height or width `auto`!

https://developer.chrome.com/docs/css-ui/animate-to-height-auto

Custom `<select>` boilerplate with transitions You're ...

2024-09-19T17:51:40Z

Custom `<select>` boilerplate with transitions

You're going to want this #CSS when you go to kickoff customizing select elements.

⤷ https://nerdy.dev/custom-select-with-transitions-boilerplate

just a demo of the logo in solid colors for light/dark ...

2024-09-18T22:24:18Z

In reply to nevent1q…xtjf
_________________________

just a demo of the logo in solid colors for light/dark themes/buttons/components

that sounds like a fun community or custom thing someone could ...

2024-09-18T22:12:01Z

In reply to nevent1q…u0tr
_________________________

that sounds like a fun community or custom thing someone could do!

but for like your editor, keeping a consistent color will help you identify files. we can't wait to replace the "3" shield used everywhere and have CSS join the square logo fam

Nostr event nevent1qqsdtuxqrs9k5myfqlv34x6ga5y7nzgzv6z0n40ma9mzf9wrzs7yeggzyqjx24fgvr9sqjuf2g6neg5yl7yc7tkyzlqre6jaxlr69l9xrflg69zkhty

2024-09-18T21:46:50Z

thoughts?!

Fuck this selling point ...

2024-09-17T18:42:17Z

Fuck this selling point

Bring a rad `clip-path` transition to your light/dark toggle ...

2024-09-16T21:51:39Z

Bring a **rad** `clip-path` transition to your light/dark toggle switch with a progressively enhanced `view transition`.

Try it
https://cdpn.io/pen/debug/NWZZPLZ

Source
https://codepen.io/argyleink/pen/NWZZPLZ

https://nerdy.dev/light-dark-view-transition-with-clip-path

sad… developers have more empathy for the machine (network, ...

2024-09-09T09:46:15Z

sad… developers have more empathy for the machine (network, main thread, perf metrics, loading times, etc etc etc)…

than they do for humans.

imagine if all of that brain power was spent on empathizing for users.
- accessibility wouldn't be an after thought
- UI wouldn't be annoying
- and more

but no;
more time is spent giving the machine what it wants and what keeps it happy

another example. without trim, there's dead space above and ...

2024-08-28T23:03:34Z

In reply to nevent1q…uxp5
_________________________

another example. without trim, there's dead space above and below the lines of text ✂️

currently behind a flag in Canary and Safari! here's boxes ...

2024-08-28T23:02:39Z

In reply to nevent1q…t8e3
_________________________

currently behind a flag in Canary and Safari!

here's boxes with equal sides of padding. the ones actually in the center are trimmed to the cap size of letters

I'm in love, and pretty sure you will be too: CSS `text-box` ...

2024-08-28T22:52:41Z

I'm in love, and pretty sure you will be too:

CSS `text-box`

more demo's and a one-liner you're going to include in your CSS fo sho, on my site

⤷ https://nerdy.dev/text-box-ftw

we wont be calling these drop-downs anymore tho, with anchor() ...

2024-08-26T15:24:29Z

In reply to nevent1q…fuqm
_________________________

we wont be calling these drop-downs anymore tho, with anchor() auto-flip it…

**might be a drop-up!**

video alt:
4 customized <select> elements shown from Chrome Canary. each has a custom picker flyout, flyout flips to stay in view, keyboard accessibility, and animation

Nostr event nevent1qqs9pqq04xydnlleu3ux4hk33vcyhcrzh70l3uxfrxsvjvvckkhz2lszyqjx24fgvr9sqjuf2g6neg5yl7yc7tkyzlqre6jaxlr69l9xrflg6ju3xaz

2024-08-26T15:04:59Z

we're 5 years into getting a customizable `<select>` 😅

just fixed a huge perf issue on my site by removing some ...

2024-08-22T22:28:32Z

just fixed a huge perf issue on my site by removing some instances of `:has()`!

went from ~2s style recalc
to ~7ms style recalc

definitely try out the new selector stats feature of devtools!!

I read all these today too. My neck hurts from nodding along

2024-08-18T23:00:29Z

In reply to nevent1q…whaq
_________________________

I read all these today too.
My neck hurts from nodding along

check the pen again for more brain candy; we figured out how to ...

2024-08-15T21:02:51Z

In reply to nevent1q…8tfn
_________________________

check the pen again for more brain candy;
we figured out how to customize the colors AND make it adapt to light/dark user preferences 🤘🏻

learn how the author (Heikki Lotvonen) accomplished this in this ...

2024-08-15T15:27:52Z

In reply to nevent1q…p5fl
_________________________

learn how the author (Heikki Lotvonen) accomplished this in this blog post

https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/

no pain syntax highlighting‽ - no JS - no markup transformation ...

2024-08-15T15:27:52Z

no pain syntax highlighting‽
- no JS
- no markup transformation or tokenization

how?
via **Colr Fonts** 💪

try it!
https://codepen.io/argyleink/pen/GRbyNNv

BEM with native CSS nesting? Vladyslav Zubko is trying something ...

2024-06-21T21:19:15Z

BEM with native CSS nesting?
Vladyslav Zubko is trying something new.

⤷ https://nerdy.dev/bem-in-css-after-all

it seems like design tools are competing against each other to be ...

2024-06-08T14:38:05Z

In reply to nevent1q…x0un
_________________________

it seems like design tools are competing against each other to be the best Photoshop variant. meanwhile, the web's features are pushing fast into a mega capable future and designers are blissfully unaware. (i'm aware this isn't all teams, but it's def the majority)

web designers, sit with your web developers
web developers, sit with your web designers

"design tools continue to fall behind CSS" was a ...

2024-06-08T14:38:05Z

"design tools continue to fall behind CSS" was a recurring theme at CSS Day conference (npub1apy…0qmg)

- typography features (so many!)
- scroll animation
- meaningful math tricks
- layout capabilities
- container queries / responsive capabilities
- anchor positioning
- :has() and presence awareness
- quantity queries
- scroll snap

and so much more…

steal this dialog and popover snippet #CSS - transitions - ...

2024-05-22T15:23:03Z

steal this dialog and popover snippet #CSS
- transitions
- entry/exit
- backdrop included

ready for richer design system integration

try on Codepen
https://codepen.io/argyleink/pen/zYbQBOm

Nostr notes by Adam Argyle

Try the latest `<color-input>` concept: ⚓️ anchor() ...

to this, curved and motion blurred ...

how to make #CSS view transitions swoop or have motion blur or ...

from this, always straight lines ...

#CSS only scroll-driven geometric orbits ...

```css img:hover { scale: 1.2; clip-path: inset( 10% 10% 10% 10% ...

#CSS `@custom-media` available behind a flag in Firefox Nightly ...

HUZZAH 🎉 overscroll effects for ALL scrollers in Chrome 145+ ...

ain't that pretty!? all that support ...

How to use #CSS to fix the irradiation illusion / How to adjust ...

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

you get a squircle, you get a squircle, i get a squirtle ...

gradient.style has finally - come out of beta - offers multiple ...

The making of a #CSS5 HDR enabled gradient tool a fun peek into ...

#CSS ✅ contrast-color() ✅ control-value() ✅ sibling-index() ...

VisBug comes preinstalled in the Orion browser 🤘🏻💀 ...

a quick prototype sprint on an LLM chat interface ✅ view ...

`-webkit-focus-ring-color` `-moz-focus-ring-color` ^ the adaptive ...

some of my UI work https://nerdy.dev/sizzle-rizzle ...

Recreating the Nintendo Switch Homescreen scroll UX - 90% done ...

```css textarea { scrollbar-width: thin; } ``` thoughts?

3 Unintuitive #CSS Layout “Solutions” ``` min-width: 0? ...

workin on the design for my slides at CSS Day 3D view transitions ...

while on garden leave… I suppose I'll tend to a #CSS Zen ...

G̶o̶o̶g̶l̶e̶r̶… ex-Googler. https://nerdy.dev/ex-googler

`<span>` more like `<spandex>`

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of ...

scrollbars and any arrow buttons they offer arent HTML elements, ...

#CSS only carousels arrive in Chrome 135 ⤷ ...

Rainbow drop shadow? I gotchu. ⤷ ...

CSS, rad folks, virtual attendance? Smashing Meets #CSS: ...

amazing what a few lines of #CSS can do ...

#CSS sibling-index() and sibling-count() available Chrome Canary ...

example of perspective in a view transition ...

want 3D perspective in your view transitions? ...

Can emoji's save us from naming hell? ⤷ ...

30 #CSS scroll driven animation examples which is your favorite? ...

cc @npub1jpy…yfwv the webring got a redesign too 🙂

new <footer> nerdy.dev ...

#CSS advanced `attr()` Unlocking new ways to integrate with CSS ...

could give mine a shot?! https://github.com/argyleink/morphull ...

**Focus By Demotion** a use case for #CSS `:hover > ...

#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll ...

Oh poo, I thought they supported @property now ...

Putting AI in your product? You're gonna need #CSS gradient ...

direct link to CSS Wrapped 2024 ...

**CSS Wrapped 2024** one stop shop for the Chrome #CSS features ...

7 years at Google today 🎉 https://nerdy.dev/7-years-at-google

Take my `<dialog>` this one is centered and pushes the page ...

rebeccapurple won by a long shot 💜 voting is closed. a new ...

31 #CSS features in 50m watch on YouTube ...

after tons of iteration we're excited to share RC4 of the CSS ...

it's great! we'll feel like we collaborated on it and got ...

thanks for these! looks a lot like our earlier passes too. ...

there wont be anything stopping user variants! we just want to ...

the bulk of our 1st pass on ideas was in this rhelm, and we felt ...

lolol love it

i'm pretty sure we shouldnt spin the text

like this? ...

the one's that come with the font were used in all the ...

if you're gonna pick this variant to show the number, the ...

subtle text shadow works, but isnt great for the dark variant. ...

thoughts on this? ...

thoughts on this update y'all? ...

the numbers still werent right, so here's an updated attempt ...

totally, we all agreed the big number was the best, but also the ...

we tried putting them into a shape and folks tended to feel like ...

i made the same note! we should figure out a way to ensure there ...

**CSS Logo - RC1** - Open Source font (Dinish) - More exciting ...

Transition reveal a password field with #CSS `interpolate-size` ...

Make a card, dialog, or overlay pop with an animated gradient box ...

What do you call an emotionally in tune web typographer? An ...

a customized `<select>` with: - transitions - anchor() with ...

learn about #CSS `interpolate-size: allow-keywords;` from ...

Custom `<select>` boilerplate with transitions You're ...

just a demo of the logo in solid colors for light/dark ...

that sounds like a fun community or custom thing someone could ...

Nostr event nevent1qqsdtuxqrs9k5myfqlv34x6ga5y7nzgzv6z0n40ma9mzf9wrzs7yeggzyqjx24fgvr9sqjuf2g6neg5yl7yc7tkyzlqre6jaxlr69l9xrflg69zkhty

Fuck this selling point ...

Focus By Demotion a use case for #CSS `:hover > ...

CSS Wrapped 2024 one stop shop for the Chrome #CSS features ...

CSS Logo - RC1 - Open Source font (Dinish) - More exciting ...

Bring a rad `clip-path` transition to your light/dark toggle ...