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.…
Articles Tagged
mix-blend-mode
10 Articles
A Serene CSS Dappled Light Effect
There’s a serene warmth to the early evening sunlight peaking through rustling leaves. Artists use dappled light to create a soft, hypnotic effect.
Bedford Dwellings by Ron Donoughe (2013)We can create the same sort of dappled light effect in …
Preethi
on
Fractional SVG stars with CSS
Some ⭐️⭐️⭐️⭐️⭐️ star rating systems aren’t always exactly even stars. Say you want to support rating something 2.25 stars. To do that you could “fill” the shape of the stars partially. I like this idea by Samuel Kraft. The tricky …
Shared by
Chris Coyier
on
CSS-ing Candy Ghost Buttons
Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and …
Ana Tudor
on
My Struggle to Use and Animate a Conic Gradient in SVG
The wonderful company I work for, Payoneer, has a new logo, and my job was to recreate it and animate it for a loader component in our app. I’ll explain exactly how I did it, share the problems I …
Amit Sheen
on
Taming Blend Modes: `difference` and `exclusion`
Up until 2020, blend modes were a feature I hadn’t used much because I rarely ever had any idea what result they could produce without giving them a try first. And taking the “try it and see what happens” approach …
Ana Tudor
on
Weaving One Element Over and Under Another Element
In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The …
Preethi
on
Recreating the Facebook Messenger Gradient Effect with CSS
One Sunday morning, I woke up a little earlier than I would’ve liked to, thanks to the persistent buzzing of my phone. I reached out, tapped into Facebook Messenger, and joined the conversation. Pretty soon my attention went from the …
Multi-Line Inline Gradient
Came across this thread:
…CSS superfriends! Have you seen examples of how to do multi-line padded text like this article on @css (https://t.co/2j8p4jmaT4), but with a gradient that doesn't reset for each line? pic.twitter.com/MVPdAjxt1W
— Dan Mall (@danmall)
Chris Coyier
on
mix-blend-mode
The mix-blend-mode property defines how an element’s content should blend with its background. For example, the text of a <h1 could blend with the background behind it in interesting ways.
.blend {
mix-blend-mode: exclusion;
}In the …
Robin Rendle
on
(Updated on )
