Introduction
Step into the realm of web design enchantment as we unveil the secrets behind creating mesmerizing 3D UI cards using nothing but the power of CSS. In this captivating journey, we'll explore the artistry of crafting immersive user experiences that will captivate and delight your audience. Get ready to embark on a journey where creativity knows no bounds and imagination takes flight as we delve deep into the world of 3D design.
Creating Files
To kickstart our 3D UI card project, we first create two essential files: index.html and style.css.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3D Card UI Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Wrapper div to contain the entire card -->
<div class="wrapper">
<!-- Main card div -->
<div class="card">
<!-- Logo section with nested circles -->
<div class="logo">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
<!-- Icon inside the fifth circle -->
<div class="circle circle5">
<a href="">
<ion-icon name="color-palette-outline"></ion-icon>
</a>
</div>
</div>
<!-- Glass overlay -->
<div class="glass"></div>
<!-- Content section with title and text -->
<div class="content">
<span class="title">
DARK CSS (3D UI)
</span>
<span class="text">
Get all Html, CSS And JavaScript projects
</span>
</div>
<!-- Bottom section with social buttons and view more button -->
<div class="bottom">
<!-- Social buttons -->
<div class="social_buttons">
<button class="social_button social_button1">
<a href="">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</button>
<button class="social_button social_button2">
<a href="">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</button>
<button class="social_button social_button3">
<a href="">
<ion-icon name="logo-github"></ion-icon>
</a>
</button>
</div>
<!-- View more button -->
<div class="view-more">
<button class="view_more_btn">
view more
</button>
<a href="">
<ion-icon name="chevron-down-outline"></ion-icon>
</a>
</div>
</div>
</div>
</div>
<!-- Script to load Ionicons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>
HTML Code Description
Our HTML code serves as the blueprint for our 3D UI card, defining its structure and content. Within the <body> tag, we create a <div> element with the class "wrapper" to encapsulate our card. Inside this wrapper, we nest several <div> elements representing different components of our card, such as the logo, glass overlay, content, social buttons, and more. Each <div> serves a distinct purpose, contributing to the overall aesthetics and functionality of our UI card. Through strategic organization and thoughtful markup, we lay the groundwork for a visually stunning and user-friendly experience that will leave a lasting impression on our audience.
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html, body {
display: grid;
height: 100%;
place-items: center;
background-color: #ecf0f1;
}
/* Wrapper styles */
.wrapper {
width: 290px;
height: 300px;
perspective: 1000px;
}
/* Card styles */
.card {
height: 100%;
border-radius: 50px;
background: #ecf0f1;
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;
box-shadow: rgba(0,0,0,0) 40px 50px 25px -40px,
rgba(0,0,0,0.2) 0px 25px 25px -5px;
}
/* Glass overlay styles */
.glass {
transform-style: preserve-3d;
position: absolute;
inset: 8px;
border-radius: 55px;
border-top-right-radius: 100%;
background: linear-gradient(0deg, #e9e9e9 0%, #fff 100%);
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
transition: all 0.5s ease-in-out;
}
/* Content section styles */
.content {
padding: 100px 60px 0px 30px;
transform: translate3d(0, 0, 26px);
}
.content .title {
display: block;
color: #000;
font-weight: 600;
font-size: 18px;
}
.content .text {
display: block;
color: #000;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
margin-top: 20px;
}
/* Bottom section styles */
.bottom {
padding: 10px 12px;
transform-style: preserve-3d;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translate3d(0, 0, 26px);
}
.bottom .view-more {
display: flex;
align-items: center;
justify-content: flex-end;
}
CSS Code Description
Our CSS code is the backbone of our 3D UI card, orchestrating a symphony of visual effects and interactions that mesmerize the viewer. The transform property is the cornerstone of our design, allowing us to manipulate elements in three-dimensional space with transformations like rotation, translation, and scaling. Furthermore, the transition property adds smoothness to these transformations, ensuring seamless animations that captivate the eye. Additionally, properties like box-shadow and border-radius enhance the realism of our card by adding depth and dimensionality through lifelike shadows and rounded edges. Meanwhile, the background property allows us to create gradients and patterns that infuse our design with color and texture, further immersing the viewer in the experience. Through the strategic application of these CSS properties, we elevate our 3D UI card from a mere web element to a captivating work of art that delights and inspires.
Conclusion
In conclusion, by leveraging advanced CSS properties such as transform, transition, and box-shadow, we've crafted a stunning 3D UI card that not only captivates the viewer but also demonstrates the creative potential of modern web design techniques. Through the strategic combination of visual effects and interactivity, our card offers a delightful user experience that showcases the power and versatility of CSS in crafting immersive digital environments.