Skip to content
  • Home
  • Contact
  • COVID
  • My Portfolio
Sonahang RaiPersonal Website and Blogs
  • Home
  • Contact
  • COVID
  • My Portfolio
Skill Bar
Web Design Tutorials

CSS Skill Bar Webdesign (Neumorphic Design)

On April 15, 2020 by Sonahang Rai

A skill bar is one of the most significant part of the UI design. We can see it in lots of websites mainly are the personal website or the company websites. The skill bar is a very easy way to inform the user about some value. It is one of the significant way to tell the viewers about their skills in a percentage.

Skill Bar

A Skill Bar

In this blog today I am going to help you make these type of skill bar. So lets get started to our tutorial and get ready with your code editor opened.

First and the foremost thing is always to include all the necessary tags for HTML. If you use VsCode then its very easy and you need not waste time writing them manually. We can easily use the code snippet and get them automatically. First lets create our html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Skil Bar</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">
        <h3 class="title">HTML</h3>
        <div class="bar" id="html"></div>
      </div>
      <div class="box">
        <h3 class="title">CSS</h3>
        <div class="bar" id="css"></div>
      </div>
      <div class="box">
        <h3 class="title">Javascript</h3>
        <div class="bar" id="js"></div>
      </div>
    </div>
  </body>
</html>

My html look like these. I have made a container div inside which I have three box for the bars. Inside the box
I made h3 for heading of the skill and then a bar div with different id name. I have given them different id so
that we can give different styling for them. We will give different width from these id so that we will have
different valued bars.
Now lets move on to our css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(145deg, #fa6565, #d35555);
  font-family: sans-serif;
  color: #fff;
  overflow: hidden;
}
.bar {
  border-radius: 50px;
  background: linear-gradient(145deg, #fa6565, #d35555);
  box-shadow: 5px 5px 10px #c75050, -5px -5px 10px #ff6c6c,
    inset 5px 5px 10px #c75050, inset -5px -5px 10px #ff6c6c;
  width: 100%;
  height: 26px;
  position: relative;
}
.box {
  width: 600px;
  height: 68px;
}
.bar:before {
  position: absolute;
  content: "";
  left: 6px;
  top: 5px;
  background: #fff;
  height: 54%;
  border-radius: 55px;
}
#html:before {
  width: 90%;
}
#css:before {
  width: 80%;
}
#js:before {
  width: 70%;
}

You can easily understand my stylings here. I have played with the box-shadow and the linear gradient in order to achieve the neumorphic look. You can get the online generator for the neumorphism look here.

Finally we create our own skill bar. If you are confused please feel free to contact me or comment here. You can also watch my tutorial video.

Tags: css, html5

Leave a Reply Cancel reply

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

CAPTCHA


Archives

  • November 2021
  • August 2021
  • April 2021
  • March 2021
  • August 2020
  • July 2020
  • April 2020

Calendar

May 2022
S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031  
« Nov    

Categories

  • Javascript
  • Next
  • React
  • SEO
  • Web Design (Slicing)
  • Web Design Tutorials
  • Wordpress

Copyright Sonahang Rai 2022 | Theme by ThemeinProgress | Proudly powered by WordPress