This repository was archived by the owner on Sep 10, 2025. It is now read-only.
This repository was archived by the owner on Sep 10, 2025. It is now read-only.
CSS Challenge: Creating a 3D-like Card with CSS #2960
Description
This challenge focuses on creating a visually appealing card with a subtle 3D effect using only CSS. We'll achieve this using box-shadow and subtle transformations to give the illusion of depth. No JavaScript is required. The style will be clean and modern, suitable for a portfolio item or feature card.
Styling Description:
The card will have a clean, minimalist design. It will feature:
- A slightly raised effect achieved using
box-shadow. - Rounded corners (
border-radius). - A subtle inner shadow to further enhance the 3D effect.
- A gradient background for added visual interest.
- Consistent padding and margins for visual balance.
- Responsive design to adapt to different screen sizes.
Full Code (CSS):
.card {
width: 300px;
background: linear-gradient(to right, #4CAF50, #81C784); /* Green gradient */
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Outer shadow */
padding: 20px;
margin: 20px auto;
color: white;
text-align: center;
overflow: hidden; /* Prevents content overflow from disrupting the shadow */
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
z-index: -1; /* Behind the card content */
transform: translate3d(-2px, -2px, 0) skew(0.1deg); /* Subtle inner shadow */
border-radius: inherit; /* Inherits the card's border-radius */
}
.card h2 {
margin-bottom: 10px;
}
.card p {
margin-bottom: 10px;
font-size: 16px;
}
/* Responsive adjustments (optional) */
@media (max-width: 350px) {
.card {
width: 90%;
}
}HTML Structure (Example):
<!DOCTYPE html>
<html>
<head>
<title>CSS 3D Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<h2>My Awesome Card</h2>
<p>This is a sample text for the card. You can customize this content as needed.</p>
</div>
</body>
</html>Explanation:
box-shadow: Creates the outer shadow, giving the card a raised appearance. The values (5px 5px 10px rgba(0, 0, 0, 0.2)) control the horizontal offset, vertical offset, blur radius, and color/opacity respectively.border-radius: Rounds the corners of the card for a softer look.::beforepseudo-element: This is a clever trick to create the inner shadow. By positioning a pseudo-element behind the card and applying a slight transformation and background color, we achieve a convincing inner shadow effect.transform: translate3d(-2px, -2px, 0) skew(0.1deg);: Thetranslate3dshifts the inner shadow slightly, and theskewadds a minuscule skew for a more complex effect. This is crucial for the 3D illusion.- Responsive adjustments: The media query ensures the card scales appropriately on smaller screens.
Resources to Learn More:
- MDN Web Docs CSS Reference: https://developer.mozilla.org/en-US/docs/Web/CSS – An excellent resource for learning CSS properties and selectors.
- CSS-Tricks: https://css-tricks.com/ – A popular website with many CSS tutorials and articles.
- freeCodeCamp: https://www.freecodecamp.org/ - Offers interactive CSS learning paths.
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.