We can make variables in CSS pretty easily:
:root {
--scale: 1;
}And we can declare them on any element:…
I was playing this game on Apple Arcade the other day called wurdweb. It’s a fun little game! Little touches like the little shape dudes that walk around the screen (but otherwise don’t do anything) give it a lot …
I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I …
Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid layout holds the “tiles” that go from a filled background color to …
Uh, what’s @property? It’s a new CSS feature! It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we’ve never been able to do before.
While everything about @property is exciting, …
This little trick for gradient borders is super useful:
.border-gradient {
border: 5px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}Here’s some basic demos from our article on the subject. Sephanie Eckles was sharing around the idea …
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 …
Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string. …
The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about!
There is a draft spec and an “intent to ship” document. The code from that document …
