How to create a 3D bar using HTML and CSS
In this blog post, I will show you how to create a 3D bar using HTML and CSS. A 3D bar is a type of bar that displays in three dimensions, giving a sense of depth and perspective. It can be useful for visualizing trends, comparisons, or proportions of different categories.
To create a 3D bar , we will need to use some basic HTML elements, such as divs and spans, and apply some CSS properties, such as transform, perspective, and box-shadow. We will also use some pseudo-elements, such as ::before and ::after, to create the sides and the top of the bars.
The basic idea is to create a container element that will hold the bars, and give it a perspective property to create the 3D effect. Then, for each bar, we will create a div element that will represent the front face of the bar, and give it a height and a width according to the data value.
We will also create two pseudo-elements for each bar, one for the right side and one for the top, and give them the same height and width as the front face. We will then use the transform property to rotate and position them accordingly. Finally, we will add some box-shadow to create some shadows and highlights on the bars.
Here is an example of the HTML structure for a 3D bar with four bars:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>3D bar using HTML and CSS </title>
</head>
<body>
<ul>
<li class="list-item"><a href="#"><i class="fas fa-qrcode"></i></a></li>
<li class="list-item"><a href="#"><i class="fas fa-link"></i></a></li>
<li class="list-item"><a href="#"><i class="fas fa-eye"></i></a></li>
<li class="list-item"><a href="#"><i class="fas fa-question-circle"></i></a></li>
<li class="list-item"><a href="#"><i class="fas fa-cog"></i></a></li>
<li class="list-item"><a href="#"><i class="fas fa-phone"></i></a></li>
<li class="list-item"><a href="#"><i class="fas fa-user"></i></a></li>
</ul>
</body>
</html>
CSS
body {
background: url(img.jpg);
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
}
ul {
position: relative;
transform: rotate(-35deg) skew(20deg, 5deg);
}
.list-item {
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(39,167,243,1) 35%, rgba(0,212,255,1) 100%);;
color: #fff;
text-align: center;
height: 2.5em;
width: 4em;
vertical-align: middle;
line-height: 2.5em;
border-bottom: 1px solid #060606;
position: relative;
display: block;
text-decoration: none;
box-shadow: -2em 1.5em 0 #333;
transition: all 0.25s linear;
}
.list-item a{
color: #fff;
}
.list-item:hover {
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,110,66,1) 35%, rgba(0,212,255,1) 100%);
color: #fffcfb;
transform: translate(0.9em, -0.9em);
transition: all 0.25s linear;
box-shadow: -2em 2em 0 #333;
}
.list-item:hover:before, .list-item:hover:after {
transition: all 0.25s linear;
}
.list-item:hover:before {
background: #b65234;
width: 1em;
top: 0.5em;
left: -1em;
}
.list-item:hover:after {
background: #b65234;
width: 1em;
bottom: -2.5em;
left: 1em;
height: 4em;
}
.list-item:before, .list-item:after {
content: '';
position: absolute;
transition: all 0.25s linear;
width: 0.5em;
}
.list-item:after {
height: 4em;
background: #181818;
bottom: -2.25em;
left: 1.5em;
transform: rotate(90deg) skew(0, 45deg);
}
.list-item:before {
height: 2.5em;
background: #121212;
top: 0.25em;
left: -0.5em;
transform: skewY(-45deg);
}
For More Tutorials Please Click Here
