Let me share with you five popular web page components with the same effect and functionality by using only pure CSS, without any JavaScript.
The same approach is used for all five modules, where we use the input checkbox/radio to switch between different states.
You will learn how to open/close a modal window, create mobile navigation, build tab navigation, image gallery slider, and switch & button groups.
All done with only CSS.
I tried to apply as little additional styling as possible, so you can easily grab the code to modify it and use it within your project.
Mobile Navigation
Mobile navigation with fading animation.
This is very basic and can be improved quite a bit. For example, you can use the same approach to change the hamburger icon is x and add another input checkbox.
Note: See how I did that for the mobile nav on this site.
However, no need to have any JS to create this mobile navigation.
Modal Window
Open and close a Modal window with fading animation.
How about creating a modal window with the CSS? Yes, this is possible as well. Check out the example below, there is very minimal CSS here, and the modal container and the input box must always be together in the same order.
Tabs
Tab navigation with a sliding animation.
How about creating sliding tabs with only CSS? Yes, it is possible here to use the input radio trick for the first time.
Want to add another tab? All you need to do is add the HTML code and add another input:nth-of-type(num): checked rule and update container to 400%.
Note: Each tab-width should be 100%.
Image Gallery
Image gallery with a sliding animation.
Extending the above method for tabs, we can easily create an Image Gallery module with pure CSS. Code is pretty much the same as the Tabs, and the only difference is that the radios and the labels are separated.
Note: Input radios must always be above the main container. If you want to have your tabs below the container, you can use the same approach as the image gallery example, just split the inputs and labels.
Switch & Button Group
Switch and button groups with fading animation.
This one is something you can definitely improve upon. Both the switch and button group are fundamental, e.g., you can easily grab the code for the switch and add different states with colors on, off, disabled and read-only.
I hope this was useful for you. As I mentioned, you can be creative and extend each of the examples above as much as you would like.
If you know another module/component using the same technique, please share it with others in the comment section below.
What’s Next?
What to learn more? Additional information, resources, and snippets can be found on the popular CSS-Tricks website.
‘Til the next one.