Hi guys I am back with another fantastic project in this project I created a Fading Tab Design using HTML, CSS & JavaScript.
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.
Fading Tab Design
Fading tab design is a type of tab interface that uses a fading animation to transition between tabs. When a user clicks on a tab, the active tab fades out and the inactive tab fades in.
This creates a smooth and visually appealing transition that can be used to improve the usability of a tabbed interface.
Fading tab design can be implemented using a variety of techniques, including CSS, JavaScript, and jQuery.
The simplest way to implement a fading tab design is to use CSS to fade the opacity of the tabs. For example, the following CSS code would fade the opacity of the tabs to 0 when they are not active:
.tab {
opacity: 1;
}
.tab.active {
opacity: 0;
}
About This Project
This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.
| Created by | Coding Pakistan |
| Languages | HTML / CSS / JS |
| Source Code | Available Below |
| Preview | Take Preview |
How to Create a Fading Tab Design
There are some steps to create this type of Fading Tab Design using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files in HTML, CSS, and JavaScript.
- Make sure the HTML file extension is (.html), the CSS file extension is (.css) and the JavaScript file extension is (.js)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
NOTE: I use some profile icon images you can download from Google or replace with your own images.
Fading Tab Design – Source Code
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Card 1</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article class="card">
<header>
<div>
<h2>New Members</h2>
<h4>More than 400 new members</h4>
</div>
<div class="buttons">
<button class="active" onclick="selectList(this, 0)">Month</button>
<button onclick="selectList(this, 1)">Week</button>
<button onclick="selectList(this, 2)">Day</button>
</div>
</header>
<div class="tables">
<table class="active">
<tbody class="active">
<tr>
<td>
<img class="avatar" src="img/001-boy.svg" />
</td>
<td>
<h3>Jeff Davies</h3>
<h4>Art Director</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
<tr>
<td>
<img class="avatar" src="img/047-girl-25.svg" />
</td>
<td>
<h3>Melinda Trump</h3>
<h4>Creative Director</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-0.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
<tr>
<td>
<img class="avatar" src="img/043-boy-18.svg" />
</td>
<td>
<h3>Bo Larsson</h3>
<h4>Chief Designer</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
</tbody>
</table>
<table>
<tbody class="active">
<tr>
<td>
<img class="avatar" src="img/014-girl-7.svg" />
</td>
<td>
<h3>Shannon Drake</h3>
<h4>Copywriter</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
<tr>
<td>
<img class="avatar" src="img/018-girl-9.svg" />
</td>
<td>
<h3>Taylor Drift</h3>
<h4>Art Director</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
<tr>
<td>
<img class="avatar" src="img/001-boy.svg" />
</td>
<td>
<h3>Peter Rose</h3>
<h4>Photographer</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
</tbody>
</table>
<table>
<tbody class="active">
<tr>
<td>
<img class="avatar" src="img/047-girl-25.svg" />
</td>
<td>
<h3>Kate Best</h3>
<h4>Developer</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-0.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
<tr>
<td>
<img class="avatar" src="img/043-boy-18.svg" />
</td>
<td>
<h3>Ben North</h3>
<h4>UX Designer</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
<img src="img/star-0.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
<tr>
<td>
<img class="avatar" src="img/018-girl-9.svg" />
</td>
<td>
<h3>Claire Tait</h3>
<h4>UI Engineer</h4>
</td>
<td>
<h4>Rating</h4>
<div class="stars">
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-1.svg" />
<img src="img/star-0.svg" />
</div>
</td>
<td>
<img class="social" src="img/twitter.svg" />
<img class="social" src="img/facebook.svg" />
</td>
</tr>
</tbody>
</table>
</div>
</article>
<script src="script.js"></script>
</body>
</html>
CSS FILE
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #f5f8fa;
color: #181c32;
font-family: "Euclid Circular A", "Poppins";
}
h2,
h3,
h4 {
margin: 0;
font-weight: 500;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 14px;
}
h4 {
color: #a1a5b7;
font-size: 12px;
}
table {
width: 100%;
}
table tr td {
padding: 10px 0;
}
.card {
padding: 20px;
border-radius: 10px;
background: #ffffff;
width: 400px;
}
.card header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.card header button {
background: transparent;
border: 0;
font-family: inherit;
cursor: pointer;
}
.avatar {
width: 36px;
height: 36px;
}
.stars {
display: flex;
gap: 3px;
}
.stars img {
width: 16px;
height: 16px;
}
.social {
width: 32px;
height: 32px;
vertical-align: middle;
}
.buttons {
display: flex;
}
.buttons button {
display: grid;
place-items: center;
padding: 14px;
border-radius: 6px;
color: #a1a5b7;
}
.buttons button.active {
background: #ecf5fd;
color: #009ef7;
}
.tables {
position: relative;
height: 196px;
}
table {
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
animation: table-out 0.2s both;
}
table tr td:nth-child(2) {
width: 140px;
}
table tr td:last-child {
text-align: right;
}
@keyframes table-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes table-out {
100% {
opacity: 0;
visibility: hidden;
}
}
table.active {
animation: table-in 0.2s 0.2s both;
}
JavaScript FILE
const buttons = document.querySelectorAll(".buttons button");
const tables = document.querySelectorAll(".tables table");
const selectList = (element, index = 0) => {
tables.forEach((table) => table.classList.remove("active"));
tables[index].classList.add("active");
if (element) {
buttons.forEach((button) => button.classList.remove("active"));
element.classList.add("active");
}
};
selectList();
