Flip Cards

Elevate your website's visual appeal with engaging flip cards crafted using HTML and CSS. Learn how to add interactivity and dynamism to your content presentation and capture user attention.

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<div class="cards">
  <label id="summary">
    <input type="checkbox" />
    <div class="card">
      <div class="front">
        <header>
          <h2>Summary</h2>
          <span class="material-symbols-outlined"> more_vert </span>
        </header>
        <var>21</var>
        <h3>Due Tasks</h3>
        <h4>Completed: 13</h4>
      </div>
      <div class="back">
        <header>
          <h2>Summary</h2>
          <span class="material-symbols-outlined"> close </span>
        </header>
        <p>More Information</p>
      </div>
    </div>
  </label>
  <label id="overdue">
    <input type="checkbox" />
    <div class="card">
      <div class="front">
        <header>
          <h2>Overdue</h2>
          <span class="material-symbols-outlined"> more_vert </span>
        </header>
        <var>17</var>
        <h3>Projects</h3>
        <h4>Yesterday: 9</h4>
      </div>
      <div class="back">
        <header>
          <h2>Overdue</h2>
          <span class="material-symbols-outlined"> close </span>
        </header>
        <p>More Information</p>
      </div>
    </div>
  </label>
  <label id="features">
    <input type="checkbox" />
    <div class="card">
      <div class="front">
        <header>
          <h2>Features</h2>
          <span class="material-symbols-outlined"> more_vert </span>
        </header>
        <var>38</var>
        <h3>Proposals</h3>
        <h4>Implemented: 6</h4>
      </div>
      <div class="back">
        <header>
          <h2>Features</h2>
          <span class="material-symbols-outlined"> close </span>
        </header>
        <p>More Information</p>
      </div>
    </div>
  </label>
</div>

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  color: #f7f7f7;
  background: #121212;
  font-family: "Euclid Circular A", "Poppins";
}

h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
}

.cards {
  display: flex;
  gap: 30px;
  margin: 0 10px;
}

.card {
  position: relative;
  perspective: 1000px;
  width: 300px;
  height: 300px;
}

.card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 26px;
}

.card header h2 {
  font-size: 20px;
}

.card .front,
.card .back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backface-visibility: hidden;
  background: #1e1e1e;
  border-radius: 10px;
  padding: 36px 36px 44px 44px;
  transition: 0.6s;
  cursor: pointer;
}

.back {
  transform: rotateY(180deg);
}

input {
  position: absolute;
  scale: 0;
}

input:checked ~ .card .back {
  transform: rotateY(0);
}

input:checked ~ .card .front {
  transform: rotateY(-180deg);
}

.card var {
  font-style: normal;
  font-size: 80px;
  line-height: 1;
}

.card h3 {
  margin: 0 0 30px;
  font-weight: 500;
}

#summary :is(var, h3) {
  color: #3b82f6;
}

#overdue :is(var, h3) {
  color: #e56363;
}

#features :is(var, h3) {
  color: #25b697;
}

.card :is(h4, p) {
  opacity: 0.6;
  font-size: 20px;
}

.card p {
  margin-top: 76px;
}

```
No need of JavaScript
```

Flip cards add a dynamic, interactive element to your website, perfect for showcasing information in a visually appealing way. This guide will walk you through creating flip cards using HTML and CSS. Follow these steps to copy the provided code snippet, link the required CSS files, and customize the flip cards to fit your specific requirements.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the flip cards. Select the code, copy it, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

Ensure the CSS file is correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles and the Material Symbols Outlined font:
```
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0">
```

Step 3: Customize and Make it Yours

Personalize the flip cards to match your website's branding and functionality. Adjust the CSS styles to modify the flip cards' appearance, colors, and content. Experiment with different fonts, sizes, and layouts to create flip cards that seamlessly integrate with your website's design.

By following these steps, you can implement and customize flip cards on your website using HTML and CSS. Tailor the flip cards to your specific needs and effectively display information in a visually appealing and interactive way.

Code Explanation

HTML Code

Container for Cards

<div class="cards">
  <!-- Each card is represented by a label element -->
</div>

<div class="cards">: A container div that holds multiple cards. Each card is represented as a label containing a checkbox and a card div.

Individual Card

Each card is structured similarly. Here's the breakdown using the first card as an example:

Label

<label id="summary">

<label id="summary">: Each card is wrapped in a label element with a unique ID. This allows the checkbox to be styled and interacted with.

Checkbox

<input type="checkbox" />

<input type="checkbox" />: A checkbox input used to toggle the card's state. When checked, it will show the back of the card.

Card Container

<div class="card">
  <!-- Front and back of the card -->
</div>

<div class="card">: A container div that holds both the front and back views of the card.

