The Cascade is a blog about the past, present, and future of CSS.

Howdy—Robin Rendle here.

This blog keeps me in the loop with everything that’s possible with CSS lately but it’s also a reminder to celebrate the people doing the hard work building stuff for the web.

You can subscribe to The Cascade via RSS, shoot me an email if you absolutely must, or follow the feed. This project is directly supported by readers and the membership program.

Right now the newsletter is taking a bit of a break whilst I figure out a healthy publishing cadence, but you can subscribe below:

Tagged with chase mccoy

HDR white shinethrough

Chase McCoy:

You might be aware of a visual effect related to HDR videos if you’ve ever scrolled Instagram on your iPhone—the pixels displaying the HDR content display in full brightness, while the rest of the screen is slightly dimmed.

[...] The illustrations for Digital Divinity make use of this effect in a brilliant (literally) way by masking a pure white, HDR video such that parts of the illustration glow with an ethereal brightness. For devices that support displaying HDR content brighter than the rest of the screen, the effect is stunning.

This is a surreal effect from Digital Divinity and Chase made a really neat demo of this technique with the original Star Wars poster where the lightsaber appears to be tearing a hole straight through my screen.

New magic for animations in CSS

Cool, punk rock stuff coming in hot off the press from Chase McCoy here:

There are two new features coming to CSS that will make it much easier to further avoid JavaScript when implementing animations:

  1. Animating to and from display: none; for the sake of enter/exit animations.
  2. Animating to and from the intrinsic size of an element (such as height: auto;).

Traditionally, animating something into our out of the screen (as opposed to just hiding it visually) required JavaScript to remove the element from the page after waiting for the animation or transition to complete. No longer!

This is a BIG deal. I feel like maybe 50% of my late-night panicked CSS-related searches are about these two topics alone. Perhaps the most eye-opening part of Chase’s blog post though is this bit:

.item {
	@starting-style {
		opacity: 0;
	}

	opacity: 1;
	transition: opacity 0.5s;
}

This @starting-style chap is for when you want an element to be hidden by default but then fade in. And Una Kravets and Joey Arhar wrote about this a while back for the Chrome blog where they have a fantastic demo of a todo list in which each new item added is invisible by default with @starting-style and then expands into view.

I can see myself using these new CSS animations in every project from now until the end of time!