Membuat Desain UI Skills Bar menggunakan HTML & CSS
www.jejaknesia.com - Selamat datang kembali, Web Developer! Dalam artikel Jejaknesia kali ini, kami akan memandu Anda secara mendalam tentang cara menciptakan Desain UI Skills Bar yang menarik dan fungsional hanya dengan menggunakan HTML dan CSS.
Desain UI Skills Bar merupakan elemen penting yang sering Anda temukan di berbagai portofolio online atau situs web pribadi. Fungsinya adalah untuk merepresentasikan tingkat kemampuan atau keahlian seseorang secara visual dan mudah dipahami.
Kami akan menunjukkan langkah demi langkah bagaimana membangun UI Skills Bar yang responsif dan memiliki tampilan yang profesional. Yang menarik, Anda tidak memerlukan JavaScript sama sekali untuk mencapai desain ini. Artikel ini sangat cocok bagi Anda yang ingin meningkatkan tampilan portofolio atau situs web pribadi Anda dengan elemen visual yang interaktif dan informatif.
Desain UI Skills Bar menggunakan HTML & CSS
Tingkatkan daya tarik portofolio Anda dan berikan gambaran instan mengenai keahlian Anda kepada pengunjung dengan desain UI Skills Bar yang menarik. Panduan ini akan berfokus pada implementasi menggunakan HTML dan CSS murni, tanpa memerlukan JavaScript, untuk menciptakan efek visual yang memukau dan informatif.
Sebelum memulai, pastikan Anda telah menyiapkan struktur dasar HTML yang rapi dan memiliki pemahaman yang kuat mengenai properti CSS. Mari kita mulai proses koding!
Membuat Struktur HTML
Langkah pertama adalah membuat struktur HTML yang akan digunakan untuk UI Skills Bar. Kita akan menggunakan elemen-elemen semantik HTML untuk memastikan aksesibilitas dan SEO yang baik, berikut adalah kodenya.
<!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>Menambahkan Gaya dengan CSS
Selanjutnya, kami akan fokus pada penerapan gaya menggunakan CSS untuk menciptakan tampilan UI Skills Bar yang menarik dan interaktif. Kami akan memanfaatkan kombinasi warna yang harmonis, efek shadow yang halus, dan animasi yang dinamis untuk memberikan penekanan visual yang kuat.
Penting untuk memastikan bahwa desain ini responsif dan dapat diakses dengan baik di berbagai perangkat. Oleh karena itu, kami akan secara khusus menerapkan media queries guna menjamin tampilan yang optimal, baik pada perangkat desktop maupun mobile.
@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%";
}Simpan project Anda dan lihat hasilnya
Dengan mengikuti panduan dalam artikel ini, Anda dapat membuat desain UI Skills Bar yang menarik secara visual dan fungsional tanpa ketergantungan pada JavaScript. Manfaatkan potensi penuh HTML dan CSS secara optimal untuk meningkatkan daya tarik portofolio Anda dan memberikan pengalaman pengguna yang luar biasa bagi pengunjung situs web Anda.
Kami harap panduan ini bermanfaat. Terima kasih atas kunjungan Anda!
Posting Komentar