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

Comments ( 28 )

  1. ReplyDizzy Zane
    Don't make your live demo require feces book. Please. I won't touch it.
    • Replyramsich

      It was my mistake. I removed it though yesterday. Enjoy :)

  2. ReplyMichael
    really cool! for the custom checkbox it would be nice to activate/deactivate the checkbox by clicking also on the text. Is it possible with css only?
    • Replyramsich

      Hi thanks. Yes. I will soon create a sample code and notify you.

    • ReplyJames
      You could just wrap your input and text in a label
  3. ReplyTim Richie
    Awesome work! just awesome!
    • Replyramsich

      Thank you very much :)

  4. ReplyAnonymous Coward
    All of your videos seem to require flash. Why go to the trouble of avoiding javascript when you have flash videos embedded in your site? Ugh.
    • Replyramsich

      I dont think I have used flash. Its because of youtube :)

  5. ReplySteven
    Thanks for the code snippets! Also: You've got a a few spambots commenting on here, so you may want to get a WordPress spam filter plugin such as Akismet. Specifically, comments where the person says your content is great/bad but don't reference what that comment is. Those users will usually have a link embedded in their profile name. As you start to publish more content the spambots will start to come here more, so it's good to get it done before you're inundated with spam.
    • Replyramsich

      Thank you. I removed those comments. Really thankful for you headsup

  6. ReplyStu
    Great ideas - thanks!
  7. ReplyFrancis Kim
    Some of the stuff done in pure CSS, on CodePen is just amazing. Your list is pretty awesome too - thanks :)
  8. ReplyJoseph Rex
    Just yesterday I was re-implementing a design from another website. It was nicely done but a lot that could be done in plain CSS were done in JS. These are some great samples. The solution is that people need to start trusting CSS3 abilities more and relying less on JS. Styling pattern also matters a lot. Using BEM in Sass nested formats makes it so clear when I'm achieving such in my stylesheet
    • Replyramsich

      Absolutely. But the important thing is to make sure the CSS code is maintainable on the long run.

  9. ReplyPhil
    Great idea - great post. Butu I'm also interested in how you coded yout title to hyphenate conditionally on the width of the column.... would love to know how you do that!
    • ReplyJonathan
      hyphens: auto;
  10. ReplyKarthikeyan A K
    Wow, excellent man! Thanks for sharing. Wish you could share more of your ideas.
    • Replyramsich

      Subscribe to my video channel: https://www.youtube.com/playlist?list=PLRCvSNiMyEmyBsu6nGxB5LtMdAltgNDX5

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>