CSS Challenge: Creating a 3D-like Card with CSS #2963
Description
This challenge focuses on creating a visually appealing 3D-like card effect using only CSS. We'll achieve this primarily using box-shadows and transforms to simulate depth and perspective. No JavaScript will be used. We will leverage CSS3 properties for this.
Description of the Styling:
The card will be rectangular with rounded corners. The 3D effect will be created by using multiple box-shadows to create a sense of depth and light, making the card appear to be lifted off the page. We'll also use a subtle transform to add to the 3D illusion. The card will have a background color and some simple text content.
Full Code:
<!DOCTYPE html>
<html>
<head>
<title>3D Card</title>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card {
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2),
-5px -5px 10px rgba(255, 255, 255, 0.3); /*Simulates Light and Shadow*/
transform: perspective(1000px) rotateX(5deg) rotateY(-5deg); /* Adds slight tilt for 3D effect */
padding: 20px;
}
.card-content {
text-align: center;
}
.card-title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="card">
<div class="card-content">
<h2 class="card-title">My 3D Card</h2>
<p>This is a simple card with a 3D effect created using CSS.</p>
</div>
</div>
</body>
</html>Explanation:
bodystyling: Centers the card on the page..cardstyling: Defines the card's dimensions, background, rounded corners.box-shadow: Two box-shadows are used to simulate light and shadow, creating the 3D illusion. The first creates a darker shadow below and to the right; the second, a lighter highlight above and to the left. Adjust the values to fine-tune the effect.transform:perspectivecreates a 3D viewing space.rotateXandrotateYslightly tilt the card, enhancing the 3D effect. Adjust the angles for different perspectives..card-contentand.card-title: Simple styling for the card's text content.
Links to Resources to Learn More:
- MDN Web Docs - CSS Box Shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
- MDN Web Docs - CSS Transforms: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
- CSS Tricks - Box Shadow Tutorial: (Search "CSS Tricks box shadow" on Google for various tutorials)
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.