Cool CSS Variable Tricks To Tryby@shepelev
5,400 reads
5,400 reads

Cool CSS Variable Tricks To Try

by Alexey Shepelev4mJune 1st, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

CSS variables (or custom properties) were originally conceived to store repeating properties, such as color palettes or fonts, in one place. In this article, we will consider several interesting hacks that allow you to use custom properties for what would seem impossible without preprocessors or JS. These hacks include: switch-case for animation, binary logic and calc() function. You can use these tricks to implement lots of things that seemed only seemed possible by the only thing that previously seemed possible without JS.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Cool CSS Variable Tricks To Try
Alexey Shepelev HackerNoon profile picture
Alexey Shepelev

Alexey Shepelev

@shepelev

Senior Ruby on Rails Developer

About @shepelev
LEARN MORE ABOUT @SHEPELEV'S
EXPERTISE AND PLACE ON THE INTERNET.

Share Your Thoughts

About Author

Alexey Shepelev HackerNoon profile picture
Alexey Shepelev@shepelev
Senior Ruby on Rails Developer

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
L O A D I N G
. . . comments & more!