Animating Number Counters
Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for …
Say you have five buttons. Each button is a step. If you click on the fourth button, you’re on step 4 of 5, and you want to display that.
This kind of counting and displaying could be hard-coded, but that’s …
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:
5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title
But the above …
How about a classic CSS trick! This isn’t even so tricky anymore, since CSS has counter-increment
and counter-reset
and such that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy …
In this post, we're going to demonstrate how we can use the source order independence of CSS Grid to solve a layout issue that's the result of a source order constraint. Specifically, we're going to look at checkboxes and CSS Counters—two concepts that rely on source order when used together.
Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be.
<body>
<section></section>
<section></section>
<section></section>
<section></section>
</body>
body {
counter-reset: my-awesome-counter;
}
section {
counter-increment: my-awesome-counter;
}
section:before {
content:
… Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.