Page Inspect

Adam Argyle  RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G IconSkip to main feed

all (381)note (305)blog (76)css (253)html (18)js (24)oss (20)shows (117)talks (39)tools (8)

Follow my RSS feed

Nerdy Notebook



all381note305blog76css253html18js24oss20shows117talks39tools8

todaymonth20252024202320222021202020192018201720142013

1 posttoday

- atom@argyleink3 hours ago

blogcss

## An Update On My Involvement In Standards

Refocusing and reducing

20

Share a direct link to this post

7 posts| pastmonth

- atom@argyleink1 week ago

notecsstalks

My talk Midi Meets CSS is done! Had a blast bein a high energy nerd on stage blastin banjo and beats from a K.O. II.

Marc, BTconf; you rock. Day 1 of the talks have been so inspiring. Stoked for day 2.

Link

Share a direct link to this post
- atom@argyleink2 weeks ago

notecssshows

I was on the General Musings show with Kevin Powell 🤘🏻💀

We chat front-end job hunting in 2025, the misalignments between the technical interviews and the roles they were looking to fill, the overall state of the industry and hiring processes and how to distinguish yourself from the crowd.

Audio · Video

Link22

Share a direct link to this post
- atom@argyleink2 weeks ago

blogcss

## Web elements know about the user, device, variables, layout and more

As Miriam Suzanne says "containers know stuff," but like, how much stuff?

105

Share a direct link to this post
- adam@whiskey.fm2 weeks ago

noteshows

Ep #216
**Live at All Things Open w/ Shruti Kapoor**

Robbie and guest co-host Jason Lengstorf chat with Shruti Kapoor about her leap from Slack and PayPal to YouTube, the joys and pitfalls of open source, and eternal web dev debates.

⤷ whiskey.fm · youtube · spotify · apple

Link12

Share a direct link to this post
- atom@argyleink3 weeks ago

notecss

**Stoked** for my upcoming talk at Beyond Tellerrand in Berlin next month:

🎶 Midi Meets CSS 🎶

