Create Layered Effect Cards using HTML and CSS

Faraz

By Faraz -

Learn how to create layered effect cards using HTML and CSS. Follow this easy step-by-step guide to add modern design to your website.

Join us on Telegram
create-layered-effect-cards-using-html-and-css.webp
Read AlsoCreating a Myntra Clone using HTML, CSS & JavaScript.jpgCreating a Myntra Clone using HTML, CSS & JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Creating visually appealing cards with layered effects is a great way to enhance the design of your website. Layered effect cards are commonly used in modern web design to create a sense of depth and interactivity. These cards can be used to display content like images, text, or even products in an eye-catching way.

In this guide, we will walk you through the process of creating layered effect cards using HTML and CSS. Whether you’re a beginner or have some experience with web development, this tutorial will help you understand how to create these cards from scratch.

Prerequisites:

Before you begin, make sure you have the following:

  • Basic understanding of HTML and CSS.
  • A text editor (like VS Code or Sublime Text).
  • A web browser to view your work.

Source Code

Step 1 (HTML Code):

First, we need to create the basic HTML structure for our layered cards. This will include a container to hold the cards and the individual card elements inside it. Here’s a breakdown of the HTML code:

1. Doctype and HTML Structure:

<!DOCTYPE html>
<html lang="en">
  • <!DOCTYPE html>: This declares the document type and version of HTML, in this case, HTML5.
  • <html lang="en">: This tag defines the start of the HTML document, with the lang="en" attribute indicating that the language of the document is English.

2. Head Section:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Layered Effect</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
  <link rel="stylesheet" href="styles.css">
</head>
  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports most characters from all languages.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive, adjusting to the device's screen width.
  • <title>Card Layered Effect</title>: Sets the title of the webpage, which appears in the browser tab.
  • <link rel="stylesheet" href="https://fonts.googleapis.com/: Links to an external Google Font (Poppins) for styling the text on the page.
  • <link rel="stylesheet" href="styles.css">: Links to an external CSS file (styles.css) for custom styling of the page.

3. Body Section:

<body>
<h1 class="heading">Card Layered Effect</h1>
 <div class="container">
  <div class="layered-box">
    <p>Layer Effect</p>
    <h1>You are the <em>Flow</em> to my <em>Layout</em></h1>
    <div class="heart"></div>
  </div>
  <div class="layered-box">
    <p>Layer Effect</p>
    <h1>You are the <em>Animation</em> to my <em>Website</em></h1>
    <div class="heart"></div>
  </div>
  <div class="layered-box">
    <p>Layer Effect</p>
    <h1>You add the <em>Box-Shadow</em> to my <em>Web</em>!</h1>
    <div class="heart"></div>
  </div>
 </div>
</body>
  • <h1 class="heading">Card Layered Effect</h1>: A main heading that introduces the page content. The class="heading" allows the heading to be styled using CSS.
  • <div class="container">: A wrapper div that holds all the individual layered-box elements, acting as a container for the layout.

Inside the container, there are three div elements with the class layered-box. Each of these represents a card with a layered effect. Here's the breakdown of each layered-box:

  • <p>Layer Effect</p>: A paragraph that provides a label for the card.
  • <h1>You are the <em>Flow</em> to my <em>Layout</em></h1>: A heading with text and emphasis. The <em> tags are used to style the words "Flow" and "Layout" in italics, which could be styled differently in the CSS.
  • <div class="heart"></div>: An empty div element with the class heart, which represents a heart-shaped icon styled using CSS.

4. CSS Styling:

The page references an external CSS file (styles.css) for styling, which is not included in the HTML. The CSS would define how the .heading, .container, .layered-box, and .heart elements are styled, including the layered effect, animations, and any other visual effects.

Read Alsocreating-an-engaging-author-bio-block-with-avatar-html-and-tailwind-guide.webpCreating an Engaging Author Bio Block with Avatar: HTML & Tailwind Guide

Step 2 (CSS Code):

Next, we will style the container to center the cards on the page. We’ll also make sure the cards are spaced out evenly. Here’s a breakdown of the CSS code:

1. Universal Selector (*):

