How to Make a “Raise the Curtains” Effect in CSS

“Raise the curtains” is what I call an effect where the background goes from dark to light on scroll, and the content on top also goes from light to dark while in a sticky position. Here’s an example where I …

How to Make a “Raise the Curtains” Effect in CSS originally published on CSS-Tricks. You should get the newsletter.

https://css-tricks.com/css-raise-the-curtains-effect/

Creată 3y | 2 mar. 2022, 17:21:59


Autentifică-te pentru a adăuga comentarii

Alte posturi din acest grup

Getting Creative With Versal Letters

A versal letters is a typographic flourish found in illuminated manuscripts and traditional book design, where it adds visual interest and helps guide a reader’s eye to where they should begin.

18 iul. 2025, 17:40:17 | CSS tricks
Getting Clarity on Apple’s Liquid Glass

Gathered notes on Liquid Glass, Apple’s new design language that was introduced at WWDC 2025. These links are a choice selection of posts and resources that I've found helpful for understanding the

17 iul. 2025, 13:50:20 | CSS tricks
What I Took From the State of Dev 2025 Survey

State of Devs 2025 survey results are out! Sunkanmi Fafowora highlights a few key results about diversity, health, and salaries.


16 iul. 2025, 14:40:23 | CSS tricks
Setting Line Length in CSS (and Fitting Text to a Container)

The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.


14 iul. 2025, 14:10:12 | CSS tricks
The Layout Maestro Course

Layout. It’s one of those easy-to-learn, difficult-to-master things, like they say about playing bass. Not because it’s innately difficult to, say, place two elements next to each other

11 iul. 2025, 18:50:13 | CSS tricks
Scroll-Driven Sticky Heading

I was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven

11 iul. 2025, 14:20:16 | CSS tricks
Better CSS Shapes Using shape() — Part 4: Close and Move

This is the fourth post in a series about the new CSS shape() function. So far, we’ve covered the most common commands y

7 iul. 2025, 12:50:19 | CSS tricks