Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol’ HTML and CSS!
This effect is created by rendering two containers with fixed <h1> elements. The first container has a white background with knockout text. The second container has a background image with white text. Then, using some fancy clipping tricks, we hide the first container’s text when the user scrolls beyond its boundaries and vice-versa. This creates the illusion that the text background is changing.
The CSS Working Group just agreed to define container queries in the upcoming 3rd version of the CSS Containment spec, adding Miri Suzanne as an editor.
A much cleaner way to me is to use CSS custom properties. These are commonly called “CSS variables” and you define them in CSS using the—syntax. Being “variables”, you can re-use them throughout your styles document. The fun begins when you use JavaScript to manipulate them. In the case of this example, the CSS custom property is set on the root element of the document. So you can read and set it with JavaScript!
Wrangling z-index values is a difficult task for many developers. Here is an easy-to-implement mini-framework based on existing conventions that brings clarity and confidence to working with z-index.
I’ve previously written about CSS layout that comes close to container queries. I’ve also written about fluid typography with viewport units. But this article is about fluid typography relative to the parent container.
Asko Nõmm reached a breaking point with front end that I think a lot of us can identify with:
I want to have a personal life and not have to spend my nights reading up on some new flavour of *.js in fear that if I don’t I would soon be made irrelevant. I don’t want to learn nor use a million different tools. I don’t want to know a bit about everything and a lot about nothing.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Tweet
Share