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

Check it out‽

Super exciting set of games here! Been really fun going through each with the fam. Windblown may be a bit violent, but we've been playing Dead Cells, Hades II and Cult of the Lamb… so we're ok with it when it's in good taste.

Oddada #

Get this game and get a bunch of cool instruments and effects that you use in a 6 part level to create a song. The song gets stashed on a cassette tape, which you get to design and put in a carrying case.

The songs guide you really well, there's tons of creative possibilities. Everyone in the fam has made a song, and each wants to make another. Very fun, 15-20m creative time making a song through a random but guided experience with strange but familiar instruments.

Trailer · Steam Page

Plucky Squire #

Be the hero in the book, and help him transcend the page and enter the kid's desk where it's being written. At first the game feels like Zelda on Super Nintendo, side scrolling to different map areas, but cleverly doing it like it's a page turn. But then things break that 2D barrier.

Not only is the art cute, the story telling and narration spectacular, but it's just rad to jump off the page as the hero. The game has you cleverly rewrite the story, bring things from the real world into the book, and even play a Guitar Hero style battle or 2.

A very cool family story time experience.

Trailer · Steam Page

Windblown #

From the creators of Dead Cells, a rapid paced metroidvania type dungeon crawler I loved, comes a 3D crawler that feels like a blend of Hades II and Dead Cells.

Trailer · Steam Page

Tiny Glade #

Cozy up in this specialized design tool for building castles and cottages. We've spent hours in here already, just dreaming and molding the land to the perfect abode.

The design tools are entirely custom made, and it shows as the game is often described as cozy. How could design tools feel cozy when they sometimes they feel like a battle?! This game nails it, and makes me wish there was a web design tool that got the same cozy reputation… somehow.

Trailer · Steam Page

Driftwood #

My buddy suggested this game to me because I love the OlliOlli series, aka it's good for hitting that zen vibe when nailing something super technical. Well…

I played this game with my kids and it immediately turned into a comedy. Within 20m my kids were cry laughing from watching my sloth ragdoll after I biff on the skateboard. Not exactly the gift my friend was suggesting, but a gift nonetheless.

Trailer · Steam Page

Hidden In Plain Sight #

This is an oldie but goodie, a coop game that always results in a fun time. The premise is, you need to become invisible in the crowd of CPU characters. There's a few different mini games that involve this strategy, but they always pit you against the other players, where some are hiding and some are seeking.

I've got the kids playin it with their friends and the funniest phrase gets yelled out while they're playing:

I found myself!

They yell this because at the start of each level, there's like 50+ random characters on the screen, and no one knows which one is them at first. You have to find yourself, stay hidden like a computer moving dork, and the others are hunting for your human movements. Very silly to role play like a random computer character.

Trailer · Steam Page

3 free, semi-fancy, dialog examples for you and 1 dialog that can open and close without JS. They use CSS transitions for interruptible user experience and Open Props for the values.

Push it real good #

Scale back the page, dim the background to set the mood, and slide in the modal contents:

Flyout panel #

Classic fly out from the side, but is elegantly inset, and implements light-dismiss and an adaptive light/dark mouse visual over the ::backdrop:

Cart page pusher #

Another classic, this one pushes the whole page out of the way (which kind of makes sense for showing what inert is doing), and reveals a sidenav that wants to have a good total at the bottom.

Commando #

This one isn't fancy, it's just rad dialog stuff. There are basic commands moving into HTML called invoker commands. available in Canary

So eventually we'll be able to create a dialog with a close button like this:

<dialog id="dialog">
  <p>Hi, I'm a dialog.</p>
  <button commandfor="dialog" command="close">
    Ok
  </button>
</dialog>

An open button:

<button commandfor="dialog" command="show-modal">
  Open Dialog
</button> 

No js. Try it:

Here's a Dialog Codepen Collection and if you'd like a good explainer of all the CSS checkout the Pop n' Lock Machine 👋

UI Workshop

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

Video · Code

With 400 votes, rebeccapurple is the community chosen logo color for CSS! This puts a bow on the concept we've been working on with the community 💜

New repo #

Checkout the shiny new repo that will hold the logo, alt formats, and eventually variants for CSS4, CSS5, and beyond.

github.com/CSS-Next/logo.css

Big thanks #

Thanks for everyone who provided feedback, votes, and kept this on track and moving forward.

Especially thankful to the CSS Next members, they've been patient and awesome.

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

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

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

I want a page load animation that seamlessly combines with a scroll driven animation. I went through multiple versions to find the solution; but you dear reader, you don't have to suffer that.

Here's the desired result, a slow scale up animation on page load that a scroll driven animation can seamlessly modify during scroll:

Try the solution:

The Problem #

1. Page load animation = a time based animation (TBA).
2. Scroll animation = a scroll driven animation (SDA).

These compete to progress an animation AND in this case to modify the same scale property. They compete unless…

The Solution #

The element has both keyframe animations assigned, but one is listed first and the TBA only specifies the from keyframes.

h1 {
  animation: spin linear both, enter 5s ease;
}

Next, we change only one of the keyframe animations to SDA:

h1 {
  animation: spin linear both, enter 5s ease;
  animation-timeline: scroll(), auto; 👈
}

The SDA is listed first for a lesser composite order than the TBA. Then animation-timeline follows this order and specifies the first set of keyframes should be driven by scroll() and the other auto.

Woh right?

With that in place, here's trick #2:
The TBA should only specify where it should animate from, while the SDA should only specify where to.

@keyframes enter {
  from {
    scale: 0.01;
  }
}

@keyframes spin {
  to {
    scale: 0.01;
  }
}

Now, the slow playing scale-in page load TBA can run while the SDA can blend with it on scroll.

Victory.

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