Front of the Card

<div class="front">
  <header>
    <h2>Summary</h2>
    <span class="material-symbols-outlined"> more_vert </span>
  </header>
  <var>21</var>
  <h3>Due Tasks</h3>
  <h4>Completed: 13</h4>
</div>

<div class="front">: A div representing the front view of the card.
<header>: Contains the title and an icon (represented by a span with a class for material icons).
<h2>Summary</h2>: Title of the card.
<span class="material-symbols-outlined"> more_vert </span>: An icon for more options.
<var>21</var>: A var element to highlight a numeric value.
<h3>Due Tasks</h3>: A heading for the type of data.
<h4>Completed: 13</h4>: A subheading for additional information.

Back of the Card

<div class="back">
  <header>
    <h2>Summary</h2>
    <span class="material-symbols-outlined"> close </span>
  </header>
  <p>More Information</p>
</div>

<div class="back">: A div representing the back view of the card.
<header>: Contains the title and an icon to close or go back.
<h2>Summary</h2>: Title of the card.
<span class="material-symbols-outlined"> close </span>: An icon for closing or going back.
<p>More Information</p>: A paragraph with more details.

Remaining Cards

The remaining cards (Overdue and Features) follow the same structure as the Summary card with different content.

CSS Code

General Styles

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  color: #f7f7f7;
  background: #121212;
  font-family: "Euclid Circular A", "Poppins";
}

body: Centers its content both vertically and horizontally with display: grid and place-items: center. The background color is dark (#121212), and the text color is light (#f7f7f7). The font family is set to "Euclid Circular A" and "Poppins".

Header Styles

h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
}

h2, h3, h4: Removes the default margin and sets the font weight to 500.

Cards Container

.cards {
  display: flex;
  gap: 30px;
  margin: 0 10px;
}

.cards: Displays its children (the individual cards) in a flex container with a gap of 30px between them. It also has horizontal margins of 10px.

Card Styles

.card {
  position: relative;
  perspective: 1000px;
  width: 300px;
  height: 300px;
}

.card: Sets each card to have a 3D perspective, with a width and height of 300px. The position: relative allows for positioning its child elements absolutely within it.

Card Header

.card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-bottom: 26px;
}
.card header h2 {
  font-size: 20px;
}

.card header: Makes the header a flex container, aligns items center, and justifies the content space between. It has a height of 40px and a bottom margin of 26px.
.card header h2: Sets the font size of the h2 element inside the header to 20px.

Card Faces

.card .front,
.card .back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backface-visibility: hidden;
  background: #1e1e1e;
  border-radius: 10px;
  padding: 36px 36px 44px 44px;
  transition: 0.6s;
  cursor: pointer;
}
.back {
  transform: rotateY(180deg);
}

.card .front, .card .back: Both the front and back of the card are positioned absolutely to fill the .card container. They have hidden backfaces, a dark background, rounded corners, padding, and a transition effect for smooth flipping. They are also clickable (cursor: pointer).
.back: Initially rotated 180 degrees along the Y-axis, so it is not visible.

Input Checkbox

input {
  position: absolute;
  scale: 0;
}
input:checked ~ .card .back {
  transform: rotateY(0);
}
input:checked ~ .card .front {
  transform: rotateY(-180deg);
}

input: Hidden by scaling it to 0.
input:checked ~ .card .back: When the input is checked, the back of the card is rotated to 0 degrees (becomes visible).
input:checked ~ .card .front: When the input is checked, the front of the card is rotated to -180 degrees (becomes hidden).

Card Content

.card var {
  font-style: normal;
  font-size: 80px;
  line-height: 1;
}
.card h3 {
  margin: 0 0 30px;
  font-weight: 500;
}

.card var: Styles the var element to have a normal font style, a large font size (80px), and a line height of 1.
.card h3: Removes top margin and sets a bottom margin of 30px, with a font weight of 500.

Specific Card Styles

#summary :is(var, h3) {
  color: #3b82f6;
}
#overdue :is(var, h3) {
  color: #e56363;
}
#features :is(var, h3) {
  color: #25b697;
}

#summary :is(var, h3): Styles the var and h3 elements inside the #summary card with a blue color (#3b82f6).
#overdue :is(var, h3): Styles the var and h3 elements inside the #overdue card with a red color (#e56363).
#features :is(var, h3): Styles the var and h3 elements inside the #features card with a green color (#25b697).

General Card Text Styles

.card :is(h4, p) {
  opacity: 0.6;
  font-size: 20px;
}
.card p {
  margin-top: 76px;
}

.card :is(h4, p): Applies a reduced opacity (0.6) and font size (20px) to h4 and p elements within a card.
.card p: Sets a top margin of 76px for p elements within a card.