📝 CSS-Tricks 288: Dappled Light with CSS and Fluid Typography

View this newsletter on the web.

[Robin]: Regular contributor to the blog and all-around outstanding CSS-er, Preethi, had one of those ideas that makes me wake up as if I’ve been splashed with cold water whenever I hear it: what if we made this weird thing with CSS? How would we do that? Is this real-life thing possible in HTML?

For me, it’s questions like this that make me excited about CSS.

So: “there’s a serene warmth to the early evening sunlight peaking through rustling leaves,” writes Preethi in this post before wondering if it’s possible to make a dappled sunlight effect with CSS. Well, it totally is possible! Here’s the example Preethi made:

See the background light on that wall? In Preethi’s demo, that light is moving and contorting in the background, just like real light. The remarkable thing about this demo though is how that light is made. Just take a gander at the HTML:

<div class="backdrop"> <p class="shapes">🍃</p> <p class="shapes">🍂</p> <p class="shapes">\</p> </div>

What! That’s sure neat. With those shapes, Preethi distorts the heck out of them with mix-blend-mode and the text-shadow property to make something I’ve never seen in CSS before. Because it’s folks like Preethi who ask weird questions and make even weirder experiments that eventually lead to our whole industry being pushed forward in weirder and weirder directions. Exciting!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s