Most folks use WebGL to visualize their audio (and it's awesome) but that's not me, CSS is. I've taken a different approach…

Be there or be `aspect-ratio: 1`

Link47

Share a direct link to this post
- adam@whiskey.fm3 weeks ago

noteshows

Ep #215
**Rust Is Overrated w/ guest Naman Goel**

Robbie and I talk with Naman Goel about the origins and evolution of StyleX, how it integrates with React and other frameworks, the pros and cons of different programming languages like Rust, TypeScript, and Swift, and whatnot.

⤷ whiskey.fm · youtube · spotify · apple

Link10

Share a direct link to this post
- adam@whiskey.fm3 weeks ago

noteshows

Ep #214
**NPM Worms & RubyGems Coups: Trust Issues in Open Source**

Robbie, Chuck, and I talk about the worst whiskey, Tailwind as a “state management library,” recent security scares in open source, NPM dependency hygiene, developer visa drama, and tech salaries.

⤷ whiskey.fm · youtube · spotify · apple

Link

Share a direct link to this post

73 postsin2025

- atom@argyleink1 month ago

bloghtml

## closedBy=any

Declarative dialog light dismiss

55

Share a direct link to this post
- atom@argyleink1 month ago

notecsstalks

You can now watch my talk from CascadiaJS 2025 3 weeks ago 🤘🏻💀

Watch on YouTube

Link94

Share a direct link to this post
- adam@whiskey.fm1 month ago

noteshowscss

Ep #213
**Is CSS A programming language?**

Robbie and I chat with Kevin Powell about the quirks and complexities of CSS, Tailwind and Flexbox, AI’s failure to write decent styles, anchor dingles, trim styles, and more.

⤷ whiskey.fm · youtube · spotify · apple

Link27

Share a direct link to this post
- atom@argyleink1 month ago

notecss

On Bluesky? Here's a CSS Feed I made 🤓

Link73

Share a direct link to this post
- Web Master@admin1 month ago

note

Still a fan of Warp, it's good stuff y'all.

Link16

Share a direct link to this post
- atom@argyleink1 month ago

notecssshows

Checkout this episode of PodRocket with Kevin Powell, Paige and I; we chat about… you guessed it, CSS!

Watch or Listen

Link

Share a direct link to this post
- adam@whiskey.fm1 month ago

noteshows

Ep #212
**TalkShop Show w/ Macho Man Randy Standards**

Robbie and I chat with Dave Rupert about whiskey, web culture, the quirks of building side projects, the shifting landscape of the web, AI-driven development, spec-driven workflows, RSS’s decline, and more.

⤷ whiskey.fm · youtube · spotify · apple

Link17

Share a direct link to this post
- atom@argyleink1 month ago

notecss

Bramus with a rad snippet:

@function --light-dark(--l, --d) {
result: if (color-scheme(dark): var(--d); else: var(--l));
}


In 3 lines, a `--light-dark()` CSS function that works anywhere 🤩

Link

Share a direct link to this post
- atom@argyleink1 month ago

noteshows

I joined the good folks on Front-End Fire to share how front-end interviewing is like in 2025, in the age of AI and short attention spans.

⤷ website · youtube · spotify · apple

Link

Share a direct link to this post
- atom@argyleink1 month ago

notecss

Sticky staggered offsets + gradients = neat transition

- Simple version (linear)
- Trig version (curves)

Link72

Share a direct link to this post
- atom@argyleink1 month ago

notecss

Squircles with `clip-path: shape()`, while we wait for `corner-shape: squircle`.

Vote for `corner-shape` in Interop 2026 or give this little GUI a peep from Zoran.

Try on Codepen

Link61

Share a direct link to this post
- adam@whiskey.fm1 month ago

noteshows

Ep #211
**Agents of Chaos: Whiskey Experiments and the Future of IDEs**

Chuck and I talk about offbeat experiments, and the chaos of tech culture. They discuss AI workflows, Warp vs. IDE debates, and the realities of coding culture, from bleeding-edge hype to WordPress drudgery.

⤷ whiskey.fm · youtube · spotify · apple

Link6

Share a direct link to this post
- atom@argyleink1 month ago

notecss

Nobody wants to see your ugly config,
**Just Vite It.**

Link30

Share a direct link to this post
- atom@argyleink1 month ago

notecss

**Scroll To Bloom**

- `animation-timeline: view()`
- `:nth-of-type(An + B)`
- `@keyframes`

SO fun.

Link

Share a direct link to this post
- atom@argyleink1 month ago

note

Wow Lerosh, these are rad pics from CascadiaJS 🤩

Link

Share a direct link to this post
- atom@argyleink1 month ago

notecsstalks

My talk is in just a couple hours here in Seattle at CascadiaJS 🤘🏻💀

cascadiajs-2025.netlify.app

Link43

Share a direct link to this post
- adam@whiskey.fm1 month ago

noteshows

Ep #210
**DevRel, Linux, and the Shrinking Path for Junior Developers w/ Ali Diamond**

Robbie and Chuck talk with Ali Diamond about her journey through tech, cybersecurity, and community building. They sip tequila, swap hot takes on programming languages and developer culture, and dig into the realities of junior engineering paths.

⤷ whiskey.fm · youtube · spotify · apple

Link8

Share a direct link to this post
- adam@shopify2 months ago

note

I'm stoked to share my next role:

**Design Engineer** at Shopify;
alongside Jason Miller to hack on next-gen admin UI/UX and a new Polaris.

I'm also workin to rejoin the CSSWG via Shopify too 🙂

Thanks for all y'all's support! 💀🤘🏻

Link598

Share a direct link to this post
- Web Master@admin2 months ago

note

Twitter comments, likes and reposts are now integrated.

Link7

Share a direct link to this post
- adam@whiskey.fm2 months ago

noteshows

Ep #209
**Is Cracker Barrel a JS Framework?**

Robbie and I talk about JavaScript trends, from the overuse of hooks to frameworks chasing sameness, and why Cracker Barrel’s rebrand feels like a frontend metaphor.

⤷ whiskey.fm · youtube · spotify · apple

Link13

Share a direct link to this post
- atom@argyleink2 months ago

blogcss

## One List To Rule Them All

In the darkness may it bind us

445

Share a direct link to this post
- atom@argyleink2 months ago

blogcssjs

## Keyframe Offsets

The percentages you can pass to CSS and JS for keyframe timing.

37

Share a direct link to this post
- adam@whiskey.fm2 months ago

noteshows

Ep #208
**I've joined Whiskey Web and Whatnot** as a permanent show host 🎉

In this episode, Robbie and I talk about CascadiaJS, my new role at Shopify 👀, and why tech interviews are so broken.

⤷ whiskey.fm · youtube · spotify · apple

Link91

Share a direct link to this post
- atom@argyleink2 months ago

notecsstoolsoss

I'm happy to share that gradient.style is out of beta and:

- has been Open Sourced
- finally supports multiple background layers

Open to feedback and comments 🙂

Link451

Share a direct link to this post
- atom@argyleink2 months ago

blogcss

## The Making of gradient.style

A fun sneak peek into the sketching that led to the UI.

93

Share a direct link to this post
- atom@argyleink2 months ago

noteshowscss

Ep #151
DevTools FM

Join Andrew, Justin and I for a chat about some of the developer tools I've worked on.

Listen · Watch · Subscribe

Link22

Share a direct link to this post
- atom@argyleink3 months ago

blogcsstalks

## CascadiaJS 2025

CSS at a JavaScript event‽

35

Share a direct link to this post
- atom@argyleink3 months ago

note

> In a world where agents can reason, generate, evaluate, and deploy, you no longer need a large team to build something remarkable. You need two people: one who understands systems and one who understands the user. Better if they’re the same person. Suff Syed - Why I'm Leaving Design



I'll be your huckleberry.

Link8

Share a direct link to this post
- atom@argyleink3 months ago

blogoss

## VisBug was built into a browser!

A browser with "Design Tools" 🤘🏻

39

Share a direct link to this post
- atom@argyleink3 months ago

blogcssjs

## LLM chat prototype

ReadableStreams, view transitions, throttling, and much more.

65

Share a direct link to this post
- atom@argyleink3 months ago

noteshowscss

Ep #672
The Working Draft

With Schepp, Vanessa and me 🙂 Join us for a tour of of what’s new and what’s next in CSS.

Listen · Watch · Subscribe

Link52

Share a direct link to this post
- atom@argyleink4 months ago

note

A small sample of **UI**, **code**, **tools**, and **design** from my 20 professional years of webdev.

Link348

Share a direct link to this post
- dad@pops5 months ago

note

Happy Father's Day to other `parentNode`s

Link31

Share a direct link to this post
- atom@argyleink5 months ago

blogcss

## Nintendo Switch Homescreen recreated with CSS and a li'l bit of JS

Scroll snap, scroll-state, scroll-driven animation, and more; adding up to the smooth and tangible scroll experience we all have come to love from the Switch.

115

Share a direct link to this post
- atom@argyleink5 months ago

notetalks

It's an honor to speak at CSS Day, **the biggest CSS conference** every year.

Hope y'all enjoyed nerding out about making beautiful scroll experiences.

Link

Share a direct link to this post
- atom@argyleink5 months ago

notecss

It's not a challenge to design for reduced transparency, **it's an opportunity**.

- A card with a caption
- Adaptive frosted glass

Link75

Share a direct link to this post
- atom@argyleink5 months ago

notecsstalks

Speaking in just a couple hours 🤘🏻💀

The Slides · Codepen Collection

Link72

Share a direct link to this post
- atom@argyleink5 months ago

notecss

Off to CSS Day; see ya there‽

Link49

Share a direct link to this post
- dad@pops5 months ago

note

Mt. Rainier in the bg, on a friend's little personal website boat, playin banjo tunes in double C:

- Sally in the Garden
- Darlin' Cori
- Fly Away
- Zelda's Lullaby
- 30 Turkeys
- Smoke
- Mario Overworld Theme

Vibe check? This is the way.

Link40

Share a direct link to this post
- atom@argyleink5 months ago

blogcss

## 3 Unintuitive CSS Layout “Solutions”

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

64

Share a direct link to this post
- Web Master@admin6 months ago

blog

## Tag, I'm It

Blogging about blogging.

42

Share a direct link to this post
- adam.is.bad@css6 months ago

blogshowscss

## WebDev Challenge - S2E2

Lane Wagner and I take on 2 other teams in a 4 hour challenge to make a 2+ player game using Temporal.

56

Share a direct link to this post
- atom@argyleink6 months ago

notecss

Beautiful `<details>` are possible.

Try this one! Lots of fun micro interactions.

Link417

Share a direct link to this post
- atom@argyleink6 months ago

notecss

**CSS Zen** **Garden** Leave…

Taking time, breathing slow, clearing my head, tending to a brutalist garden on Codepen.

Seems appropriate.

Link87

Share a direct link to this post
- Web Master@admin7 months ago

note

Cloudinary removed sitewide.

All processing now done at build time with custom scripts.

Link36

Share a direct link to this post
- atom@argyleink7 months ago

blog

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

My role at Google was eliminated.

1,446

Share a direct link to this post
- devrel@google7 months ago

notecssshows

CSS `::scroll-button()`, `::scroll-marker`, Carousel Configurator, and Carousel Gallery with Chris and Dave on ShopTalk Show.

Watch · Listen · Read

Link53

Share a direct link to this post
- atom@argyleink7 months ago

notecsstalks

Recording is live!

Watch CSS Can We Do That on YouTube via Smashing Meets CSS online event.

Link36

Share a direct link to this post
- devrel@google7 months ago

blogcss

## CSS Mixins are ready for experimentation!

Here's how to get started with CSS @mixin in Chrome Canary.

149

Share a direct link to this post
- devrel@google7 months ago

notecss

Get ready! The `<select>` element can now be customized with CSS, check out the post on the Chrome Blog!

- Finally render custom HTML inside an `<option>`
- Works without JS
- Easy to progressively enhance

Link437

Share a direct link to this post
- devrel@google7 months ago

notecss

We just announced how CSS can make carousels on the Chrome Blog!

- Incredible accessibility
- Works without JS
- Builds upon regular scrollers

**CSS Carousel Configurator**:
I made this so you can directly see the relationship of a feature you want and the related CSS.

**CSS Carousel Gallery**:
Showcases meaningful use cases and exemplifies how to orchestrate many capabilities together.

Link281

Share a direct link to this post
- atom@argyleink7 months ago

notecss

Add a rainbow shadow effect with `hue longer` interpolation and a little bit of `blur()`.

Try it in this Codepen

Link87

Share a direct link to this post
- devrel@google8 months ago

note

Gettin' rrready for Google IO!

Link14

Share a direct link to this post
- atom@argyleink8 months ago

notecsstalks

Join me, Julia, Miriam and Geoff April 1st for the virtual event **Smashing Meets CSS**.

Link63

Share a direct link to this post
- devrel@google8 months ago

blogcss

## Let the stagger experiments begin

Elements can now know which position they are in the DOM tree (index) and how many other elements there are in total (count).

268

Share a direct link to this post
- devrel@google8 months ago

notecss

To give View Transitions a perspective, either:

::view-transition-image-pair(--foo) {
perspective: 500px;
}
/* or */
::view-transition-new(--foo) {
transform: perspective(500px);
}


Hope this finds someone well.

Link46

Share a direct link to this post
- atom@argyleink8 months ago

blogcss

## CSS Kaleidoscopes

Animating gradients in 2025.

35

Share a direct link to this post
- atom@argyleink8 months ago

blogcss

## An Emoji Naming Convention

Prevent collisions and make it clear.

59

Share a direct link to this post
- atom@argyleink8 months ago

notecss

Need a rad way to learn CSS anchor?

Look no further than anchoreum.com!

Link32

Share a direct link to this post
- dad@pops8 months ago

note

39 today, wheeee…

Link

Share a direct link to this post
- atom@argyleink9 months ago

notecss

For chill time I'm adding to this scroll driven animations notebook.

Some pretty wild stuff in there already, gettin wierder each bedtime routine.

Link232

Share a direct link to this post
- Web Master@admin9 months ago

note

New `<footer>`,
Went big.

Link

Share a direct link to this post
- Web Master@admin9 months ago

note

New 404 page:

- glitchtastic
- VisBug loaded so you can
**edit** or **destroy** the page

Link

Share a direct link to this post
- adam.is.bad@css9 months ago

notecssshows

Ep #14
🎙️ **Bad At CSS Podcast**

Backend dev Lane Wagner, of boot.dev and host of Backend Banter FM, guests this week sharing **what do backend dev think of CSS.**

⤷ badatcss.com · youtube · spotify

Link26

Share a direct link to this post
- atom@argyleink9 months ago

blogcss

## 6 CSS Snippets Every Front-End Developer Should Know In 2025

Toolbelt worthy, powerful, and meaningful CSS you'll need for 2025.

241

Share a direct link to this post
- devrel@google9 months ago

notecss

Advanced `attr()` in Chrome 133. Opening new ways to integrate with CSS from your HTML:

<li scroll-snap="start"></li>
<li scroll-snap="center"></li>


[scroll-snap] {
scroll-snap-align: attr(scroll-snap type(start | center | end));
}


Try it & learn more from Bramus @ Chrome Developers

Link110

Share a direct link to this post
- devrel@google10 months ago

notecss

My `@container scroll-state()` article is live!
developer.chrome.com/blog/css-scroll-state-queries

**Stuck state:**
Triggered when an element is stuck.
**Snapped state:**
Triggered when an element is snapped.
**Scrollable state:**
Triggered when an element is overflowing.

Link279

Share a direct link to this post
- devrel@google10 months ago

notecssshows

Pure CSS Scroll Spy Table of Contents

Kevin Pow()ell and I go over the CSS Wrapped 2024 site and break down the `<details>` scroll spy component to uncover the CSS scroll driven animation powering it.

Link

Share a direct link to this post
- atom@argyleink10 months ago

blogcss

## Open Props UI

A component library built on Open Props with the goal of using the newest HTML and CSS features.

76

Share a direct link to this post
- devrel@google10 months ago

notecss

My `text-box` article is live!
https://developer.chrome.com/blog/css-text-box-trim

Did you miss my `text-box` prediction?

**Don't miss** this interactive notebook, helpful for *feeling* out the effects and edge cases.

Link155

Share a direct link to this post
- Web Master@admin10 months ago

blogcss

## Introducing The Nerdy Notebook

A collection of self hosted ObservableHQ CSS Notebooks

120

Share a direct link to this post
- devrel@google10 months ago

blogcss

## :hover > :not(:hover), sorry not sorry

Focus by demotion.

254

Share a direct link to this post
- atom@argyleink10 months ago

notecssshows

"Nerding out about CSS": Watch or Listen

General Musings with Kevin Powell

Link93

Share a direct link to this post

122 postsin2024

- atom@argyleink10 months ago

notecss

Saw this on a skateboard, had to make it in CSS.

background: repeating-linear-gradient(
to bottom,
#000 0px var(--_stripe-size),
#fff var(--_stripe-size) var(--_stripe-gap)
);


Ended up not just being gradient text, but a repeating gradient text effect 🤓

Fun: CSS can repeat a repeating gradient

Link56

Share a direct link to this post
- atom@argyleink10 months ago

notecss

**Animated gradient text** is like the poster child of AI right now. Gotta have that animated gradient text sparkle button thingy to be cool.

So here! Steal the recipe.

Link124

Share a direct link to this post
- devrel@google10 months ago

notecss

Earlier this year, I wrote 5 CSS snippets every front-end developer should know in 2024 on web.dev. I think it holds up!

Checkout the 6 snippet 2023 edition

Link71

Share a direct link to this post
- devrel@google10 months ago

blogcss

## A powerful container query

How to automatically adapt scroll buttons to the inside or outside based on available space.

154

Share a direct link to this post
- devrel@google11 months ago

notecss

Today marks 28 years of CSS!

"CSS1" created in 1996.

Link

Share a direct link to this post
- atom@argyleink11 months ago

blogcss

## CSS Wishlist 2025

Holy crap I guess I want 15 more things!

133

Share a direct link to this post
- dad@pops11 months ago

note

It's cookie party day with our friends, but both kids are sick (and my spouse isn't 100% either), and we call in sick…

