Hello Coders
in this article we are making 3D NAVIGATION BAR using HTML CSS AND JS.
DOWNLOAD GIVEN BELOW
HTML CSS CODE
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Creative Menu Item Hover</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap"
rel="stylesheet"><link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>
body {
display: flex;
min-height: 100px;
font-family: "Poppins", sans-serif;
color: #ffffff;
background-color: #212121;
}
.navigation {
margin: 100px;
padding: 100px;
list-style: none;
height:50px;
width:100px;
display:flex;
}
.navigation__link {
position: relative;
display: block;
font-weight: 900;
font-size: 5rem;
line-height: 1.5;
text-decoration: none;
color: transparent;
-webkit-text-stroke: 1px #ffffff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.navigation__link:hover {
color: #ffffff;
-webkit-text-stroke: 1px #212121;
transition: 0.25s;
}
.navigation__link:hover::before {
transform: translate(12px, -12px);
color: #ff1744;
-webkit-text-stroke: 1px #212121;
}
.navigation__link:hover::after {
transform: translate(24px, -24px);
color: #4dd0e1;
-webkit-text-stroke: 1px #212121;
}
.navigation__link::before, .navigation__link::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: 0.5s;
-webkit-text-stroke: 1px transparent;
}
.navigation__item{
padding:10px;
font-size:3px;
}
.navigation__item .navigation__link{
font-size:50px;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="navigation">
<li class="navigation__item">
<a class="navigation__link" href="#" data-text="Home">Home</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#" data-text="About">About</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#" data-text="Portfolio">Portfolio</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#" data-text="Team">Team</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#" data-text="Contact">Contact</a>
</li>
</ul>
<!-- partial -->
</body>
</html>
Tags
HTML CSS