* {
  margin: 0;
  padding: 0;
}
  • This rule applies to all elements in the document.
  • It removes the default margin and padding for all elements to ensure consistent spacing across browsers.

2. Body Styling:

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f0f4f8;
  display: grid;
  place-content: center;
  min-height: 100vh;
}
  • font-family: 'Poppins', sans-serif;: Applies the "Poppins" font from Google Fonts (or defaults to sans-serif if unavailable).
  • background-color: #f0f4f8;: Sets a light gray-blue background color for the page.
  • display: grid;: Uses CSS Grid to layout the content of the page.
  • place-content: center;: Centers the content both horizontally and vertically within the grid.
  • min-height: 100vh;: Ensures the body takes up at least the full viewport height.

3. Heading Styling (.heading):

.heading {
  font-size: 3em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  text-decoration: underline wavy #cc2119;
}
  • font-size: 3em;: Sets the font size to 3 times the size of the parent element's font size.
  • font-weight: 700;: Makes the font bold.
  • text-align: center;: Centers the heading text horizontally.
  • text-transform: uppercase;: Converts all text to uppercase.
  • width: 100%;: Ensures the heading spans the full width of its container.
  • text-decoration: underline wavy #cc2119;: Underlines the text with a wavy line in the color #cc2119.

4. Container Styling (.container):

.container {
  display: flex;
  justify-content: center;
  gap: 35px;
  flex-wrap: wrap;
  margin: 25px auto;
}
  • display: flex;: Uses Flexbox to arrange the child elements (the layered-box cards).
  • justify-content: center;: Centers the child elements horizontally.
  • gap: 35px;: Adds 35px space between each child element.
  • flex-wrap: wrap;: Allows the child elements to wrap onto new lines if there is not enough space in a single row.
  • margin: 25px auto;: Adds 25px margin at the top and bottom, and centers the container horizontally.

5. Layered Box Styling (.layered-box):

.layered-box {
  height: 21em;
  padding: 2em;
  position: relative;
  width: 15em;
  background-color: #ffffff;
  border: 1px solid #000000;
  box-shadow: 
    #dddddd 2px 2px 8px, 
    #ffffff 6px 6px, 
    #000000 6px 6px 0px 1px, 
    #dddddd 8px 8px 1px, 
    #ffffff 12px 12px, 
    #000000 12px 12px 0px 1px, 
    #dddddd 14px 14px 8px;
    transition: all 0.7s ease-in-out;
}

.layered-box:hover{
  box-shadow: none;
}
  • height: 21em;: Sets the height of the box to 21 em units (relative to the font size).
  • padding: 2em;: Adds 2 em units of padding inside the box.
  • position: relative;: Allows absolute positioning of child elements (like the heart) relative to this box.
  • width: 15em;: Sets the width of the box to 15 em units.
  • background-color: #ffffff;: Sets the background color to white.
  • border: 1px solid #000000;: Adds a solid black border around the box.
  • box-shadow: Applies multiple shadows with different colors and offsets to create a layered effect. The shadows are stacked to give a 3D appearance.
  • transition: all 0.7s ease-in-out;: Adds a smooth transition effect when the box is hovered.
  • box-shadow: none;: Removes the shadows when the box is hovered, creating a clean look.

6. Paragraph Styling Inside the Layered Box (.layered-box p):

.layered-box p {
  margin: 0;
  background: #cc2119;
  padding: 4px 8px;
  border-radius: 50px;
  width: fit-content;
  font-size: 10px;
  color: #dddddd;
  text-transform: uppercase;
}
  • margin: 0;: Removes the default margin.
  • background: #cc2119;: Sets the background color to a red shade.
  • padding: 4px 8px;: Adds padding inside the paragraph for spacing.
  • border-radius: 50px;: Rounds the corners to make the paragraph pill-shaped.
  • width: fit-content;: The width adjusts to fit the content inside.
  • font-size: 10px;: Sets a small font size.
  • color: #dddddd;: Sets the text color to light gray.
  • text-transform: uppercase;: Converts the text to uppercase.

7. Heading Inside Layered Box (h1):

