I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise: The original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights… I finally had the result below: My version...
Marcin Wichary has written a great piece that dives into how he used CSS Variables to create a night mode and high contrast theme in an app. There’s so many neat tricks about how to use CSS Variables (Chris has also looked at theming) as well as how to organize them (Andras Galante has an interesting take on this) in...
CSS preprocessor variables and CSS custom properties (often referred to as “CSS variables”) can do some of the same things, but are not the same. Practical advice from Mike Riethmuller:If it is alright to use static variables inside components, when should we use custom properties? Converting existing pr...
Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?The...
Cliff Pyles contributed to this post. Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity. Maybe we can fix both issues. I’d like to try to boil design system variables down to two types: Global and Compon...
I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you th...
I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. I thought I should do something to fix this problem, so this article was born. It’s going...
I’d call this a bonafide CSS trick, courtesy Lea Verou. Don’t miss the comments, in which Sérgio Gomes reminds us this might make it easier to change values in JavaScript, because you could skip worrying about prefixes there. Changing CSS variables in JavaScript is already rather appealing, as the changes ...
Recent Comments