Skip to content
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

Open
Open
CSS Challenge: Creating a 3D-like Card with CSS#2960
Labels
documentationImprovements or additions to documentationweb
@github-actions

Description

@github-actions
github-actions
bot
opened on Jun 23, 2025

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.
  • ::before pseudo-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);: The translate3d shifts the inner shadow slightly, and the skew adds 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:

Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationweb

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions