Interesting: a CSS library that only provides you with CSS Custom Properties to use in your own CSS: Pollen is a library of CSS variables for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems. Heavily inspired by TailwindCSS. Pollen →
Tag Archives: custom properties
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 …
Continue reading “Dark mode in 5 minutes, with inverted lightness variables”
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 …
Continue reading “Style Pseudo-elements with Javascript Using Custom Properties”
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 …
Continue reading “The Power of Composition with CSS Custom Properties”
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 …
Continue reading “Make the page count of a 3D book visible using CSS Custom Properties”
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 …
Continue reading “How to Play and Pause CSS Animations with CSS Custom Properties”
The future of CSS: Higher Level Custom Properties to control multiple declarations
“Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it’s worth having a look already as they’re really exciting.
Injecting a JavaScript Attack Vector using CSS Custom Properties
As the syntax for CSS Custom Properties is overly permissive it’s possible to store a JavaScript attack vector in them …
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() …
Continue reading “What values can you put in a CSS Custom Property?”