It's fine. Jus' did this 🙃

@​keyframes flip {
0%, 405% { rotate: x -90deg; }
50%, 100% { rotate: x 0; }
}

Spot the 2 CSS issues 🔍

CSS scroll-snap is so borked in Chrome compared to Firefox and Safari 🥲

Can you all get on the same page, please? 🙏

'Shall we write some unit tests?'

Developers:

Want to debug device-controlled CSS parallax effects without using a device?

Simulate device orientation in Chrome DevTools 👇

'How would it look on mobile?' 🤔

All good ✅

'Let's Cook' ➡️ 'Cook' 🧑‍🍳

CSS @​media queries to the rescue!

Each time you pop the Golden Bear's balloon 🎈

[popover]:has(~ [popover]:popover-open) .bear:has(button) .bear__balloon {
animation: pop 0.2s forwards;
}

This one takes a little gettin' your head 'round 🎈

It does however help you understand how the new Popover API works ⭐️

Opening new Popovers from within a Popover doesn't close the Popover chain. When you get to the end, a <button> with type 'reset', resets the game state!

Is there any interest in videos where I go through approaches to building something without building it?

Had a couple of DMs like 'How would you build this?'

Sometimes I don't have the time to create a demo straight away 😬

Neat trick here is how you 'split' the CTA ✨

Pseudoelements in CSS will pick up pointer events 👀

When the Nav is collapsed, scale up a pseudoelement on the CTA so it's like the CTA takes up all the space 😎

Check out the purple highlighted pseudo 👇

CSS scroll-driven 'CTA to Nav' 🗺️

nav {
grid-template-columns:
auto calc(var(--grow) * 240px) auto;
transition: 1s var(--custom);
}
@​keyframes expand { to { --expand: 1; } }
body {
animation: expand steps(1);
animation-timeline: --hero;
animation-range: exit;
}

The CSS Cookbook 🧑‍🍳

Coming this year? 👀

We still doin' progressive blur stuff this week?

Got a breakdown demo if they're still trendy ✨

Overengineering always gets you in the end