It's time to learn oklch color
It’s easy to get lost in all this. So I’m going to try to make it easy: If you don’t know where to start, or which of these things is going to be practically useful enough to be worth your time, I think the biggest bang for your buck is to learn OKLCH (or, “Oklachroma”, if I had my way and could make that catch on). Hopefully I can convince you that it’s worth diving in and learning.
Sticky Page Header Shadow on Scroll
We've seen it plenty of times around the web where a website's page header follows us as we scroll down the page. CSS makes doing this a breeze with sticky positioning. What if we desired something a little bit extra, like applying a
box-shadowto the sticky header as soon as the page is scrolled?
Trigonometric functions in CSS
In CSS it’s possible to write mathematical expressions. At the base sits the
calc()function to do calculations, but most likely you’ve also heard of
clamp()as well. Joining these functions are the trigonometric functions
atan2(). These functions are defined in the CSS Values and Units Module Level 4 and are available in all browsers.
The world’s most satisfying toggle
Adding playfulness to a UI with physics by creating a skeuomorphic pull cord dark mode toggle using Verlet integration.
When I Get That Low Contrast Feeling, I Need Non-Textual Healing
Do you sometimes struggle to know whether a non-text element fails for low contrast under WCAG Success Criteria 1.4.11? Try this quiz to see how you fare.
In-Depth Guide to CSS Logical Properties
Find out why you should start using CSS Logical Properties, how logical properties work, and how to rewrite your existing CSS using logical properties to fix potential problems with different writing modes (like right-to-left and vertical).
Sponsored by Cloud Four
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.