So, I bundled everyone on the couch, and we giggled (wrong family, too many hands, etc) our way through making cookies with AI.

Link

Share a direct link to this post
- atom@argyleink11 months ago

note

Test your eye, trust yer guts; be compared.

kerntype, a letter spacing game - by Mark MacKay

Can you kern?

Link31

Share a direct link to this post
- devrel@google11 months ago

blogcss

## CSS Wrapped 2024

5 new CSS features for components, 4 for user interactions, and 8 for developer experience!

121

Share a direct link to this post
- devrel@google11 months ago

note

7 years at Google 🙂

Link181

Share a direct link to this post
- atom@argyleink11 months ago

notecss

Small update for gradient.style, the provided CSS for your creation is **now custom properties** and not classes.

Check it out‽

Link

Share a direct link to this post
- dad@pops1 year ago

blog

## November games we're playin

Oddada, Plucky Squire, Windblown, Tiny Glade, Driftwood, and an oldie but goodie Hidden In Plain Sight.

32

Share a direct link to this post
- atom@argyleink1 year ago

blogcsshtml

## Have a dialog

A few fancyish dialogs for you to steal.

327

Share a direct link to this post
- devrel@google1 year ago

notecsshtmljstalks

**UI Workshop**

Sprinkle scroll driven animations, view transitions, popovers and container queries onto an ecommerce home page with me!

Video · Code

Link61

Share a direct link to this post
- devrel@google1 year ago

blogcssoss

## A CSS Logo Hatches!

After many iterations, submissions and cycles of feedback, we're excited to share the communities logo result.

269

Share a direct link to this post
- devrel@google1 year ago

note

I've got an author page over on developer.chrome.com!

Link

Share a direct link to this post
- Web Master@admin1 year ago

note

**New Feature** just dropped!

- The big flat list of posts is **now grouped**
- On desktop there's a new timeline nav component on the left so you can quick **jump around**
- Tag style update
- Alignment fixes in cards
- Scroll animations added to new list group dividers
- View Transitions added to the timeline nav

Link

Share a direct link to this post
- atom@argyleink1 year ago

notecss

.card {
aspect-ratio: 4/3;

@media (orientation: portrait) {
aspect-ratio: 3/4;
}
}


Link

Share a direct link to this post
- atom@argyleink1 year ago

blogcss

## A keyframe combo trick

How to combine page load keyframe animation that blends seamlessly with a scroll driven animation.

71

Share a direct link to this post
- devrel@google1 year ago

notecss

Just as `@scope` brought selector donut scoping to CSS (thanks Nicole!), so does `interactivity: inert;` bring **donut inertness**.

Try it on Codepen 🤘🏻💀
use Canary with web experiments enabled

Link31

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

David and I join Robbie and Chuck on Whiskey.fm!

🎙️ Front-end Adventures with Bad at CSS

Link19

Share a direct link to this post
- evil@atom1 year ago

note

Muahahahahahaha!

Today is a great day.

🎃💀🦇

Link1

Share a direct link to this post
- devrel@google1 year ago

blogcsstalks

## Amazing CSS in 2024 at DevFest Nantes

Watch the recording, peep the slides, steal code.

56

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Species in Pieces
**30 endangered animals, 30 pieces**

2015 CSS throw back to the super rad `clip-path` project from Bryan James, which includes a making of post on Smashing Magazine!

Link13

Share a direct link to this post
- atom@argyleink1 year ago

notejs

Play a 🫰(snap) when CSS snaps!

const snap = new Audio('snap.mp3')

scroller.onscrollsnapchange = () =>
snap.play()


Demo · JS Snap API

**Note**: you may need to click/tap before scrolling, for the browser to deem playing the audio as user activated.

Link35

Share a direct link to this post
- evil@atom1 year ago

blogcss

## Headless, boneless, skinless & lifeless UI

It's Halloween month, let's talk about UI abstractions.

40

Share a direct link to this post
- devrel@google1 year ago

blogcss

## Why isn't my \`position-try-fallback\` working in small spaces?

Learn from my `anchor()` and `position-area` mistakes.

18

Share a direct link to this post
- devrel@google1 year ago

notecsstalks

See ya in Nantes, France for DevFest! Watch out for my talk on Amazing CSS in 2024.

🩸🩸🩸 Slides 🩸🩸🩸

Link5

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #91
**Season 5 Wrap**

Una and I recap our favorite moments from the season: popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation.

**What a year for CSS!**

Watch · Listen

Link

Share a direct link to this post
- devrel@google1 year ago

notecss

Bramus investigates and reports on CSS custom property performances. What are the performance inpacts of registered and unregistered custom properties?

web.dev/blog/at-property-performance

Link

Share a direct link to this post
- dad@pops1 year ago

note

That time of year to watch Over The Garden Wall (trailer)

Link

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #90
**Scroll-Driven Animation**

Una, rad special guest Bramus, and I break down scroll-driven animation!

For more learning and information, checkout Bramus' YouTube Series and his awesome tool scroll-driven-animations.style.

Watch · Listen

Link16

Share a direct link to this post
- devrel@google1 year ago

blogcss

## Open & Close Transitions with <details>

Your boilerplate starting place for `<details>` transitions

66

Share a direct link to this post
- devrel@google1 year ago

blogcss

## CSS interpolate-size to the rescue

Animate to height or width auto with 1 CSS snippet

136

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Bring some color and intrigue to a `<dialog>` or `[popover]` with an animated radial gradient box shadow.

Def jump in and try customizing the colors 🤘🏻💀

Link45

Share a direct link to this post
- atom@argyleink1 year ago

blogcss

## A functional CSS concept

Love it or hate it?

10

Share a direct link to this post
- atom@argyleink1 year ago

notecss

A memorable video from 2019:
Video: "Why Is CSS So Weird?".

Miriam Suzanne explains how CSS is solving a weird problem, yet is guided by meaningful principles; shaping it into the powerful and complex tool it has become.

There's also a blog post.

Link

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Brad Frost shows on YouTube and a blog how LLMs (Cursor and Claude in this case) are helping him create, iterate and ideate over web design. He poses a question at the end; **maybe you don't need static comps**.

He asks for a funky design; it got funky.
He asks for a form; got a form.

My favorite moment was when he had Cursor rewrite the styles to use Open Props; really nice that it can unite values into tokens with reasonable logic.

Link

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #89
**View Transitions**

Una, rad special guest Bramus, and I explain view transitions!

Watch · Listen

Link23

Share a direct link to this post
- devrel@google1 year ago

blogcss

## Custom <select> boilerplate + transitions

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

142

Share a direct link to this post
- devrel@google1 year ago

notecssjs

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

Try it · View Source

Link23

Share a direct link to this post
- dad@pops1 year ago

blog

## Two indie games we're hackin on in the house

A fragile egg puzzle platformer and a beautiful, hand painted, storydriven water color art experience.

Share a direct link to this post
- atom@argyleink1 year ago

notecsstalks

Artem Pendiurin, aka ErSketch, took SmashingConf visual notes in Freiburg.

They turned out rad, here's the one from my talk!

Link

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #88
**State Queries**

Una and I explain State Queries, specifically the **scroll queries** using `@container scroll-state()`.

Share any state queries you'd like to see with the CSSWG here or here!

Watch · Listen · Show Notes

Link

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #13
🎙️ **Bad At CSS Podcast**

Matthias Ott is the guest this week! Their keynote talk Web Design Engineering With the New CSS was **so rad** at CSS Day 2024, we had to chat.

⤷ badatcss.com · youtube · spotify

Link36

Share a direct link to this post
- atom@argyleink1 year ago

notecsstalks

My "Tik Talk" at Smashing Conf went great! Will share the video when it's available.

Until then, here's everyone's favorite picture from the event. They're calling it **The CSS Renaissance** 🤣

Link21

Share a direct link to this post
- devrel@google1 year ago

notecsstalks

Arrived in the beautiful, green, city of Freiburg for Smashing Conf.

It's a mystery why I'm here 🕵️

Link7

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Combo `light-dark()` with Temani's great `border-image` techniques.

