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. 🦖🦖 No scroll snapping, not even using :has selector! Instead, relying on good old sibling selectors.
Image slider
- âš¡ Add as many images as you want, same CSS
- 🦖 Works on all browsers
How it works
This slider uses images that are overlayed on top of each other with the "upcoming" ones being translated to the right, out of view. In between each image there's a checkbox. Checkboxes that are ticked are displayed on the left hand side, and unchecked ones on the right. Of course they are invisible and their respective labels are styled as arrows and overlayed on top.
All images associated with a ticked checkbox are in-view, and all the other ones are out of view. The trick here is to use a flat structure with each checkbox and image following one another, so that you can find images corresponding to unchecked ones using the sibling selector ~ alone, and so that you don't have to hard code the number of images and rely on :nth-child pseudo-selector.
Carousel
- 😎 Auto-slides overflowed ones into view
- 🦖 Works on all browsers
How it works
This carousel slider has items that can be focused. If the slides don't fit on the page, their wrapping element will be automatically translated so that the current slide is in view.
It relies on tabindex and the :focus pseudo-selector to make each slide (in this case a simple image) focusable (using click or TAB). The CSS uses media queries and some trickery to calculate the width and transforms for the slider container. The downside is that you need to partly hardcode the number of slides in by providing selectors for each possible number of slides. You can do super easily with SCSS and loop until some very large number (it doesn't need to equal the number of slides, just be >= to that number). But here I've kept it simple and manually laid those out for up to 10 slides.
Page tabs
- The good old one, here for completeness
- 🦖 Works on all browsers
How it works
Similar to the slider, but using radio buttons instead of checkboxes
Valid input animation
- 🙃 Just for fun! Or an idea for something more interesting...
- 🦖 Works on all browsers
How it works
There are several inputs each one having a pattern and required attributes in order to enable the use of the :valid pseudo-selector.
It lays the inputs out in a grid. The grid has a "ghost" column and a "ghost" row using some dummy line elements to create spacing around the inputs. Then relying only on sibling selectors (+ and ~) we add a state where all 8 inputs are valid and then shrink the ghost lines to bring all inputs together.
Sandwich menu (auto-closing)
- 🦄 Auto-closes on clicking outside
- 🦖 Works on all browsers
How it works
The well known checkbox trick here as well: have a checkbox and a label overlayed on top and styles as the menu button. The menu content is a direct sibling of it (again, in order to avoid using :has). When the check is ticked, the menu is brought into view, otherwise translated out of view. The addition here compared to the standard examples is a second label for the same checkbox that acts as the page overlay so that clicking either the close button (the first label) or the second label, closes the menu.
Thanks for reading!
Thank you for reading, like if you like. And be happy 🌞
Top comments (0)