CSS
What You Need to Know About CSS Color Interpolation | CSS-Tricks
Color interpolation, loosely speaking, is the process of determining the colors between two color points. It allows us to create unique colors, beautiful palettes, better gradients, and smooth transitions. I recently wrote a Guide to CSS Color Functions but didn’t have the chance to explain color interpolation in any great depth — which is a…
Should the CSS light-dark() Function Support More Than Light and Dark Values? | CSS-Tricks
One of the newer CSS features that has piqued my interest: the light-dark() function. And I’ve been closely following it ever since it became Baseline back in May 2024. The light-dark() function, briefly If you don’t know, the light-dark() function takes two color arguments: one for light mode and one for dark mode. Hence, the name light-dark(). It toggles between…
CSS Elevator: A Pure CSS State Machine With Floor Navigation | CSS-Tricks
As a developer with a passion for state machines, I’ve often found myself inspired by articles like “A Complete State Machine Made with HTML Checkboxes and CSS.” The power of pure CSS-driven state machines intrigued me, and I began to wonder: could I create something simpler, more interactive, and without the use of macros? This…
We Might Need Something Between Root and Relative CSS Units for “Base Elements” | CSS-Tricks
CSS provides us with root and relative values. Root values are like rem and rlh — they’re tied to the values written in the :root selector (the most common one would be the html element). Relative values are like em, lh, ch and various others — they’re tied to the font-size in that specific element….
How to Discover a CSS Trick | CSS-Tricks
Do we invent or discover CSS tricks? Michelangelo described his sculpting process as chiseling away superfluous material to reveal the sculpture hidden inside the marble, and Stephen King says his ideas are pre-existing things he locates and uncovers “like fossils in the ground.” Paragraph one is early for me to get pretentious enough to liken…
CSS Intelligence: Speculating On The Future Of A Smarter Language — Smashing Magazine
CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the if() function. Is it still just for styling, or is it becoming something more? Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the…
CSS Blob Recipes | CSS-Tricks
Blob, Blob, Blob. You hate them. You love them. Personally, as a design illiterate, I like to overuse them… a lot. And when you repeat the same process over and over again, it’s only a question of how much you can optimize it, or in this case, what’s the easiest way to create blobs in…
Lightly Poking at the CSS if() Function in Chrome 137 | CSS-Tricks
We’ve known it for a few weeks now, but the CSS if() function officially shipped in Chrome 137 version. It’s really fast development for a feature that the CSSWG resolved to add less than a year ago. We can typically expect this sort of thing — especially one that is unlike anything we currently have…
CSS Color Functions | CSS-Tricks
If you asked me a few months ago, “What does it take for a website to stand out?” I may have said fancy animations, creative layouts, cool interactions, and maybe just the general aesthetics, without pointing out something in particular. If you ask me now, after working on color for the better part of the…
Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine
In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API….