Updated once again. This time with some blog posts added and experimented with CSS carousels, sibling-index(), and scroll state!

And don't forget to take the State of CSS 2025 survey when you're not watching #cssday talks. survey.devographics.com/en-US/survey...

We were at CSS Day with a LOT of students, thanks to both @bitsandletters.com and CSS Day for sponsoring them! 🫶

@cassiecodes.bsky.social joined us yesterday to talk about the hidden gems in the @gsap-greensock.bsky.social API. There’s so much good stuff in the documentation that you can miss if you don’t know about it. Thanks Cassie! 💚

And here's an updated version on Codepen. 👇 codepen.io/stefanjudis/...

CSS Custom Functions are coming … and they are going to be a game changer! 👉 brm.us/css-custom-f...

Just hit the “publish” button on a brand-new blog post! ⭐ This one shares the killer pattern I find myself using over and over with container queries: responding *within* media queries to adapt to the new container size. Once you start using this trick, you’ll see opportunities for it all over. 😄

Anchor positioning is awesome... until you run into a situation where it just doesn't work. Here's a checklist for troubleshooting, and a recommendation for how to avoid issues in the first place.

CSSWG is talking about #CSS `superellipse` for SQUIRCLES (and more like notches, cutouts and bevels) try it noamr.github.io/squircle-tes... awesome work @nomster.bsky.social and Simon Fraser!

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

Next week Dave Bitter, front end consultant at iO, will talk to our students about the rise of AI-Powered Voice Interfaces. Dave is a google dev expert, writes a ton of blogs and speaks at a lot of conferences. We can’t wait!

I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 frontendmasters.com/blog/pure-cs... This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns. #CSS #pattern #gradient #halftone

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜 li { animation: bright; animation-range: calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); scroll-snap-align: center; } @​keyframes bright { 50% { opacity: 1; }} line-height units are a gift 🎁

"babe, new craft of ui jus' dropped" babe: 😴 what happens when you stay up to publish a post before Thanksgiving 💀 👉 craftofui.substack.com/p/scrolling-a-page-out-of-the-playbook

I posted this earlier this year when I turned 12 on @codepen.io, but here it is again for everyone new here: my personal faves out of the demos I did over these years. #CSS #3D #SVG

We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient. This article explains how it works, and shows up the possibilities in 7 demos. #css #webdesign #webdevelopment #graphicdesign webkit.org/blog/16214/b...

As of Chrome 131 you have more options to style `<details>` and `<summary>`. You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses. developer.chrome.com/blog/styling...

🔥 CSS Tip: Use CSS :has() and :is() to create layouts based on contents. For my slides, I cover several common layouts - text only, text + image, two images. Then I just have to add the contents to the slide and the proper layout is applied.

a few tricks to this CSS-only styled range slider using a scroll animation on the underlying [type=range] to grab the value in CSS is only part of it 🤙 this video reveals one trick where we translate the track inside a clipped container learn about it in this week's "Craft of UI" 👇

One of my favourite things in the whole world is creating interactive explanations for things. It’s so cool that it somehow became my job 😄

Take my <dialog> this one is centered and pushes the page back exposing a nice gradient nerdy.dev/have-a-dialog

Every ~3 weeks we invite an expert to talk to our students about what it’s really like to work as a web developer, next week @emielvanbetsbrugge.bsky.social is talking about how projects work from pitch to production. We can’t wait! We’re always looking for front end speakers, btw, reach out! 🫶

For our open day one of our teachers, Sanne 't Hooft (CSS magician 🪄 sinds1971.nl), created this lovely explainer of frontend development and the focus points of our study 🤩 #frontenddevelopment #creativedevelopment #webdevelopment

This article by @ericwbailey.website on @piccalil.li is incredibly useful. It’s exactly how I prefer CSS articles to be written: starting with a problem, including clear illustrations, and offers a practical solution. Highly recommended 💯 piccalil.li/blog/making-...

📝 What Is Utility-First CSS? heydonworks.com/article/what...

💜