Creating a UI Skills Bar Design Using HTML & CSS
Jejaknesia.com - Welcome back, Web Developer! In this Jejaknesia article, we will guide you in-depth on how to create an engaging and functional UI Skills Bar Design using only HTML and CSS.
UI Skills Bar Design is an essential element that you often find in various online portfolios or personal websites. Its function is to visually represent the level of ability or someone’s skills in a clear and easy-to-understand way.
We will show you step by step how to build a responsive UI Skills Bar with a professional appearance. Interestingly, you don’t need JavaScript at all to achieve this design. This article is perfect for those who want to enhance their portfolio or personal website with an interactive and informative visual element.
UI Skills Bar Design using HTML & CSS
Enhance the appeal of your portfolio and provide visitors with an instant overview of your expertise through an attractive UI Skills Bar design. This guide focuses on implementation using pure HTML and CSS, without JavaScript, to create a visually stunning and informative effect.
Before starting, make sure you have prepared a clean HTML structure and have a strong understanding of CSS properties. Let’s start coding!
Creating the HTML Structure
The first step is to create the HTML structure used for the UI Skills Bar. We will use semantic HTML elements to ensure good accessibility and SEO. Here’s the code:
<!DOCTYPE html>
<!-- Created By jejaknesia.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skills Bar | jejaknesia.com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="skill-bars">
<div class="bar">
<div class="info">
<span>HTML</span>
</div>
<div class="progress-line html">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>CSS</span>
</div>
<div class="progress-line css">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>JavaScript</span>
</div>
<div class="progress-line javascript">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>Microsoft Office</span>
</div>
<div class="progress-line microsoft">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>Adobe</span>
</div>
<div class="progress-line adobe">
<span></span>
</div>
</div>
</div>
</body>
</html>Adding Styles with CSS
Next, we will focus on applying styles using CSS to create an attractive and interactive UI Skills Bar appearance. We’ll use a combination of harmonious colors, soft shadow effects, and dynamic animations to provide strong visual emphasis.
It’s important to ensure that this design is responsive and accessible across different devices. Therefore, we will specifically apply media queries to ensure optimal display on both desktop and mobile devices.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #fff;
}
::selection{
color: #fff;
background: #6594ee;
}
.skill-bars{
padding: 25px 30px;
width: 600px;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
@media screen and (max-width: 768px) {
.skill-bars {
width: 300px;
}
}
@media screen and (max-width: 480px) {
.skill-bars {
}
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
@keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: #6594ee;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span{
width: 90%;
}
.bar .progress-line.css span{
width: 60%;
}
.bar .progress-line.javascript span{
width: 85%;
}
.bar .progress-line.microsoft span{
width: 90%;
}
.bar .progress-line.adobe span{
width: 75%;
}
.progress-line span::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #37507e;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #37507e;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span::after{
content: "90%";
}
.progress-line.css span::after{
content: "60%";
}
.progress-line.javascript span::after{
content: "85%";
}
.progress-line.microsoft span::after{
content: "90%";
}
.progress-line.adobe span::after{
content: "75%";
}Save your project and view the result
By following the guide in this article, you can create a visually appealing and functional UI Skills Bar design without relying on JavaScript. Make the most of HTML and CSS to enhance the appeal of your portfolio and provide an excellent user experience for your website visitors.
We hope this guide is useful. Thank you for visiting!
Post a Comment