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 through the process of building these demos.
One thing that single div pieces rarely do is animate. If you can transform your div or one of its pseudo elements, that's fair (as Lynn Fisher does with her fantastic BB-8). But you cannot directly change the opacity or transform of the individual "elements" you create inside your div, since they are not actual DOM elements.
I am a big believer of trying something a little different and interesting to learn tools you otherwise might never learn. Working with the constraints of a single div might not be great for production work, but it can be a great exercise (and challenge) to stretch your skills in a fun way. In that spirit, we'll use this technique to explore how Custom Properties (CSS Variables) work and even provide us a path to animation inside our div.
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 to show you the most efficient path towards building a CSS cube that's possible today, while also explaining what common, but less than ideal cube coding patterns you should steer clear of. So let's get started!
CSS has Custom Properties now. We've written about them a bunch lately. Browser support is good, but of course, old non-evergreen browsers like Internet Explorer don't have them and never will. I can see the appeal of authoring with "future CSS", and letting a preprocessor backport it to CSS that is compatible with older browsers. Babel for CSS! Why not?!
It makes me nervous though - because it's only some use cases of Custom Properties that you can preprocess. There are plenty of situations where what you are doing with a Custom Property just isn't possible to preprocesses. So if you do, you're putting yourself in a pretty weird situation.
CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone.
Most of the power comes from two unique abilities of Custom Properties:
Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like calc() .
We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables can do the same things. But, they are more powerful because of how they are live-interpolated. Should their values ever change (e.g. JavaScript, media query hits, etc) the change triggers immediate change on the site.
Cool, right? But still, how actually useful is that? What are the major use cases? I think we're still seeing those shake out.
One use case, it occurred to me, would be theming of a site (think: custom colors for elements around a site). (more…)
CSS Custom Properties give us the ability to reach into a property value and change certain parts of it. That's useful in a bunch of places, but in particular, it's useful in properties which don't allow us to do it any other way.
Dan Wilson documents a classic annoyance with transforms:
button {
transform: translateY(-150%);
}
button:hover {
/* will (perhaps unintentionally) override the original translate */
transform: scale(.8);
}The native (and WET) solution is list the original transform again:
button:hover {
transform: translateY(-150%) scale(.8);
}Dan's trick is to use custom properties instead. Set them all on the element right up front, then re-set them the :hover state:
:root {
--tx: 150%;
--scale: 1;
}
button {
transform:
translateY(var(--tx))
scale(var(--scale));
}
button:hover {
--scale: 0.8;
}Cascading custom properties FTW.
I stumbled into an interesting problem the other day. I wanted to animate an element with a random animation-duration. (more…)