CSS is becoming more and more powerful. Static CSS animations of course have been around for a long time, but nowadays, on modern browsers at least, you can even implement certain scroll-based animations with pure CSS. But CSS has also been used for a long time for implementing other interactive features that normally require JavaScript. This is not a new technique; there are already tons of examples of implementing tabbed content, sandwich menus and so on using the "checkbox trick". Here I'll show some variations on those two I mentioned, plus a few more interesting examples of CSS-only interactivity. I've also made the examples as compatible as possible with old browsers.

Feb 24, 2025 - 14:00
 0

CSS is becoming more and more powerful. Static CSS animations of course have been around for a long time, but nowadays, on modern browsers at least, you can even implement certain scroll-based animations with pure CSS.

But CSS has also been used for a long time for implementing other interactive features that normally require JavaScript. This is not a new technique; there are already tons of examples of implementing tabbed content, sandwich menus and so on using the "checkbox trick".

Here I'll show some variations on those two I mentioned, plus a few more interesting examples of CSS-only interactivity.

I've also made the examples as compatible as possible with old browsers.