h1 {
  font-size: 2.2em;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  width: 90%;
}
  • font-size: 2.2em;: Sets the font size to 2.2 times the parent element's font size.
  • font-weight: 700;: Makes the text bold.
  • margin: 0;: Removes the default margin.
  • text-transform: uppercase;: Converts the text to uppercase.
  • width: 90%;: Sets the width of the heading to 90% of its container.

8. Emphasis Styling (em):

em {
  color: #cc2119;
  font-style: normal;
}
  • color: #cc2119;: Sets the color of the emphasized text (<em>) to red.
  • font-style: normal;: Resets the default italic style of the <em> element to normal.

9. Heart Shape Styling (.heart):

.heart {
  bottom: 4em;
  position: absolute;
  right: 4em;
}
  • bottom: 4em;: Positions the heart 4 em units from the bottom of its parent (.layered-box).
  • position: absolute;: Positions the heart absolutely relative to the nearest positioned ancestor (the .layered-box).

10. Heart Shape Pseudo-Elements (.heart::before and .heart::after):

.heart::before,
.heart::after {
  background-color: #cd231b;
  border-radius: 50px 50px 0 0;
  content: '';
  height: 25px;
  left: 15px;
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  width: 15px;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
  • .heart::before and .heart::after: These pseudo-elements create the top two halves of a heart shape.
    • background-color: #cd231b;: Sets the color of the heart to a red shade.
    • border-radius: 50px 50px 0 0;: Rounds the top corners to create a rounded heart shape.
    • content: '';: Makes the pseudo-elements visible.
    • height: 25px; width: 15px;: Defines the size of the heart halves.
    • position: absolute;: Positions the halves absolutely within the .heart element.
    • transform: rotate(-45deg); and transform: rotate(45deg);: Rotates the halves to form the heart shape.
*{
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f0f4f8;
  display: grid;
  place-content: center;
  min-height: 100vh;
}

.heading{
  font-size: 3em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  text-decoration: underline wavy #cc2119;
}

.container{
  display: flex;
  justify-content: center;
  gap: 35px;
  flex-wrap: wrap;
  margin: 25px auto;
  user-select: none;
}

.layered-box {
  height: 21em;
  padding: 2em;
  position: relative;
  width: 15em;
  background-color: #ffffff;
  border: 1px solid #000000;
  box-shadow:
  #dddddd 2px 2px 8px,
  
  #ffffff 6px 6px,
  #000000 6px 6px 0px 1px,
  #dddddd 8px 8px 1px,
  
  #ffffff 12px 12px,
  #000000 12px 12px 0px 1px,
  #dddddd 14px 14px 8px;
  transition: all 0.7s ease-in-out;
}

.layered-box:hover{
  box-shadow: none;
}

.layered-box p{
  margin: 0;
  background: #cc2119;
  padding: 4px 8px;
  border-radius: 50px;
  width: fit-content;
  font-size: 10px;
  color: #dddddd;
  text-transform: uppercase;
}

h1 {
  font-size: 2.2em;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  width: 90%;
}

em {
  color: #cc2119;
  font-style: normal;
}

.heart {
  bottom: 4em;
  position: absolute;
  right: 4em;
}

.heart::before,
.heart::after {
  background-color: #cd231b;
  border-radius: 50px 50px 0 0;
  content: '';
  height: 25px;
  left: 15px;
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  width: 15px;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

Final Output:

create-layered-effect-cards-using-html-and-css.gif
Read Alsocreate-bootstrap-breadcrumb-navigation-using-html-and-bootstrap-tutorial.webpCreate Bootstrap Breadcrumb Navigation | Tutorial

Conclusion:

These layered effect cards offer a simple yet effective way to enhance the visual appeal of your website. By using basic HTML and CSS, you can create interactive and stylish components that catch the user's eye. Whether you're building a portfolio, a product display, or a personal blog, these cards can be easily customized to fit your design needs.

With the steps provided, you now have a solid foundation for creating layered effect cards. Feel free to experiment with different styles, shadows, and animations to make them truly unique to your project.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create layered effect cards in html and css, step-by-step guide for layered effect cards with css, create modern layered effect cards using html, layered effect cards, html css cards, css card design, heart emoji, heart icon code
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