Creating a 3D website header with HTML and CSS can help your website stand out and provide a visually engaging experience for your users. A fully-responsive header is also important, as it ensures that your website looks great on all devices, from desktop computers to mobile phones.
To create a 3D website header, you can use a combination of HTML and CSS. One approach is to use CSS 3D transforms to create the illusion of depth and perspective. This involves using the transform property to rotate elements in three dimensions, along with other CSS properties such as perspective and translateZ to create the desired effect.
To make the header fully-responsive, you will need to use CSS media queries to adjust the layout and styling of the header based on the size of the user's screen. This could include adjusting the font size, image size, and layout of the header to ensure that it looks great on all devices.
In addition to the 3D effect, you can also add other design elements to the header, such as a navigation menu or a search bar. These can be styled using CSS to complement the 3D effect and create a cohesive visual design for the header.
It is important to test the header on multiple devices and screen sizes to ensure that it is fully-responsive and looks great on all platforms. You can use tools such as the Chrome DevTools or the Firefox Responsive Design Mode to test your website on different devices and screen sizes.
Overall, creating a 3D website header with HTML and CSS requires a balance of creativity, design, and technical skill. With the right tools and techniques, you can create a visually stunning and fully-responsive header that enhances the user experience and makes your website stand out.
HTML CODE
<div class="container">
<div class="navbar">
<div class="menu">
<h3 class="logo">BALVINDER<span>KUMAR</span></h3>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</div>
</div>
<div class="main-container">
<div class="main">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">Coding Solution Point</h2>
<p>
We welcome you to our YouTube channel ‘Coding Solution Point’, we will solve the
coding on this YouTube channel and explain the code, as well as provide you the
source code of coding, so that the viewer of our video will face any kind of pro
blem. Do not have to do this on our YouTube channel ‘Coding Solution Point’ will
get all kinds of contact for coding business, if still there is any problem then
contact us.If you like our YouTube channel and according to you the contact is
good, then like our every video and subscribe to YouTube, as well as share our
channel, Thank you! For visiting our ‘Coding Solution Point’ YouTube channel.
</p>
<button class="btn">Read more</button>
</div>
</div>
</header>
</div>
<div class="shadow one"></div>
<div class="shadow two"></div>
</div>
<div class="links">
<ul>
<li><a href="#" style="--i: 0.05s;">Home</a></li>
<li><a href="#" style="--i: 0.1s;">Services</a></li>
<li><a href="#" style="--i: 0.15s;">Portfolio</a></li>
<li><a href="#" style="--i: 0.2s;">Testimonials</a></li>
<li><a href="#" style="--i: 0.25s;">About</a></li>
<li><a href="#" style="--i: 0.3s;">Contact</a></li>
</ul>
</div>
</div>
<script>
const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});
</script>
CSS CODE
@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
.container {
min-height: 100vh;
width: 100%;
background: #485461;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
overflow: hidden;
transform-style: preserve-3d;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
height: 3rem;
}
.menu {
max-width: 72rem;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
}
.logo {
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 4rem;
}
.logo span {
font-weight: 300;
}
.hamburger-menu {
height: 4rem;
width: 3rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
}
.bar {
width: 1.9rem;
height: 1.5px;
border-radius: 2px;
background-color: #eee;
transition: 0.5s;
position: relative;
}
.bar::before,
.bar::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #eee;
transition: 0.5s;
}
.bar::before {
transform: translateY(-9px);
}
.bar::after {
transform: translateY(9px);
}
.main {
position: relative;
width: 100%;
left: 0;
z-index: 5;
overflow: hidden;
transform-origin: left;
transform-style: preserve-3d;
transition: 0.5s;
}
header {
min-height: 100vh;
width: 100%;
background: url("https://i.postimg.cc/vHtXVqkr/bg.jpg") no-repeat top center / cover;
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(43, 51, 59, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.inner {
max-width: 100%;
text-align: center;
color: #fff;
padding: 0 2rem;
padding: 0 200px;
}
.inner p {
font-weight: 300;
line-height: 30px;
}
.title {
font-size: 2.7rem;
}
.btn {
margin-top: 1rem;
padding: 0.6rem 1.8rem;
background-color: #1179e7;
border: none;
border-radius: 25px;
color: #fff;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
}
.container.active .bar {
transform: rotate(360deg);
background: transparent;
}
.container.active .bar::before {
transform: rotate(0) rotate(45deg);
}
.container.active .bar::after {
transform: rotate(0) rotate(-45deg);
}
.container.active .menu {
animation: main-animation 0.5s ease;
cursor: pointer;
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(1.1);
}
@keyframes main-animation {
from {
transform: translate(0);
}
to {
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(1.1);
}
}
.links {
position: absolute;
width: 30%;
right: 0;
top: 0;
height: 100vh;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
ul {
list-style-type: none;
}
.links a {
text-decoration: none;
color: #eee;
padding: 0.7rem 0;
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
letter-spacing: 1px;
transition: .3s;
opacity: 0;
transform: translateY(10px);
animation: hide 0.5s forwards ease;
}
.links a:hover {
color: #fff;
}
.container.active .links a {
animation: apper 0.5s forwards ease var(--i);
}
@keyframes apper {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes hide {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
.shadow {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform-style: preserve-3d;
transform-origin: left;
transition: 0.5s;
background-color: white;
}
.shadow.one {
z-index: -1;
opacity: 0.15;
}
.shadow.two {
z-index: -2;
opacity: 0.1;
}
.container.active .shadow.one {
animation: shadow-one 0.6s ease-out;
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(1.1);
}
@keyframes shadow-one {
0% {
transform: translate(0);
}
5% {
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(1.1);
}
100% {
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(1.1);
}
}
.container.active .shadow.two {
animation: shadow-two 0.6s ease-out;
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(1.1);
}
@keyframes shadow-two {
0% {
transform: translate(0);
}
5% {
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(1.1);
}
100% {
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(1.1);
}
}
.container.active .main:hover+.shadow.one {
transform: perspective(1300px) rotateY(20deg) translateZ(230px) scale(1.1);
}
.container.active .main:hover {
transform: perspective(1300px) rotateY(20deg) translateZ(340px) scale(1.1);
}
Comments
Post a Comment