In this tutorial, we will create an animated tab bar using HTML and CSS. This tab bar will feature smooth transitions and interactive elements, providing an engaging user experience. Let's dive into the code and understand each step in detail. This tutorial is part of the #100DaysOfCode challenge, encouraging you to code consistently and improve your skills day by day.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Linking external CSS file -->
<link rel="stylesheet" href="style.css">
<title>Animated Tab Bar</title>
</head>
<body>
<!-- Tab bar container -->
<div class="phone">
<!-- Radio inputs for tab selection -->
<input type="radio" name="s" id="social-1">
<input type="radio" name="s" id="social-2" checked="checked">
<input type="radio" name="s" id="social-3">
<!-- Labels for tab icons -->
<label for="social-1"><img src="image/instagram.svg" alt=""></label>
<label for="social-2"><img src="image/twitter.svg" alt=""></label>
<label for="social-3"><img src="image/github.svg" alt=""></label>
<!-- Circle element for highlighting selected tab -->
<div class="circle"></div>
<!-- Container for tab content -->
<div class="phone_content">
<!-- Bottom section of the phone, where the tab indicator is placed -->
<div class="phone_bottom">
<!-- Indicator for the selected tab -->
<span class="indicator"></span>
</div>
</div>
</div>
</body>
</html>
CSS Styling
Let's break down the CSS styles applied to our HTML elements.
Reset and Page Styles
/* Reset default margin, padding, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style for the entire page */
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
overflow: hidden;
}
This code ensures that there's no default margin or padding applied, and all elements are box-sizing border-box. The body is set to full width and height with flexbox properties for centering horizontally and vertically. The overflow is hidden to prevent scrollbars from appearing.
Phone Container Styling
/* Style for the phone container */
.phone {
width: 320px;
height: 260px;
margin: auto;
display: flex;
align-items: flex-end;
position: relative;
justify-content: center;
}
The phone container is styled to have a fixed width and height, aligned at the center of the page. Flexbox is used to align items at the bottom.
Tab Bar Styling
/* Style for the phone content */
.phone_content {
filter: contrast(20);
width: 100%;
background-color: #fff;
overflow: hidden;
position: absolute;
}
This code applies contrast to the phone content, sets it to full width, and positions it absolutely within the phone container.
Label and Indicator Styling
/* Style for clickable labels */
label {
cursor: pointer;
display: flex;
z-index: 2;
width: 33%;
height: 66px;
position: relative;
align-items: center;
justify-content: center;
}
/* Style for indicator */
.indicator {
width: 70px;
height: 70px;
background-image: linear-gradient(0deg, #f7b0b0, rgba(183, 255, 154, 0)), linear-gradient(0deg, rgba(158, 255, 151, 0.75), rgba(183, 255, 154, 0)), linear-gradient(0deg, #b4fffb, rgba(183, 255, 154, 0));
background-position: cover;
background-position: 0 10px;
border-radius: 50%;
position: absolute;
left: 0;
top: -42px;
right: 0;
margin: auto;
transition: 200ms cubic-bezier(0.14, -0.08, 0.74, 1.4);
}
Labels are styled as clickable elements with centered content. The indicator is a circular element positioned above the labels to highlight the selected tab. It utilizes a gradient background and transitions for smooth animation.
Tab Switching Styling
/* CSS rules for different social checkboxes checked states */
#social-1:checked~[for="social-1"]>img {
top: -85px;
}
#social-1:checked~.circle,
#social-1:checked~div div .indicator {
left: -66%;
}
#social-2:checked~[for="social-2"]>img {
top: -85px;
}
#social-2:checked~.circle,
#social-2:checked~div div .indicator {
left: 0;
}
#social-3:checked~[for="social-3"]>img {
top: -85px;
}
#social-3:checked~.circle,
#social-3:checked~div div .indicator {
left: 66%;
}
These CSS rules control the appearance of the tab icons and the indicator based on the selected radio button. When a radio button is checked, it adjusts the position of the corresponding icon and the indicator, creating a smooth transition effect.
Conclusion
By following this step-by-step guide, you've learned how to create an animated tab bar using HTML and CSS. This tab bar enhances user interaction and adds visual appeal to your web page. Feel free to customize the styles and add more tabs to suit your project's requirements.
Remember, this tutorial is part of the #100DaysOfCode challenge, encouraging consistent coding practice to enhance your skills.
For more web development tips and tutorials, follow me on Twitter. You can also download the complete source code from here.
Happy coding! 🚀