.card > figcaption {
color: light-dark(#000, #fff);
border-image: fill 0 conic-gradient(light-dark(#fff8, #0008) 0 0);
}


Try it on Codepen

Link18

Share a direct link to this post
- devrel@google1 year ago

notecsshtmlshows

Ep #5
**The Over-Easy Machine**

- UI layering with `anchor()`
- no more complex `position: absolute`
- keyword alignment
- intrinsically sized based on content
- pairs radically with `popover` elements



**Try** the machine:
Basic · Author Cards · Animated Popover



The latest **Mini Web Machine** on Chrome Developers
*Tiny bits* of code that **power great UX**.

Link31

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #12
🎙️ **Bad At CSS Podcast**

Estelle Weyl and Eric Meyer join to discuss their book CSS The Definitive Guide 5th Edition, and of course chat about what CSS they're bad at.

⤷ badatcss.com · youtube · spotify

Link36

Share a direct link to this post
- atom@argyleink1 year ago

notecss

This line of code is about to be in every single stylesheet.

h1, p, button {
text-box: trim-both cap alphabetic;
}


Centering in CSS is about to get even finer grained.

Try it demo 1 • demo 2 • demo 3

Link83

Share a direct link to this post
- atom@argyleink1 year ago

blogcss

## CSS functions in the works

Some of these functions look hot!

36

Share a direct link to this post
- devrel@google1 year ago

notecss

Una and I chat with Wes Bos and Scott Tolinkski of SyntaxFM about the CSS4 and CSS5 RFC plus we dig in to some experiments in Chrome Canary (`text-box-trim` and `scroll-state()` queries).

Subscribe, listen or watch
Youtube · Spotify

Link

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #87
**Anchor Positioning**

Una and I explain `anchor()` and all it's glory!

Watch · Listen

Link

Share a direct link to this post
- atom@argyleink1 year ago

notejshtml

Excellent post on the `CloseWatcher` API by Abdelrahman Awad.

Link

Share a direct link to this post
- devrel@google1 year ago

blogcss

## Page and Component Adaptive Light/Dark

Three solutions, one for today and two for tomorrow

65

Share a direct link to this post
- evil@atom1 year ago

notecss

Get yours.

Link

Share a direct link to this post
- atom@argyleink1 year ago

note

Frostapalooza rocked! So many musicians, all coming together JIT, and… takin. down. the. house!!

Get yer own "Kiss My CSS" shirt here 🤘🏻💀🤘🏻

Link8

Share a direct link to this post
- devrel@google1 year ago

notecss

Take the survey!

Link2

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Scroll Snap + Scroll Driven Animation carousel

💡 in the mobile size it looks a lot like the iOS app switcher eh?

try it!?

Link128

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Scroll to 3D space travel through CSS4 and CSS5.

try it!?

Link

Share a direct link to this post
- devrel@google1 year ago

notejs

Learn all about the new `scrollSnapChange` and `scrollSnapChanging` JS events.

Or try this nifty Snap Event Visualizer 🤘🏻

Link52

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #11
**14 CSS talks in 1 hour**

- Overview of CSS Day 2024
- CSS Day 2024 YouTube Playlist

⤷ badatcss.com · youtube · spotify

Link

Share a direct link to this post
- atom@argyleink1 year ago

notecssshows

**Lane Wagner and I chat CSS**

- CSS is the hardest programming language
- Backend CSS (back-of-the-front)
- Front-end has multiple bosses that… may make people cry

⤷ Backend Banter · youtube · spotify

Link

Share a direct link to this post
- devrel@google1 year ago

notecsshtml

Join me in Beijing‽

I'm giving a workshop that'll use CSS to add some rad upgrades to a store page.

Link

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #85
**linear() easing**

Una and I cover the `linear()` easing function, breaking down the API, tools for generating them, and libraries that can make adoption nice and easy.

Watch · Listen

Link6

Share a direct link to this post
- devrel@google1 year ago

notecsshtmlshows

Ep #4
**Pop n' Lock**

- `<dialog>` basics
- `top-layer`, `transition-behavior` and `overlay` explained
- how to transition a `<dialog>`

The latest **Mini Web Machine** on Chrome Developers · *Tiny bits* of code that **power great UX**.

Link19

Share a direct link to this post
- atom@argyleink1 year ago

notecss



being on top of everything has never been so easy

<dialog>

Link23

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #84
**Text Wrap**

Una and I cover the `text-wrap` shorthand.

Watch · Listen

Link11

Share a direct link to this post
- atom@argyleink1 year ago

noteshowsjs

Jason and I "install it" 🤣

Watch on YouTube

Link16

Share a direct link to this post
- atom@argyleink1 year ago

note

Lakitu is an OG cloud nerd.

Link

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #83
**:has() tips and tricks**

Una and I expand on episode 61 about `:has()` by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS.

Watch · Listen

Link9

Share a direct link to this post
- devrel@google1 year ago

notecss

Videos from CSS Day 2024 are releasing weekly! Rachel Andrew's on Layout and Reading Order just dropped today!

& don't miss this one by Matthias Ott called Web Design Engineering With The New CSS.

Link13

Share a direct link to this post
- atom@argyleink1 year ago

notecss

:whispers: CSS motion blur

Link15

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #82
**What's new in color functions**

Una and I catch you up with the latest changes to color functions.

Watch · Listen

Link13

Share a direct link to this post
- devrel@google1 year ago

notejs

Preview two new JS events:
`scrollSnapChange` & `scrollSnapChanging`

Watch me as I explain what's happening in this scroll snap event visualizer.

Try it in Canary by turning on #enable-experimental-web-platform-features

Link

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #81
**Trigonometric Functions**

Una and I make math practical for the UI Engineer by avoiding the complex side of the mathematics and instead, **focus on use cases**.

This is the episode about math in CSS we've always wanted. Follow along as we surprise ourselves over and over with how inspiring the applications of these concepts are.

Watch · Listen

Link18

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #10
🎙️ **Bad At CSS Podcast**

David East and I dive into a list of things we think are time wasters disguised as time savers.

⤷ badatcss.com · youtube · spotify

Link9

Share a direct link to this post
- atom@argyleink1 year ago

blogtools

## 9 rad tools in tabs I'm trackin

What's in your toolbelt?

15

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Calendar prototype with sticky headers:

- scroll snap
- sticky
- grid
- `z-index: 1`

⤷ try it on Codepen

or checkout an SSR fork from tbeseda on Mastodon that can render many years 🤘🏻💀

Link

Share a direct link to this post
- atom@argyleink1 year ago

blogcss

## BEM with native CSS nesting

Vladyslav Zubko has the cure?

28

Share a direct link to this post
- devrel@google1 year ago

notejs

At the rad CascadiaJS conf today in Seattle.

It's beautiful outside, cool cats inside; stoked for 2 days of learnin and chin waggin.

Link

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #80
**Animating to and from top-layer**

Una and I went over popover and dialog last week, and this week we're helping you animate and transition them! Learn about `@starting-style`, `overlay`, `:top-layer`, `::backdrop`, `transition-behavior`, `:popover-open` and much more.

Watch · Listen

Link8

Share a direct link to this post
- adam@theCSSpodcast1 year ago

notecssshows

Ep #79
**Popover and Dialog**

Una and I are back in **Season 5** of the CSS Podcast! We discuss popover and dialog, how they're different, and how to animate them.

Popover and dialog are both Baseline now 👀

Watch · Listen

Link16

Share a direct link to this post
- atom@argyleink1 year ago

notecss

So excited to be back in Amsterdam for CSS Day! Find me at a booth, ask me about CSS carousel, typography, devtools, or whatever! See you there!

Find the videos here if you can't make it, they're super worth it.

Link

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #9
🎙️ **Bad At CSS Podcast**

David East and I discuss (and show on YouTube) how rad single keyframes can be.

⤷ badatcss.com · youtube · spotify

Link11

Share a direct link to this post
- atom@argyleink1 year ago

notecss

**Physics in CSS!**

I transferred a JS physics function into CSS thanks to `sqrt()`, `exp()`, `sin()`, `cos()` and `@property`.

:root {
--mass: 1;
--stiffness: 100;
--damping: 5;
--start-velocity: 0;
}


Check it out on Codepen. Change the properties and see a different animation.

Link

Share a direct link to this post
- evil@atom1 year ago

notecss

There's a whole **next level of CSS centering** that's about to land on y'all and blow yer mind.

I warned you.

Link

Share a direct link to this post
- devrel@google1 year ago

notecsshtmlshows

Ep #3
**The Looper Pile - Mini Web Machine Fusion**
⤷ layout a "Looper" with the "Pile"

This episode represents the overarching theme of the series! Combining small bits of code together can be a great way to build larger experiences.

Watch episode 3 on YouTube

Link5

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Prefer the light or the dark mode? Try it on Codepen.

Link

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #8
🎙️ **Bad At CSS Podcast**

David East and I discuss container queries and try to tell you everything you'll need to know.

⤷ badatcss.com · youtube · spotify

Link10

Share a direct link to this post
- devrel@google1 year ago

note

Microsoft Build, that was fun!

Chuck and the Whiskey Web and Whatnot show, that was SUPER fun.

Link

Share a direct link to this post
- atom@argyleink1 year ago

blogcss

## Using @starting-style and transition-behavior for enter and exit stage effects

How to leverage first render and `display: none` as transition triggers for any element

130

Share a direct link to this post
- atom@argyleink1 year ago

noteshows

August 17th - @Mr. Smalls Theater

Frostapalooza!

I'll be playin guitar 🎸 in 2 ✌️ songs at a benefit concert extravaganza called Frostapalooza; for Brad Frost's birthday!

**You should come!** Snag a ticket

Link

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Normally `@keyframes` would be used for this technique, but with `@starting-style` **we can transition**.

* {
transition: opacity .5s ease-in;
@starting-style { opacity: 0 }
}


Triggers via:

- page load
- inserted into the DOM
- going from display `none` to a visible display value

I feel like there's more use cases to explore. Let me know what you find‽

Try it on Codepen

Link

Share a direct link to this post
- devrel@google1 year ago

notecssoss

CSS4 RFC is live and ready for community feedback!

The CSS4 Community Group has been meeting weekly to **categorize every CSS feature** into CSS3, CSS4, and CSS5.

Yep, you read that right, CSS5.

- *Curious what features are in each bucket?*
The RFC has it all laid out.
- *Disagree with a categorization?*
Make a comment!

**We want to hear from you**. Help us ensure we've mapped the features into buckets you agree with, can teach, can learn, and can grow with.

Check it out

Link17

Share a direct link to this post
- devrel@google1 year ago

notecsshtmlshows

Ep #2
**The Pile**

- element layering layout machine
- replaces many use cases for `position: absolute`
- offers group or individual keyword alignment
- can be **intrinsically sized** based on content

Watch episode 2: **The Pile**

The latest **Mini Web Machine** on Chrome Developers · *Tiny bits* of code that **power great UX**.

Link20

Share a direct link to this post
- atom@argyleink1 year ago

notecssshows

The rad Kevin Powell and I share our favorite CSS features that **aren't new but are seldom used**.

How many of the 23 did you know‽

Watch on YouTube · Checkout Demos

Link

Share a direct link to this post
- devrel@google1 year ago

blogosstools

## VisBug v0.4.0 release notes

Some much needed updates are ready for y'all!

43

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Here's a fun use case for CSS `paint-order`

Codepen · MDN · CanIuse?

Link114

Share a direct link to this post
- devrel@google1 year ago

notecssshows

Introducing the GUI Challenges series successor:

**Mini Web Machines!**
*Tiny bits* of code that **power great UX**.

- shorter episodes
- copy and paste free code
- narrower focus
- meaningful use cases

Watch episode 1: **The Looper**

Link35

Share a direct link to this post
- devrel@google1 year ago

notecssshowstalks

I had the pleasure of speaking at Epic Web Conf in Park City, Utah!

My talk was titled:
**Lightning in a Bottle with CSS Custom Properties**

Took a workshop on Remix and Shopify, watched to great talks about the web, OneWheeled, and hungout with Kent, Una, Chan, Annie, Ryan, Theo and many more 🤓

Lovely event, people, & location.

Watch · Slides · Demo

Link16

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Screen shakes are so cool in video games…

**Web buttons** can do that!

Link34

Share a direct link to this post
- atom@argyleink1 year ago

notecss

A gradient border image, transparent at the edges, looks like it thins out as it fades out.

.effect {
border-image:
linear-gradient(
transparent,
var(--indigo-6),
transparent
)
1 / 4px /* slice n' size */
;
}


Link

Share a direct link to this post
- devrel@google1 year ago

notecss

Gallery layout **rotation and interaction** animation with View Transitions.

Try it on Codepen

Link

Share a direct link to this post
- atom@argyleink1 year ago

blogcssoss

## BYO CSS tokens to Tailwind v4's new CSS centric config

Kinda nice to ditch a JS file in this instance.

25

Share a direct link to this post
- atom@argyleink1 year ago

blog

## Vibe check

A bit of what I've been up to

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #7
**Dave Rupert is bad at CSS**

- Macho Man Randy Standards cameo
- Styling inputs and makin knobs
- `field-sizing`
- `:user-invalid`
- `content-visibility`
- Relative color syntax (RCS)

⤷ badatcss.com · youtube · spotify

Link16

Share a direct link to this post
- devrel@google1 year ago

blogcsshtml

## Steal this popover code

Transition a popover in and out of the top layer penthouse

44

Share a direct link to this post
- atom@argyleink1 year ago

blogcss

## Can you feel the rhythm‽

It's much more than vertical rhythm on the web

23

Share a direct link to this post
- Web Master@admin1 year ago

note

Bluesky mentions are now collected and shown on notes and blog posts on this site, just like Mastodon.

Link153

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #6
**New Year, New Resolutions:**
A look at me and David's CSS goals for 2024

- Finish Open Props v2
- Build with CSS Anchor
- New uses for Container Queries
- Multiple backgrounds on gradient.style
- Get weirder with Scroll-Driven Animations
- Help DevTools evolve with modern CSS

⤷ badatcss.com

Link13

Share a direct link to this post
- atom@argyleink1 year ago

noteshowstalks

**Beautifully shot** 8m interview with Jason Lengstorf about:

- how people love shredding nice things
- is there a "dream job"?
- how to know when you're successful?
- a secret for faster career growth?

Watch on YouTube

Link

Share a direct link to this post
- atom@argyleink1 year ago

blogshowscssjsoss

## Learn With Jason (live in studio)

I made a brutalist noise experience with Svelte, PartyKit, audio streams, gradients and blend modes. Jason and I go through the code, giggle, and cause some visual chaos.

22

Share a direct link to this post
- devrel@google1 year ago

noteshows

Hung out with the super fun Kelvin Omereshone and chatted about, you guessed it, **CSS**!

Link

Share a direct link to this post
- atom@argyleink1 year ago

blogcss

## Make some hacky noise with CSS gradients

Gradient on gradient action.

35

Share a direct link to this post
- evil@atom1 year ago

notejs

document.startViewTransition
// too much to write

// makes alias: short for transition
const txn = document.startViewTransition

txn(async () => {
// much better
})


One alias *could* save a lot of characters.

sounds like a Geico commercial…

Link

Share a direct link to this post
- atom@argyleink1 year ago

notecss

A practical introduction to Scroll Driven Animations with CSS `scroll()` and `view()`

My first Codrops article 🤓

Link36

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Radio groups are so powerful! Combine them with `:has()`, animated `grid-template-columns` and `linear()` easing and you've got yourself a neat little single picker UX.

Try it on Codepen

Link

Share a direct link to this post
- devrel@google1 year ago

notecss

A CSS bento-like grid that's aware of the number of children and aspect ratio available thanks to `:has()` and `@container`.

Try the demo

Shout out to `view-transition`'s for making the interactive demo so much more compelling.

Link81

Share a direct link to this post
- atom@argyleink1 year ago

notecss

is it time to forget about physical properties like `margin-top` and `left`?

Can't throw out the x/y transforms tho 😭

Link11

Share a direct link to this post
- Web Master@admin1 year ago

note

Happy New Year!

Link

Share a direct link to this post

99 postsin2023

- adam@GUIchallenges1 year ago

noteshows

Thinking on ways to make a **Comparison** component

In this GUI Challenge, I use grid, masks and an `<input type="range">` to stack and compare 2 elements and their contents.

watch · demo · source

Link

Share a direct link to this post
- atom@argyleink1 year ago

notecss

✅ 2 lines of CSS
✅ a courtesy media query
✅ a keyframe

Check it out on Codepen

Link

Share a direct link to this post
- devrel@google1 year ago

notecss

Una, Bramus and I put together a 2023 Wrapped for CSS 🤓

Link

Share a direct link to this post
- atom@argyleink1 year ago

notecss

Thought this focus / interaction effect turned out nice; maybe you'll like it and make use of it too.

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

Link22

Share a direct link to this post
- devrel@google1 year ago

blogcssjs

## Open Props in Next with StyleX

A guide to getting started with Next, StyleX and Open Props.

9

Share a direct link to this post
- atom@argyleink1 year ago

notecss

--atom: 0.15957s;


via Open Props

Link

Share a direct link to this post
- devrel@google1 year ago

notecss

I learned **you can use `%` for chroma**!

.percentage-chroma {
color: lch(50% 50% 200);
color: oklch(50% 50% 200);
}


Added 2 examples to my CSS Color Syntax Mega List.

Link22

Share a direct link to this post
- adam@GUIchallenges1 year ago

notecssshows

Thinking on ways to solve **Picklists**

In this GUI Challenge, I show how to use leverage the **power of checkbox and radio groups** for beautiful and accessible picking UX.

demo · source

Link

Share a direct link to this post
- adam.is.bad@css1 year ago

notecssshows

Ep #5 🎙️ **Bad At CSS Podcast**

Jason Lengstorf, David East and I chaotically discuss CSS, container queries, and that pesky `clamp()` function 🖕.

Subscribe, listen or watch
Spotify · Apple · YouTube

Link6

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## Custom range input progress fill

Thanks to Roman Komarov's fork, I hoped for a CSS only solution to filling a range input's progress style with a gradient.

42

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Steal this minimal code setup for a nice comparison component.

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

View source

Link27

Share a direct link to this post
- devrel@google2 years ago

notecss

I wrote about CSS prefers-reduced-transparency on developer.chrome.com 🤓

Link21

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Checkbox and radio groups have special powers with keyboard and screen reader interactions; leaning into them can lead to some rad UI:

Picklists · Taglists

Go ahead, open them up and give it a try!

Link

Share a direct link to this post
- adam@theCSSpodcast2 years ago

notecssshows

**How do I center this div?**

Una and I discuss CSS centering, and all the different ways CSS has your back.

Turns out, there's A LOT of ways to center.

Watch · Listen

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

NEW

5 **bounce easings** added to Open Props!

.box {
animation: drop 1s var(--ease-bounce-2);
}


try it out!

Link21

Share a direct link to this post
- adam@GUIchallenges2 years ago

noteshows

Thinking on ways to make spoopy **Halloween Projections**

In this GUI Challenge, I emulate a Halloween projector effect I saw on a wall.

demo · source

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Original Codepen set up a vibrant radial gradient in each corner and adjusts their size so their color crossover created a swirly effect.

The animated version uses `@property` to interpolate each radial gradients position and adds a radial gradient size slider, so you can find other swirly moments of your own.

Link

Share a direct link to this post
- atom@argyleink2 years ago

note

Link

Share a direct link to this post
- devrel@google2 years ago

notecss

I've got a new post over on developer.chrome.com!

Everything you need to know about
CSS Relative Color Syntax 🤓

Link11

Share a direct link to this post
- atom@argyleink2 years ago

notecss

`@Container` pattern

✅ nice inline flex layout when there's room in it's `Column` container

if not?

✅ switch to a nice block layout and center the text

I like the `ch` unit for this since I'm wanting to switch based on available reading length for the text 🤓

Link

Share a direct link to this post
- adam@GUIchallenges2 years ago

noteshowscss

Thinking on ways to solve **relative color**

In this GUI Challenge, I show you how to use CSS RCS (relative color syntax) for lightening, desaturating, opacity, grayscale and more.

oklch(from hotpink calc(l - 20) c h)
hsl(from hotpink h calc(s / 2) l)
hsl(from hotpink h s l / 50%)
hsl(from hotpink h none l)


demo · source

There might be one or two RCS features you didn't know 🤓

Link15

Share a direct link to this post
- devrel@google2 years ago

notecss

Bramus explains `@scope` on developer.chrome.com and his personal blog with this quick introduction.

@scope (.Card) {
> header,
> footer {
background: hsl(none none none / 20%);
}
}


`@scope` is new in **Chrome 118**

Link

Share a direct link to this post
- adam.is.bad@css2 years ago

notecssshows

Ep #4
🎙️ **Bad At CSS Podcast**

David East and I discuss TypeScript; David defends it, and I attack it. I'll probably get mega roasted for this.

**tldr;**
I love TypeScript, for you.

Subscribe, listen or watch
Spotify · Apple · YouTube

Link4

Share a direct link to this post
- atom@argyleink2 years ago

notecss

View Source

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

CSS relative color syntax

Link

Share a direct link to this post
- adam.is.bad@css2 years ago

notecssshows

NEW
🎙️ **Bad At CSS Podcast**

David East and I have a special guest:
Chris Coyier 🎉

Subscribe and listen
Spotify · Apple · YouTube

Link11

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## Type safe CSS design systems with @property

Fail safe, reliable, & deeply nestable.

36

Share a direct link to this post
- adam@theCSSpodcast2 years ago

noteshowscss

Next up on The CSS Podcast…

Ep #71
**Why do I have layout shift?**

Watch · Listen

Link

Share a direct link to this post
- devrel@google2 years ago

notecssshows

Was on **The CSS Survey's** Live Stream Party!

✅ give Sacha and Hui a follow!
✅ sink your teeth into that juicy data
✅ hear predictions and suprises!

Just take me to the results

Link

Share a direct link to this post
- adam@theCSSpodcast2 years ago

noteshowscss

Next up on The CSS Podcast…

Ep #70
**Why do I have a distorted image?**

Watch · Listen

Link

Share a direct link to this post
- atom@argyleink2 years ago

note

Had a great vacation!
✅ kids at grandma's
✅ chilled hard w/ my partner
✅ bought a banjo! (always been intimidated)
✅ played **a lot** of banjo and banjolele
✅ built a CSS demo or two…
❌ play video games

Link

Share a direct link to this post
- adam.is.bad@css2 years ago

notecssshows

**Bad At CSS Podcast**
⤷ logo made in the browser

✅ intentionally no font
✅ lack of any styles 😉
✅ looks like you're in devtools
✅ bad layout
✅ bad colors
✅ box around bad is bad

Codepen · Spotify

Link

Share a direct link to this post
- adam@theCSSpodcast2 years ago

noteshowscss

Next up on The CSS Podcast…

Ep #68
**Why is it overflowing?**

Watch · Listen

Link

Share a direct link to this post
- adam.is.bad@css2 years ago

notecssshows

🎙️ **The Bad At CSS Podcast**

David East and I host, and sometimes bring on an occasional guest 🤓

Subscribe and listen on:
Spotify · Apple · YouTube

Link

Share a direct link to this post
- adam@GUIchallenges2 years ago

noteshows

Thinking on ways to solve **Adaptive Typography**

In this GUI Challenge, I show how to use the `prefers-contrast` media query to adapt both system and adaptive fonts to match user's contrast preferences.

**Contrast is more than just color**

demo · source

Link

Share a direct link to this post
- atom@argyleink2 years ago

noteshowscss

Experimental #CSS carousel featuring:
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

Try it in Canary with #experiments enabled

Link

Share a direct link to this post
- adam@theCSSpodcast2 years ago

noteshowscss

New season of The CSS Podcast has begun!

Ep #67
**Why isn't z-index working?**

Watch · Listen

Link

Share a direct link to this post
- atom@argyleink2 years ago

noteshows

Was on JS Party!

🎙️ Watch it (or listen)

Link

Share a direct link to this post
- adam@GUIchallenges2 years ago

noteshowscssjshtml

Thinking on ways to solve a **Morphing Button**

In this GUI Challenge, I show how view transitions can upgrade the experience of changing the `innerHTML` of a button by animating the change.

demo · source

Link

Share a direct link to this post
- atom@argyleink2 years ago

noteshowscss

Was on the @coderyan show!

Watch it‽

- Designing for more than the viewport
- Overview of the talk from Config 2023
- CSS stuff 🤓

Link

Share a direct link to this post
- evil@atom2 years ago

note

Do not take the State of CSS Survey

"Nice Adam" wants you to take it;
naturally I want the opposite

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcsshtml

## Pull to Refresh with Scroll Snap and Scroll Driven Animation

Scroll snap handles the scrolling stop points, SDA handles the animations and scrollend provides the event needed to trigger it all.

5

Share a direct link to this post
- devrel@google2 years ago

noteshowstalks

Spoke at Figma Config with Una!

**The Future of Responsive Design**

All about how the width of the viewport was never that relevant, it's more about the space a component has, the children type and count, and so much more.

- Watch it
- Config page

Link

Share a direct link to this post
- atom@argyleink2 years ago

noteshows

Was on the Cloudinary DevJams Podcast!

🎙️ Watch it (or listen)

We chat about making the nerdy.dev site with Deno and Fresh, and of course we chat all about how I'm serving images 🙂

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Vertical rhythm thanks to the `rlh` unit.

**Bonus:**
scales with the user's font size pref 😎

Link

Share a direct link to this post
- Web Master@admin2 years ago

notecss

I've joined a CSS webring!

Long live the indie web 🤘🏻💀

Link

Share a direct link to this post
- evil@atom2 years ago

note

I've been unleashed.
What **evil** will I do first?

Perhaps, I'll change one char somewhere..
and break the build.

muahahahaHAHAHAAAAA

Link

Share a direct link to this post
- devrel@google2 years ago

noteshowstalks

Co-MC'ed CSS Day 2023 with Michelle Barker 🤘🏻💀

catch up on all the talks here

What a blast, totally was with my people. I'm especially proud of a few dad jokes:

- "Why don't you `<popover>` and have a `<dialog>` with me"
- "It's not the PacMan rule, it's the conic gradient rule: leave room for another color stop in your chat circle."

Link

Share a direct link to this post
- atom@argyleink2 years ago

noteshowstalks

Spoke at Smashing Conf!

- Watch it
- Check out the slides
- DIY

Link

Share a direct link to this post
- devrel@google2 years ago

notetalksshows

**How to create personalized web experiences**

I spoke at Google IO again!
Here's a link to my talk.

Link

Share a direct link to this post
- devrel@google2 years ago

note

Upcoming talks!

- Smashing Conf San Francisco
- CSS Day (🎤 MC)
- Figma's Config with @Una

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcsstools

## A next-gen HDR CSS gradient builder

Currently in beta, this tool empowers designers and developers with tooling for the latest syntax and features of CSS gradients and wide gamut colors.

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## A conic gradient diamond and okLCH

Two conic gradients, Open Props beta okLCH prop pack and a hue slider.

9

Share a direct link to this post
- adam@GUIchallenges2 years ago

noteshows

Thinking on ways to do **3D SciFi Text**

In this GUI Challenge, I use CSS Scroll Linked Animations to 3D tilt a few paragraphs of text, and **on scroll**, make them appear to vanish into the far edges of the galaxy.

watch · demo · source

Link6

Share a direct link to this post
- devrel@google2 years ago

noteshows

Google IO talk **done!**

Success selfie at the 🆕 Seattle office's **Neon Staircase** 🤘🏻💀

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Multiple hard stops in a radial gradient sized as `farthest-corner`, this is me changing the `x` position first from `0` to `-100`, then the `y` in the same manor.

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Viewport widths n' color gamuts;
**As each widen, adapt the UI.**

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

.classic-gradient {
background-image:
linear-gradient(45deg,
white,
black 0% 20%,
white 0% 40%,
black 0% 60%,
white 0% 80%,
black 0% 100%
)
;
}


Link134

Share a direct link to this post
- devrel@google2 years ago

notecss

🆕 post on developer.chrome.com

wrap your head around…
#CSS `text-wrap: balance`

✨ **balanced headlines** ✨
with one magical line of CSS

only Chrome Canary atm, details in article

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## Open Props okLCH beta

360 palettes for the price of one.

103

Share a direct link to this post
- devrel@google2 years ago

notecssshows

Was on the @PodRocketPod!

Me, Stephanie Eckles, and Stacy Kvernmo team up and answer questions about UI and UX.

🎶 Listen on Spotify

Link

Share a direct link to this post
- atom@argyleink2 years ago

noteshows

#VisBug won an award 🤯

Chrome Web Store
**Favorite of 2022**

This award is legit! Heavy, clever and minimal. Truly a trophy I'll keep around for a long time!

Thanks everyone for the support!

Link65

Share a direct link to this post
- devrel@google2 years ago

notecss

🆕 post on web.dev

6 CSS snippets every front-end developer should know in 2023

Toolbelt worthy, powerful, and stable CSS you can use today.



Link156

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## Cyclical keyboard UX with a radio group and CSS trig functions

Radio groups naturally have cyclical roving tab index, but, I put them into a circle and now it really looks cyclical hehe.

63

Share a direct link to this post
- adam@GUIchallenges2 years ago

noteshowscsshtml

Thinking on ways to solve **Switch Groups**

In this GUI Challenge, I show how to take a fieldset packed with a radio group, and turn it into a switch group that controls text alignment.

demo · source

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## Use color-mix() to give opacity to opaque colors

Relative color syntax is a better way, but still fun to know this trick.

66

Share a direct link to this post
- devrel@google2 years ago

notecss

New post on DCC about CSS Nesting

Link112

Share a direct link to this post
- atom@argyleink2 years ago

noteshows

hehe

Link24

Share a direct link to this post
- Web Master@admin2 years ago

note

Deno & Fresh have been rad.
Same goes for Deploy.

**but…**

95% of the issues have been deps.

I have deps on NPM, deno.land, esm.sh, and unpkg… if any of these services hiccup, and I try and build; builds fail.

No single service can serve all the modules I need, and I don't need that many

💩🌈

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## A use case for CSS overflow-clip-margin, nested border radii

An alternative solution for **nested border radius** that clips the content-box.

145

Share a direct link to this post
- devrel@google2 years ago

notecss

I'm fallin behind getting my hands on some #CSS stuff!… Src of my FOMO:

- `anchor()` - Post by Jhey
- `text-wrap: balance`
- `linear()` - Spec by Jake
- `view-transitions`
- `view-timeline`

**Hella powerful** stuff there that I really don't want to let get away from me.

Link156

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## Retro Wave Gradient

Quick example of how to make that striped mask on the bottom of the circle gradient.

148

Share a direct link to this post
- Web Master@admin2 years ago

noteshows

afk.

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## Conic gradient Android spinner

Recreate an indeterminate spinner from Spotify, building off a tip from last week 🤘🏻💀

61

Share a direct link to this post
- dad@pops2 years ago

note

37 today. Maybe I'll upgrade this 2011 Mac Air.

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

This felt like a future of library customization, using `@layer`:

/* <tool-tip> styles */
@import "tool-tip.css" layer(components.tooltip);

/* later, in some-new-context.css */
@layer components.tooltip {
.some-new-context tool-tip {
--_bg: var(--surface-1);
--_shadow-alpha: 15%;
}
}


Scope the import, then append tweaks into that scope from anywhere. Safe and sound.

**Rad stuff.**

Link60

Share a direct link to this post
- devrel@google2 years ago

blogcss

## Circular gradient stroke chart

Two gradients, one's a mask and the other is the angle / completion.

491

Share a direct link to this post
- dad@pops2 years ago

note

Gettin the wiggles out before bedtime;
kids night club style.

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## Another rad use for the line-height unit

Complimenting half leading with the lh unit on inline padding

215

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Math color palettes = letter spacing
Optical color palettes = kerning

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## A color-contrast() strategy for complimentary translucent backgrounds

With relative color syntax and the color-contrast() function, we can achieve a robust and dynamic overlay effect.

463

Share a direct link to this post
- devrel@google2 years ago

notecss

**CSS HD Color Guide**

Meet the **new web color spaces**!

- What is a color gamut or color space
- Review of the classic color spaces
- Meet the new web color spaces
- Migrating to HD CSS color
- Debugging color

**It's the article I wish I had** when learning about CSS color updates.

Check it out!!

Link153

Share a direct link to this post
- adam@GUIchallenges2 years ago

blogcss

## Thinking on GLITCH effects

I chose clip-path and skew(), what do you choose?

3

Share a direct link to this post
- atom@argyleink2 years ago

notecss

**CSS color tip!**

Need a rainbow gradient? Let `<hue-interpolation>` do the work.

.vibrant-rainbow {
background: linear-gradient(
to right
in hsl      /* vibrant gradient HSL colorspace */
longer hue, /* hue-interpolation set to longer */
red, red    /* now red to red goes all the way around */
);
}


Link123

Share a direct link to this post
- devrel@google2 years ago

notecss

**CSS color-mix()**

I've got a new post on Chrome Developers with everything you need to know.

📝 Check it out!

Link158

Share a direct link to this post
- atom@argyleink2 years ago

notecss

**TcsS** - Typed Cascade Style Sheets

Why hasn't this been made yet? CSS has all the type information needed to create a comparable experience to TypeScript.

Link211

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## 10 powerful ways to use CSS variables

Tokens, house props, adaptive props, pseudo-private props, partial props, mixin props, swappy props, style query props, meta lang props and typed props. Oh my!

681

Share a direct link to this post
- devrel@google2 years ago

notejs

Delete your timeout functions and shake off their bugs, here's the event you really need: `scrollend`.

Read all about it on Chrome Developers and checkout the polyfill I wrote on NPM.

Link68

Share a direct link to this post
- devrel@google2 years ago

notecss

**Proud to share** I'll be MCing CSS Day 2023 with Michelle Barker.

Link56

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## A CSS logo‽

A 2023 take at an adaptive CSS logo, thing.

162

Share a direct link to this post
- Web Master@admin2 years ago

note

Service worker update:

- Workbox added
- Offline pages (as you visit them)
- Caches images (as you download them)

Let me know if anything has broken!

Link16

Share a direct link to this post
- atom@argyleink2 years ago

notejs

**2023 prediction:**
libraries move to or build upon Deno instead of Node.

Link15

Share a direct link to this post
- devrel@google2 years ago

blogcssjs

## Text Replace Transitions

With view transitions, even replacing text can become a custom animation.

306

Share a direct link to this post
- dad@pops2 years ago

note

Art with the kids 🤘💀

Link3

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## New CSS Relative Units

This brings us to a total of 54 CSS length units.

250

Share a direct link to this post
- atom@argyleink2 years ago

blogcssjs

## Collections are coo

Thoughts on arrays in JS and selectors in CSS

46

Share a direct link to this post
- atom@argyleink2 years ago

blogcssjs

## New Year, New Site

Read about the tech behind this new site and all the APIs I'm playing around with?

200

Share a direct link to this post

39 postsin2022

- devrel@google2 years ago

blogcss

## Gradient hue interpolation

Tell the browser to take a different route when building gradient steps.

92

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Media Query Ranges

I find this so much more readable.

@media (width <= 720px) {}


Caniuse says we're waitin on Safari to bring it from TechP to Stable; aka plugin still required 😭

Link21

Share a direct link to this post
- adam@GUIchallenges2 years ago

noteshowsjs

Thinking on ways to do **UI Physics**

In this GUI Challenge, I use requestAnimationFrame and custom properties to make bouncy and jelloey springy UI effects.

demo · source

Link53

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Individual transforms are **rad**.
when you don't need to manage the order

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Things CSS Could Still Use Heading Into 2023

> Just a couple of ideas!
> Chris Coyier

* * *

They're great ideas

- Styleable resize handles
- Regions
- Standardized multi-line
- Mixins & extends
- Inline truncation
- Animate to auto
- Nesting 😎

**Missing** `text-wrap` tho!

h1, h2, h3 {
text-wrap: balance;
}


Link

Share a direct link to this post
- devrel@google2 years ago

blogcss

## CSS Anchor API is lookin rad!

Name an anchor, position stuff to it.

Share a direct link to this post
- atom@argyleink2 years ago

notecss

html:has(.CertainItem:focus-visible) {
scroll-snap-type: y mandatory;
scroll-padding-block-start: 100px;
}

.CertainItem:focus-visible {
scroll-snap-align: start;
}


On demand with `:has()`,
when a certain item is focused..

**snap dat item into a nice position**.

Link

Share a direct link to this post
- devrel@google2 years ago

notecss

**Logical Properties**
Learn once, works everywhere.

MDN · Learn CSS · web.dev · The CSS Podcast

Link

Share a direct link to this post
- Web Master@admin2 years ago

note

Domain's moved 👍

Soft launch of nerdy.dev successful 🤘💀

Still more work. Expect change!

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Need a dropcap?
Try the `lh` unit 🤓

::first-of-type::first-letter {
line-height: 1;
font-size: 3lh;
float: start;
}


Link

Share a direct link to this post
- devrel@google2 years ago

notecss

Bramus is blogging awesome ways to use `:has()` 🤓

- CSS Islands with `:has()`
- Target parents with a certain number of children

It's a good idea to follow Bramus's RSS or Twitter

Link

Share a direct link to this post
- devrel@google2 years ago

notejs

In ~1 minute you can have FLIP\-like animation on your page with View Transitions.

document.startViewTransition(() => {
// modify the dom
// - hide stuff
// - move stuff
// - whatever!
})


**Game changer.**

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

layouts **are** loops.

Link

Share a direct link to this post
- atom@argyleink2 years ago

blogcss

## State of CSS 2022 Results are in!

I didn't have any expectations going into this, but sure came out feeling proud: The CSS Podcast, Open Props, Learn CSS, Nesting.. all toppin the charts 🙂

Share a direct link to this post
- devrel@google2 years ago

note

5 years at Google 🎉

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

a design tool is like a workspace with pre-squeezed paints ready. **bummer is**.. many artists have a preference in their paint and ink brands.

soon web browsers will offer the choice, will graphic design tools?

Link

Share a direct link to this post
- devrel@google2 years ago

blogcss

## LCH Luminance vs HSL Lightness

Lightness != Luminance

Share a direct link to this post
- atom@argyleink2 years ago

notecss

Grid and Subgrid layout slots
with named areas are rad 🤘💀

Placing things by name like search, tab bar, and home bar can be sweet.

Try it
(experiment in Canary, Safari Tech Preview or Firefox)

Link

Share a direct link to this post
- devrel@google2 years ago

notecss

use `:has()` for when an element doesn't have some other element as a child, like a card without a heading 🤓

.card {
...
&:not(:has(h3)) {
/* .card's without h3's */
}
}


Codepen

Link

Share a direct link to this post
- devrel@google2 years ago

notecss

Link

Share a direct link to this post
- atom@argyleink2 years ago

noteshows

**DevTools You Didn't Know Existed**

The daily.dev show.

Watch on YouTube

Link

Share a direct link to this post
- adam@theCSSpodcast2 years ago

noteshows

End of Season 3 of the CSS Podcast:
YouTube | Podcast!

Had a blast, CSS is so rad ❤️

Link

Share a direct link to this post
- atom@argyleink2 years ago

notecss

a rad #CSS one-liner for your hot topics

@layer demo {
h1 {
text-emphasis-style: "🔥";
}
}


Link

Share a direct link to this post
- adam@GUIchallenges2 years ago

noteshows

**Thinking on ways to solve** card stacks

In this GUI Challenge, I animate a stack of cards using `transform origin`, `grid` and `:has()`.

demo · source

Link

Share a direct link to this post
- adam@theCSSpodcast3 years ago

notecssshows

**Subgrid**

Una and I discuss subgrid, a special value for `grid-template-rows` or `grid-template-columns`. Learn the basic, use cases, tips, tricks and gotchas.

Watch · Listen

Link

Share a direct link to this post
- devrel@google3 years ago

notetalksshows

**Oh Snap!**

Spoke at CSS Cafe. Watch on YouTube, Peep the slides.

Link

Share a direct link to this post
- devrel@google3 years ago

noteoss

**Announcing** Chrometober!

Just like Designcember but hauntd! Checkout the blog post Building Chrometober by Jhey for lots of great details about the process.

Link

Share a direct link to this post
- atom@argyleink3 years ago

noteosshtml

Made my first commit to the HTML Spec for the `scrollend` event.

Link

Share a direct link to this post
- adam@GUIchallenges3 years ago

noteshows

Thinking on ways to solve **transitions** 🧟‍♂️

In this haunted GUI Challenge, I live code CSS `clip-path` transitions, demo some rad effects, and cover gotchas. If you don't know `clip-path`, you will by the end.

demo · source

Link

Share a direct link to this post
- atom@argyleink3 years ago

noteshows

**State of CSS Frameworks**

Was on an awesome panel.

Link

Share a direct link to this post
- devrel@google3 years ago

notetalks

**Oh snap!**

Spoke at An Event Apart in Denver on all the magical things you can do with CSS scroll-snap!

Link

Share a direct link to this post
- adam@GUIchallenges3 years ago

noteshows

Thinking on ways to solve **tooltips**

In this GUI Challenge, I build a `<tool-tip>` custom element with `:has()`, transforms, and logical properties. Besides a small backup script for `:has()`, it's all CSS powered.

demo · source

Link

Share a direct link to this post
- adam@GUIchallenges3 years ago

noteshows

Thinking on ways to solve the **cafe wall illusion**

In this GUI Challenge, I recreate a classic illusion with CSS.

demo · post · source

Link

Share a direct link to this post
- atom@argyleink3 years ago

noteshows

On the Learn with Jason show!

Jason and I bring a NextJS app to life with Open Props. Even get to do a little animation 🙂

Link4

Share a direct link to this post
- adam@GUIchallenges3 years ago

noteshowsjs

Thinking on ways to solve **carousels**

In this GUI Challenge, I try and make an accessible, responsive, adaptive and decently full featured carousel.

demo · source

Link

Share a direct link to this post
- devrel@google3 years ago

notetalksshows

Spoke at the super rad CSS Day in Amsterdam on CSS Scroll Snap.

Watch the video, peep the slides

Link

Share a direct link to this post
- devrel@google3 years ago

notetalksshows

**State of CSS 2022**

Spoke for a Google IO video and wrote an accompanying mega blog post.

Link

Share a direct link to this post
- atom@argyleink3 years ago

blogcsshtml

## My container query strategy

A single use custom element.

Share a direct link to this post
- atom@argyleink3 years ago

noteshows

Was on @KendoUI's React Wednesdays, chattin about Open Props.

Watch on YouTube

Link

Share a direct link to this post

15 postsin2021

- devrel@google3 years ago

noteoss

**Announcing** Designcember!

We on the Chrome Team use the site as a place to both test new web features all combined together, but also to showcase content from our team and others around the web.

Checkout the blog post Building Designcember for lots of juicy details.

Link

Share a direct link to this post
- atom@argyleink3 years ago

noteshows

Swyx and I chat DX vs UX, complexity cliffs in UI, and a little about design.

Watch on YouTube

Link

Share a direct link to this post
- atom@argyleink3 years ago

noteosstools

Announcing open-props.style

350 ✨**free**✨ CSS variables

Link

Share a direct link to this post
- atom@argyleink4 years ago

notecss

> UX/UI Designers are forced to design in px, in a world where accessibility is a legal requirement Christine Vallaure

* * *

Full story 👇

Why designers should move from px to rem (and how to do that in Figma)

Link

Share a direct link to this post
- atom@argyleink4 years ago

notecssshows

CSS Nesting for the W3C!

Watch on YouTube

Link

Share a direct link to this post
- devrel@google4 years ago

notecss

**Billion Laughs Attack**
aka: XML bomb 💣

A type of DoS attack aimed at XML parsers that with a few liens of code, aims to consume a ton of memory.

:root {
--ha1: lol;
--ha2: var(--ha1) var(--ha1) var(--ha1);
--ha3: var(--ha2) var(--ha2) var(--ha2);
--ha4: var(--ha3) var(--ha3) var(--ha3);
--ha5: var(--ha4) var(--ha4) var(--ha4);
...
}


#CSS was a victim of this when custom properties were introduced.

Learn more on Wikipedia or the CSS Variables Spec.

Link

Share a direct link to this post
- atom@argyleink4 years ago

noteshowscss

I join Kevin Powell on Twitch to talk about my favorite **up-and-coming CSS features**.

Watch on YouTube

Link

Share a direct link to this post
- atom@argyleink4 years ago

noteshowscss

**CSS scroll-linked animations** with Kevin Powell!

Watch on YouTube

Link

Share a direct link to this post
- devrel@google4 years ago

notetalks

**HD CSS Color**

Spoke again at CSS Camp! This time on HD color, explore what we can use today and how to prepare for the future. Checkout the slides.

Link

Share a direct link to this post
- devrel@google4 years ago

notetalksshows

**Color Gamuts of 2021**

Spoke at CSS Cafe. Watch on YouTube, Peep the slides.

Link

Share a direct link to this post
- devrel@google4 years ago

notetalksshows

**Google IO 2021**

Gave a workshop on building a user-adaptive interface. CSS grid, flexbox, media queries, and much more.

Link

Share a direct link to this post
- devrel@google4 years ago

noteshowscss

Jecelyn and I show some of the ways Chrome DevTools supports designers.

Watch on YouTube

Link

Share a direct link to this post
- devrel@google4 years ago

notetalks

**What's New In CSS**

Spoke at Hover Conf 2021.
Checkout the slides.

Link

Share a direct link to this post
- devrel@google4 years ago

notetalks

**Great Developer Tools**

Spoke to the Stripe DX team in Seattle at their summit where I shared learnings from working with Chrome DevTools teams and creating VisBug. View the slides.

Link

Share a direct link to this post
- atom@argyleink4 years ago

noteosstools

Announcing conic.style

Grab n' go beautiful and unique `conic-gradient`s.

Link

Share a direct link to this post

2 postsin2020

- devrel@google5 years ago

notetalksshows

**What's New in 2020**

Spoke online for London CSS, rapid fire CSS goodies like proposals, drafts, specs, tools & more. Check out the slides.

Watch on YouTube

Link

Share a direct link to this post
- atom@argyleink5 years ago

noteosscsstools

Announcing transition.style

Grab n' go (dont even need the lib) `clip-path` animations

Link

Share a direct link to this post

12 postsin2019

- atom@argyleink6 years ago

notecssoss

Made my first commit to a CSS Spec.

Link

Share a direct link to this post
- atom@argyleink6 years ago

noteshows

I join David Khourshid and Stephen Shaw on The Keyframers!

Watch on YouTube



Link

Share a direct link to this post
- devrel@google6 years ago

noteshows

Kayce and I answer some DevTools questions 🙂

Watch on YouTube

Link

Share a direct link to this post
- devrel@google6 years ago

notetalks

Corner at View Source Conf in Amsterdam

Link

Share a direct link to this post
- atom@argyleink6 years ago

noteshows

Chatted VisBug with Stefan Judis 🤘💀

Watch on YouTube

Link12

Share a direct link to this post
- atom@argyleink6 years ago

noteosscsshtml

Released Slyd!

<slyds>
<slyd>
<h1>Slide 1</h1>
<h2>subtitle</h2>
</slyd>
...
</slyds>


Scroll snap powered, parallax featured, bi-directional slide framework.

Link

Share a direct link to this post
- atom@argyleink6 years ago

notecssshows

I join Travis Neilson on the Google Design "Method Podcast" show to talk about VisBug!

Listen

Link

Share a direct link to this post
- atom@argyleink6 years ago

notetalks

**Deceiving For Good**

Spoke at Seattle Interactive Conf about using UX knowledge for good. See the slides.

Link

Share a direct link to this post
- devrel@google6 years ago

notetalksshows

Spoke at CSS Camp on how to slow the pace down in an app for anxiety free, frictionless UX.

Spoke at JS Camp on how to leverage PWA features to build realistic prototypes.

Both talks were in the beautiful city of Barcelona ❤️

Link

Share a direct link to this post
- atom@argyleink6 years ago

noteshows

MPJ(funfunfunction) and I chat **CSS Grid**.

Watch on YouTube



Link

Share a direct link to this post
- atom@argyleink6 years ago

noteshows

Rick Viscomi and I chat about the role of design systems in modern web development and how they can change the dynamics between designer and developer.

Watch on YouTube



Link

Share a direct link to this post
- devrel@google6 years ago

notecss

Became a member of the W3C and CSSWG!

Link

Share a direct link to this post

5 postsin2018

- devrel@google7 years ago

noteosstools

VisBug was made open source! Plus an interactive tutorial website that looks like a bunch of artboards that need fixed.

Watch the announcement at Chrome Dev Summit 2018.

Link

Share a direct link to this post
- atom@argyleink7 years ago

noteoss

Released Kung Fury! A syntax highlight theme.

Link

Share a direct link to this post
- atom@argyleink7 years ago

noteossjs

Released blingbling.js!

import $ from "blingblingjs";


Micro-library of shorthands for DOM selection, events, and attribute manipulation in a super minimal ES module.

Link

Share a direct link to this post
- atom@argyleink7 years ago

noteossjs

Released roving-ux.js!

import { rovingIndex } from "roving-ux";

rovingIndex({
element: document.querySelector("#carousel"),
});


User's shouldn't need to tab through each item in a list to see the next list

- Providing keyboard list UX should be easy
- Maintaining the last focused element should be easy
- RTL Support

Link

Share a direct link to this post
- devrel@google7 years ago

notetalksshows

I made a cameo in the keynote at Chrome Dev Summit 2018! Had a blast.. moment of a life time 🔥

I wore this shirt from TeeJungle, it was a thing.

Link

Share a direct link to this post

1 postin2017

- atom@argyleink8 years ago

noteosscss

Released ragrid.css!

<section grid="columns" vertically-aligned="bottom">…</section>


Works like auto-layout:

- Capable of 12-column layouts, packery, & masonry
- Uses recognizable attributes instead of classes
- Perfect for components
- 528 bytes gzipped

An intrinsic first, minimal set of layout attributes.

Link

Share a direct link to this post

1 postin2014

- atom@argyleink11 years ago

notetalksshows

Spoke at TEDx, Tacoma: Embrace UI.
✅ Slides built with Node and sockets for palm held slide swipeys.

*tldr;* Embrace UI because it's all around you, and when it's working right it's helping you be more human.

Link

Share a direct link to this post

4 postsin2013

- atom@argyleink12 years ago

notetalkshtml

Spoke at HTML5 DevConf in San Francisco about the cross platform (Android, iOS, Windows Phone) hybrid web app Lively.

Link

Share a direct link to this post
- atom@argyleink12 years ago

notetalks

🎓 Taught at Art Institute of Seattle:

- Intermediate Web Scripting
- Advanced Web Scripting

Link

Share a direct link to this post
- atom@argyleink12 years ago

notetalkshtml

Recorded my first set of tutorial videos. They were on #HTML5 for Intel's Developer Zone.

Link

Share a direct link to this post
- atom@argyleink12 years ago

notetalks

Gave my first front-end talk at an Adobe CreateNOW event in Seattle on HTML5 in Dreamweaver.

Link

Share a direct link to this post

ArgyleInk © 2025

Follow me on Twitter

Follow me on Mastodon

Follow me on Bluesky

Follow me on Github

WORK

- Google
- CSSWG
- CSS Podcast
- Bad@CSS

TOOLS

- open-props.style
- gradient.style
- conic.style
- transition.style

SLASHERS

- RSS
- notebook
- follows
- 404

The
CSS Webring

Adam Argyle

nerdy.devargyleink

CSS DevRel @Google on Chrome, @CSSWG, co-host @CSS Podcast, co-host Bad @ CSS, host @GUI Challenges. Web design & development tips & tricks: CSS, JS, HTML, Design, & UX.

Close