Open/close a modal window, create mobile navigation, build tab navigation, image gallery slider, and switch & button groups. All with pure CSS, no JS required.
Pretty much 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 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, just add another input checkbox for that.
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.
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 very minimal CSS here and the modal container and the input box must be always together in the same order.
Tab navigation with sliding animation.
How about creating sliding tabs with only CSS? Yes, it is possible here for the first time we use the input radio trick.
Want to add another tab? All you need to do is to add the HTML code and then add another input:nth-of-type(num):checked rule and update container to 400%.
Note: Each tab width should be 100%.
Image gallery with 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 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 and button groups with fading animation.
This one is something you can definitely improve upon. Both the switch and button group are very basic, e.g. you can easily grab the code for the switch and add different states with colors on, off, disabled and read-only.
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 to learn more? Additional information, resources, and snippets can be found on the popular CSS-Tricks website.
‘Til the next one.
* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!