Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Coolest web components using CSS without Javascript

Kodhus >
Web components

Web components

These are some of the coolest web components you can build purely in css.

For viewing them in action please check following 2 links:

1. Step progress bar

Usually you use it for sign up form, shopping cards and any consecutive action in webpage.

See the Pen Step progress bar by ramsich (@ramsich) on CodePen.

2. Vertical timeline

This component is used in notification panels, comment systems, etc. pretty cool one.

See the Pen Vertical timeline by ramsich (@ramsich) on CodePen.

3. Customized checkbox

Replacement for the standard checkbox. Many professional websites use this technique.

See the Pen Customized CSS3 checkbox by ramsich (@ramsich) on CodePen.

4. Toggle Switch CSS3

Usually used in preferences and settings pages setting something on or off.

5. Customized range selector [advanced]

If you want the user to select a range or you want to visualize selecting of an option within a set.

See the Pen advanced customized range selector css3 by ramsich (@ramsich) on CodePen.

6. Responsive menu for admin and dashboard interfaces

This menu is basically the way to make responsive menus that changes when switched to mobile, tablet and desktop. view it at:

Soon I will create a library that provides all of these components in a way that you can include and use them in your projects. If you feel you want some other components and elements please post a comment.

There is always a challenge with writing everything using css because many times you write a css code that is not maintainable. In order to make something that is useful and maintainable enough in terms of changing it anytime, it’s always a good practice to use javascript in conjunction with css.