5 Popular Web Page Components Done with Pure CSS

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.



Let me share with you five popular web page modules/components where you can have the same effect and functionality by using only pure CSS, without any JavaScript.

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

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.

Modal Window

Open and close a Modal window with fading animation.

Subscribe to our Newsletter* if you find our content useful and would like to receive regular updates with the latest posts.

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.

Tabs

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

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 & 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 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’s Next?

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!

Related Content

Add a Monitor to CSS Files Generated from SASS in Sublime Text 3 + SFTP

How to add a monitor to dynamically updated file with Sublime Text 3 and SFTP package.

READ MORE...

5 SASS Mixins for Your Next Project

Use these SASS mixins to generate and create some utility classes for your next project.

READ MORE...

2 Methods to Quickly Add Any SVG to Gutenberg Editor

Learn how to add SVG icons to the Gutenberg editor.

READ MORE...

Leave a Reply

Your email address will not be published. Required fields are marked *

5 SASS Mixins for Your Next Project
Hiding Advanced Custom Fields

Thank you for reading our content. Use the buttons below to spread the love and share 2 Methods to Quickly Add Any SVG to Gutenberg Editor with your followers.