Pure HTML + CSS Calculator

Let this blow your mind: a functioning calculator done using only HTML and CSS by Lillian Kodi. Leverages the Checkbox Hack and the Space Toggle Trick. Crazy. As you may notice the option to divide is missing. I guess it was omitted because / is a character that might throw the parser off due to …

Dark mode in 5 minutes, with inverted lightness variables

Lea Verou shows a method to implement dark mode, not by swapping entire colors, but by simply changing their lightness The basic idea is to use custom properties for the lightness of colors instead of the entire color. Then, in dark mode, you override these variables with 100% – lightness. This generally produces light colors …

Style Pseudo-elements with Javascript Using Custom Properties

Over at CSS { In Real Life }, author Michelle Barker has detailed a clever way to style pseudo-elements (such as ::before and ::after) through JavaScript. In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. […] Luckily, CSS custom properties can help. 👉 If you set a custom …

The Power of Composition with CSS Custom Properties

Maxime Heckel, while revamping the theme on his blog: I stumbled upon this pattern of composing CSS partial values for my HSLA colors, assign them to variables. Thanks to this, I was able to build my fairly complex theme and a full color palette that made sense for my websites by only using CSS. No …

Make the page count of a 3D book visible using CSS Custom Properties

Michael Scharnagl: I am currently building a book section for this site and thought it would be cool to show the books in 3D and also to make it visible how many pages a book has. In this article I would like to show you how to use CSS custom properties to adapt the thickness …

How to Play and Pause CSS Animations with CSS Custom Properties

Mads Stoumann, writing for CSS-Tricks, starts off with a simple idea: set a Custom Property to either playing or paused to control animation-play-state. [data-animation] { /* … */ animation-play-state: var(–animps, running); } /* Use a checkbox to pause animations */ [data-animation-pause]:checked ~ [data-animation] { –animps: paused; } But one of the listed use cases is …

What values can you put in a CSS Custom Property?

Will Boyd: CSS custom properties can hold all sorts of things. Some of these things were not obvious to me, which is why I decided to write this. In short: they can contain just about everything. It’s only until CSS Custom Properties are used in a certain context as a CSS Variable — using var() …