Parallax effects add depth and interactivity to web design. In this tutorial, we'll teach you how to design an attention-grabbing parallax card effect using HTML and CSS. Elevate your web design skills and make your website more engaging with this dynamic design element.
Step 1: HTML Markup:
Set up the HTML structure for your parallax card effect, defining the card and its content.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Card UI Design</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="logo">
<span class="circle circle1"></span>
<span class="circle circle2"></span>
<span class="circle circle3"></span>
<span class="circle circle4"></span>
<span class="circle circle5">
<i class="fa-solid fa-seedling"></i>
</span>
</div>
<div class="glass">
<div class="content">
<h1>Rayen</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, autem.</p>
</div>
<div class="footer">
<div class="social">
<span class="social_icons">
<i class="fa-brands fa-facebook"></i>
</span>
<span class="social_icons">
<i class="fa-brands fa-linkedin"></i>
</span>
<span class="social_icons">
<i class="fa-brands fa-square-twitter"></i>
</span>
</div>
<div class="link">
Read More <i class="fa-solid fa-arrow-up-right-from-square"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 2: Styling with CSS:
Create a separate CSS file (style.css)
/*-------------------- CSS --------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--prime_color: #00894d;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(120deg, #ca96f6, #00a67f);
}
.container {
width: 300px;
height: 300px;
perspective: 1000px;
}
.card {
height: 100%;
border-radius: 50px;
background: linear-gradient(135deg, #00ffd6, #08e260);
transition: 0.5s ease-in-out;
transform-style: preserve-3d;
box-shadow:
#05471100 40px 50px 25px,
#02140033 0px 25px 25px;
}
.glass {
transform-style: preserve-3d;
position: absolute;
inset: 8px;
background: linear-gradient(#ffffff59, #ffffffd0);
border-radius: 55px;
border-top-right-radius: 100%;
border-left: 1px solid white;
border-bottom: 1px solid white;
transition: 0.5s ease-in-out;
transform: translate3d(0, 0, 25px);
}
.logo {
position: absolute;
right: 0;
top: 0;
transform-style: preserve-3d;
}
.logo .circle {
position: absolute;
aspect-ratio: 1;
border-radius: 50%;
background: #00f9cd33;
top: 0;
right: 0;
box-shadow: #64646f33 -10px 10px 20px;
transition: 0.5s ease-in-out;
backdrop-filter: blur(5px);
}
.logo .circle1 {
width: 170px;
transform: translate3d(0, 0, 20px);
top: 8px;
right: 8px;
transition-delay: 0.0s;
}
.logo .circle2 {
width: 140px;
transform: translate3d(0, 0, 40px);
top: 10px;
right: 10px;
transition-delay: 0.4s;
}
.logo .circle3 {
width: 110px;
transform: translate3d(0, 0, 60px);
top: 17px;
right: 17px;
transition-delay: 0.8s;
}
.logo .circle4 {
width: 80px;
transform: translate3d(0, 0, 80px);
top: 23px;
right: 23px;
transition-delay: 1.2s;
}
.logo .circle5 {
width: 50px;
transform: translate3d(0, 0, 100px);
top: 30px;
right: 30px;
transition-delay: 1.6s;
display: flex;
justify-content: center;
align-items: center;
color: var(--prime_color);
}
.content {
padding: 130px 60px 0 30px;
}
.content h1 {
color: var(--prime_color);
font-weight: 900;
font-size: 20px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.content p {
margin-top: 10px;
color: #00a15d;
font-size: 15px;
}
.footer {
transform-style: preserve-3d;
position: absolute;
bottom: 20px;
left: 30px;
right: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer .link {
transition: 0.2s ease-in-out;
font-size: 14px;
color: #00c37b;
cursor: pointer;
}
.footer .link:hover {
transform: translate3d(0, 0, 10px);
color: var(--prime_color);
}
.footer .social {
transform-style: preserve-3d;
display: flex;
gap: 10px;
}
.footer .social .social_icons {
display: inline-block;
width: 30px;
height: 30px;
background: #fff;
color: var(--prime_color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: #05471180 7px 7px 5px;
transition: 0.5s;
}
.footer .social .social_icons:nth-child(1) {
transition: 0.2s ease-in-out 0.2s;
}
.footer .social .social_icons:nth-child(2) {
transition: 0.2s ease-in-out 0.4s;
}
.footer .social .social_icons:nth-child(3) {
transition: 0.2s ease-in-out 0.6s;
}
/*Hover Effect*/
.container:hover .card {
transform: rotate3d(1, 1, 0, 30deg);
box-shadow:
#0547110d 30px 50px 25px,
#05471111 0px 25px 30px;
}
.container:hover .card .footer .social .social_icons {
transform: translate3d(0, 0, 50px);
box-shadow: #05471133 -5px 20px 10px;
}
.container:hover .card .logo .circle2 {
transform: translate3d(0, 0, 60px);
}
.container:hover .card .logo .circle3 {
transform: translate3d(0, 0, 80px);
}
.container:hover .card .logo .circle4 {
transform: translate3d(0, 0, 100px);
}
.container:hover .card .logo .circle5 {
transform: translate3d(0, 0, 120px);
}
Customize your parallax card effect by adding your own text, graphics, and animations. This dynamic design element is perfect for grabbing users' attention.
0 Comments