Another great demo by Ana Tudor. Here’s a pen with the result: See the Pen 🌈 vortex with CSS variables (WebKit-only, no JS) by Ana Tudor (@thebabydino) on CodePen. More videos on her YouTube Channel. Lots of demos on her CodePen page.
Tag Archives: css variables
Mocking Individual CSS Transform Functions using CSS Variables
In CSS we use the transform property to manage an element’s translation, rotation, and scale. As it’s one single combined property for all three possible transformations, setting transform: rotation(90deg); on an element will (re)set the values for translation and scale by falling back to their default values. This will change when the “CSS Transform Module …
Continue reading “Mocking Individual CSS Transform Functions using CSS Variables”
Reactive Animations with CSS Variables
Despite its name, reactive animations have nothing to do with React, the framework/library/whatever it is. Rather, reactive animations can be described in terms of discrete changes caused by any number of events. The overall idea is that JS captures multiple streams of events into a single stream, and emits those values over to CSS, where …
Why You Should Be Excited About Native CSS Variables
With CSS Variables now being under development for Edge (the last of the modern browsers to not support it yet) it’s time to dig up this brilliant post on CSS Variables. If you’re under the impression that CSS Variables offer nothing new when compared to Preprocessor variables, then this post is a must-read for you: …
Continue reading “Why You Should Be Excited About Native CSS Variables”
CSS Variables: var(--subtitle);
As per usual, great talk by Lea Verou: The key takeaway about CSS Custom Properties to me is the very first one Lea mentioned: they’re just properties like the other CSS properties we already know. This means that the normal behavior of inheritance is in place, you can manipulate them from within media queries, and …