From the autor of this website: Don't miss this!Visit www.kodhus.com for the best tutorials on howtos on web design and development.

Web components that can be built purely using css, NO Javascript

Kodhus >
By Ramsich
Kodhus technical writer
by ramsich
Web components that can be built purely using css, NO Javascript

In this series, my aim has been to introduce and teach some of the cooler and more useful web components using css-css3 techniques without the use of javascript. My goal is to make a free UI kit out of these components that you can use in your projects. So, stay tuned!

1. Step progress bar

This is one of the useful components that is used usually in multi-step sign up forms and any use-case that needs a consecutive progressive flow to be shown to the user.

step progress bar

CSS techniques used

  • Pseudo-elements :before :after
  • “+” selector
  • css counter

Following is the tutorial on how to make this.

Demo: http://fbfriends.nailfashionsweden.se/default.html

code: https://gist.github.com/Raminsiach/e3410c75b496578ec3a0

2. Notification panel with vertical Timeline

This component is a very nice component used in timelines. Google uses it when people comment or ask questions in its forums and it’s used in many notification panels.

vertical timeline

CSS techniques used

  • Pseudo-elements :before :after

Following is how you can make it yourself.

Demo: Click on the bell icon on top right corner: http://fbfriends.nailfashionsweden.se/default.html

code: https://gist.github.com/Raminsiach/3e59c3c8e50a6ba13825

3. Customized html Checkbox

Standard checkboxes are a bit ugly and a lot of new websites use the customized version. This tutorial is particularly nice because it talks about a couple of css3 tricks like transforms, pseudo-elements and sibling selector in greater detail.

Custom css3 checkbox

CSS techniques used

  • Pseudo elements :before :checked
  • transform
  • “+” selector

Following is the tutorial on how to make this.

Demo: Login to Facebook using the Facebook button in the page and go to next step: http://fbfriends.nailfashionsweden.se/default.html

code: https://gist.github.com/Raminsiach/69011f1f751fb0c43f66

4. Advanced Toggle Switch

This is one of the coolest elements that I have seen so far. It has been used in many good UI and good looking websites and now part of Angular material design library which is useful for setting a config or a setting on/off.

Toggle Switch

CSS techniques used

  • Pseudo-elements :before :after
  • “+” selector
  • transition

Following is the tutorial on how to make this.

Demo: Click on the gear icon on top right corner: http://fbfriends.nailfashionsweden.se/default.html

code: https://gist.github.com/Raminsiach/e66de1d8196cfab58d3c

5. Customized range selector

This component is usually used for any sort of range selector. The cool thing about this tutorial is that It talks about some of the good parts of pseudo-elements and webkit-appearance.

Range slider

CSS techniques used

  • Pseudo elements :before :after :nth-child(n)
  • transition
  • “+” selector
  • css counter
  • appearance, -webkit-appearance
  • input::-webkit-slider-thumb

Following is how you can make it yourself.

Demo: Click on the gear icon on top right corner: http://fbfriends.nailfashionsweden.se/default.html

code: https://gist.github.com/Raminsiach/8473df8b75e77ad01a86

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>