In the world of web design, the navigation bar is a pivotal element that guides users through the journey of a website. It’s not just a functional component; it’s also a design statement. With the evolution of web technologies, particularly HTML and CSS, designers now have the tools to create more dynamic and visually appealing navigation bars. One such innovation is the 3D navigation bar, which can add depth and a modern touch to your website.
Before diving into the 3D aspect, it’s essential to grasp the basics of HTML and CSS for navigation bars. HTML (HyperText Markup Language) is the backbone, providing the structure with elements like <nav> or <ul> and <li> to define the navigation links. CSS (Cascading Style Sheets) then styles these elements, determining their color, size, position, and more.
To elevate a standard navigation bar into the third dimension, CSS transformations are employed. These transformations allow elements to be rotated, scaled, and moved in a 3D space. The transform property is particularly useful, with functions like rotateX(), rotateY(), and translateZ() enabling the creation of 3D effects.
A 3D navigation bar can be a fantastic addition to your website, offering a unique visual appeal and enhancing the overall user experience. With HTML and CSS, you can experiment with various 3D transformations to create a navigation bar that stands out. Remember to keep user accessibility in mind, and you’ll have a navigation bar that’s both beautiful and functional.
HTML
<!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">
<link rel="stylesheet" href="style.css">
<title>Navbar menus</title>
</head>
<body>
<ul>
<li style="--i:6;"><a href="">Home</a></li>
<li style="--i:5;"><a href="">About</a></li>
<li style="--i:4;"><a href="">Services</a></li>
<li style="--i:3;"><a href="">Portfollio</a></li>
<li style="--i:2;"><a href="">Our Team</a></li>
<li style="--i:1;"><a href="">Contact</a></li>
</ul>
</body>
</html>
CSS
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
*{
margin: 0;
font-family: 'Oswald', sans-serif;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #7d7d7d;
}
ul{
position: relative;
transform: skewY(-15deg);
}
ul li{
position: relative;
list-style: none;
width: 200px;
background-color: #3e3f46;
padding: 15px;
z-index: var(--i);
transition: 0.5s;
}
ul li:hover{
background-color: #33a3ee;
transform: translateX(-50px);
}
ul li::before{
content: '';
position: absolute;
top: 0;
left: -40px;
width: 40px;
height: 100%;
background-color: #2e3133;
transform-origin: right;
transform: skewY(45deg);
transition: 0.5s;
}
ul li:hover::before{
background-color: #1f5378;
}
ul li::after{
content: '';
position: absolute;
top: -40px;
left: 0;
width: 100%;
height: 40px;
background-color: #35383e;
transform-origin: bottom;
transform: skewX(45deg);
transition: 0.5s;
}
ul li:hover::after{
background-color: #2982b9;
}
ul li a{
text-decoration: none;
color: #999;
display: block;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: 0.5s;
}
ul li:hover a{
color: #ddd;
}
ul li:last-child::after{
box-shadow: -120px 120px 20px rgba(0, 0, 0, 50%);
}
For More Tutorials Please Click Here
