🎓 Frontend Design & Development

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

State of CSS 2025 Take the State of CSS survey

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! 🫶

Cassie standing behind a laptop during her talk

Slide: showing a 3d toolbox graphic and “Animation Toolbox” underneath

Slide about the containerAnimation prop in GSAP’s scroll trigger that allows you to link scroll triggered animations to the progress of a horizontally scrolling section that’s triggered by vertical scrolling 🤯

@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/...

A custom function that returns different values based on light or dark mode being used to visit the page.

CSS Custom Functions are coming … and they are going to be a game changer!

👉 brm.us/css-custom-f...

Container Queries Unleashed • Josh W. Comeau Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this p...

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. 😄

Here's why your anchor positioning isn't working How to find an anchor element

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!

Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost A halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be do...

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

Make creative borders with background-clip border-area How’d you like to use CSS to easily create a border from an image or gradient?

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

Making content-aware components using CSS :has(), grid, and quantity queries Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.

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? Learn about utility-first CSS and what is meant by “utility“ in this context

📝 What Is Utility-First CSS?

heydonworks.com/article/what...

💜