Building a Pure CSS Card Design: A Step-by-Step Guide

Creating a visually appealing card design can greatly enhance the user experience of your website. In this guide, we’ll walk you through the process of designing a modern, responsive card using only HTML and CSS. This approach ensures your design remains lightweight and easy to maintain.

1. Understanding the Card Design

A card is a versatile UI element used to display information in a structured and engaging way. It typically includes:

  • An image or media section
  • A title or header
  • A brief description or body text
  • Actionable buttons or links

2. HTML Structure

To start, we need a simple HTML structure for our card. Here’s how you can set it up:

HTML Code

				
					<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pure CSS Card Design</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="card general">
      <div class="card one move">Dev
      </div>
      <div class="card three move">Hello
      </div>
      <div class="card two move">🔥
      </div>
    </div>
  </body>
</html>

Explanation

  • <div class="card">: The main container for the card.
  • <img class="card-image">: The image displayed at the top of the card.
  • <div class="card-content">: Contains the text content and button.
  • <h2 class="card-title">: The card’s title.
  • <p class="card-description">: A short description or body text.
  • <a class="card-button">: A button for user interaction.

3. CSS Styling

Next, we’ll apply styles to create a polished, responsive card design. Create a CSS file named styles.css and include the following code:

CSS Code

				
					@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Emilys+Candy&family=Oswald&display=swap');

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Oswald', sans-serif;
  background-color: rgb(243, 243, 182);
}

.general {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.general:active .two {
  transform: rotate(-5deg) translateX(90px) scale(0.9);
}
.general:active .three {
  transform: rotate(5deg) translateX(-90px) scale(0.9);
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  width: 100px;
  height: 100px;
  font-size: 1.5em;
  margin: auto;
  border-radius: 10px;
}

.one {
  background: #540D6E;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.two {
  background: #EE4266;
  position: absolute;
  right: 0;
  z-index: 2;
  transform: rotate(-10deg) translate(8px, 8px);
}

.three {
  background: #FFD23F;
  position: absolute;
  left: 0;
  z-index: 1;
  transform: rotate(10deg) translate(-5px, 7px);
}

.move {
  transition: all .5s cubic-bezier(.5, .40, .10, 1);
}

Key Styling Details

  • body: Centers the card on the page with a neutral background color.
  • .card: Styles the card container with a white background, rounded corners, and a subtle shadow for depth. Includes a transition effect for hover interactions.
  • .card:hover: Adds a hover effect to lift the card and intensify the shadow.
  • .card-image: Ensures the image spans the full width of the card while maintaining its aspect ratio.
  • .card-content: Adds padding inside the card to space out the text and button.
  • .card-title: Styles the title with a larger font size and appropriate color.
  • .card-description: Provides styling for the description text, ensuring readability.
  • .card-button: Styles the button with a distinct color, padding, and rounded corners. Adds a hover effect to enhance user interaction.

4. Responsive Design Considerations

For a more responsive design, you might want to include media queries to adjust the card’s size and layout based on the viewport:

Example Media Query

				
					@media (max-width: 600px) {
    .card {
        max-width: 90%;
    }
}
  • Edit Column
 
 

This media query ensures that the card takes up a larger percentage of the viewport on smaller screens, improving its responsiveness

final output :

5. Conclusion

By following this guide, you’ve created a stylish and functional card design using pure HTML and CSS. This card design is not only visually appealing but also responsive and interactive. Feel free to experiment with different styles and configurations to match your project’s needs.

If you have any questions or feedback, please let us know. Happy designing!