CSS Is Super Effective! ⚡️ Building a 3D Pokémon Card Interaction (Day 15)

Hey devs!

Welcome to Day 15 of my #100DaysOfCode journey.

Today, I didn't just want to build a layout; I wanted to build an experience. I challenged myself to create a unique Pokémon-themed interaction that breaks out of the standard "boxy" web design.

The goal? A sleek, overlapping card effect using pure CSS. No libraries, no frameworks.

🚀 See It Live

Before we dive into the code, check out the result here:

Live Demo

GitHub Repository

---

🛠 The Tech Stack

• HTML5 for structure.
• CSS3 for the magic (specifically flexbox, transforms, and clip-path).

Key CSS Tricks I Used

Here is the breakdown of how I achieved the effect:

1. Custom Shapes with clip-path

Standard border-radius is boring. To give the cards a sharp, "gaming" aesthetic, I used clip-path to slice the corners into polygons.

css
.card {
  /* This creates the angled cut on the corners */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
}

2. The Overlap (z-index & transform)
I wanted the cards to feel like a "hand" of playing cards.

flex-wrap: nowrap: Forces the cards to stay in a single line.

transform: Used translateX and translateY to shift the cards slightly on hover without ruining the layout flow.
.card:hover {
  z-index: 100; /* Brings the active card to the front */
  transform: scale(1.05) translateY(-10px);
  box-shadow: 0px 15px 30px rgba(0,0,0,0.5);
}

3. Responsive Flow
Using flex-shrink, I ensured that the cards squish gracefully on smaller screens but maintain their aspect ratio.

👨‍💻 Get The Code
If you want to try this out or use the clip-path shapes for your own portfolio, grab the code here:

🔗 https://github.com/bblackwind/CSS-Effect-1

💭 What's Next?
I’m thinking of adding a JavaScript filter to sort them by "Fire" or "Water" type next.

Question: What was your first favorite Pokémon? Let me know in the comments! 👇