Folding Card Using CSS
Folding Card Using CSS

Hy guys, today we are going to create a folding card using CSS. A foldable card gives a unique look to a user card and website. A modern website needs to look more stylish so here we had created a folding card using CSS. The folding card is useful when you want to show less but more important information.

Using a card you can show basic details on the front page of the card and detailed information inside the card. We can show the logo and title on the front card and address and brief work details inside the card. A foldable card also saves screen space.

Table of Contents

Folding Card Using CSS

Here we need to create two files called index.html and style.css. Let’s create the index.html code first.

index.html

<!DOCTYPE html>
<head>
<title>Folding Card Using CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="main">

<section class="card-area">

<section class="card-section">
<div class="card">
<div class="flip-card">
<div class="flip-card__container">
<div class="card-front">
<div class="card-front__tp card-front__tp--city">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
<g>
<path d="M49.7,22c-1.1,0-2,0.9-2,2v32.2c0,1.1,0.9,2,2,2s2-0.9,2-2V24C51.7,22.9,50.8,22,49.7,22z"/>
<path d="M13,29.5c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3h20.8c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3h20.8c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7
V7.1h24.8v15.3c0,1.1,0.9,2,2,2s2-0.9,2-2V5.1c0-1.1-0.9-2-2-2H3.7c-1.1,0-2,0.9-2,2v51c0,1.1,0.9,2,2,2s2-0.9,2-2V36.5H13
c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3H13z"/>
<path d="M58,11.9c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1-0.1-0.2c0-0.1,0-0.1-0.1-0.2c0-0.1-0.1-0.1-0.1-0.2c0,0,0-0.1-0.1-0.1c0,0,0,0,0,0
c0-0.1-0.1-0.1-0.1-0.2c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c0,0-0.1-0.1-0.2-0.1
c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.2,0c0,0,0,0,0,0
c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1l-12.6,7.8
c0,0,0,0,0,0c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.2c0,0.1-0.1,0.1-0.1,0.2
c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.1-0.1,0.2c0,0.1,0,0.1-0.1,0.2c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0v5.4H22.1
c-1.1,0-2,0.9-2,2v28.9c0,1.1,0.9,2,2,2s2-0.9,2-2V29.3h17.3v26.9c0,1.1,0.9,2,2,2s2-0.9,2-2V21l8.6-5.3v40.5c0,1.1,0.9,2,2,2
s2-0.9,2-2V12.1C58,12,58,12,58,11.9z"/>
<path d="M28,31L28,31c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S29.1,31,28,31z"/>
<path d="M33.5,31L33.5,31c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S34.6,31,33.5,31z"/>
<path d="M28,36L28,36c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S29.1,36,28,36z"/>
<path d="M33.5,36L33.5,36c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S34.6,36,33.5,36z"/>
</g>
</svg>

<h2 class="card-front__heading">
Colsan
</h2>
<p class="card-front__text-price">
From $34
</p>
</div>

<div class="card-front__bt">
<p class="card-front__text-view card-front__text-view--city">
Know More!
</p>
</div>
</div>
<div class="card-back">
<video class="video__container" autoplay muted loop>
<source class="video__media" src="https://player.vimeo.com/external/370331493.sd.mp4?s=e90dcaba73c19e0e36f03406b47bbd6992dd6c1c&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
</video>
</div>
</div>
</div>

<div class="inside-page">
<div class="inside-page__container">
<h3 class="inside-page__heading inside-page__heading--city">
Title Here
</h3>
<p class="inside-page__text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<a href="#" class="inside-page__btn inside-page__btn--city">Visit Profile!</a>
</div>
</div>
</div>
</section>
</section>
</main>
</body>
</html>

In index.html code <main> is our parent element. Here our card-front class is used for the front view of the card and the card-back class is used to show video inside the card and at the end, the inside-page class is used to show details, both card-back and inside-page class will be shown after hovering the card. Now we need to create a style.css file to give animation and other effects to the card. Let’s create the style.css file.

style.css

:root {
  --blue: #1e90ff;
  --themeColor: #ff0551;
  --defWidth: 20rem;
  --defHeight: 20rem;
  --frontPageDividerHeight: 13rem; /*--frontPageDividerHeight =  (--defHeight/2)+3rem */
  --bgColor: #DDDDDD;

}
*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html { font-size: 62.5%; }

body {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}

.card-front__heading {
  font-size: 1.5rem;
  margin-top: .25rem;
}

.inside-page__heading { 
  padding-bottom: 1rem; 
  width: 100%;
}

.inside-page__heading,
.card-front__text-view {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: .2rem;
}

.inside-page__heading--city,
.card-front__text-view--city { color: var(--themeColor); }

.inside-page__heading--ski,
.card-front__text-view--ski { color: #2aaac1; }

.inside-page__heading--beach,
.card-front__text-view--beach { color: #fa7f67; }

.inside-page__heading--camping,
.card-front__text-view--camping { color: #00b97c; }

.card-front__tp { color: #fafbfa; }

.card-front__text-price {
  font-size: 1.2rem;
  margin-top: -.2rem;
}

.inside-page__text {
  color: #333;
}

.card-front__icon {
  fill: #fafbfa;
  font-size: 3vw;
  height: 3.25rem;
  margin-top: -.5rem;
  width: 3.25rem;
}

.inside-page__btn {
  background-color: transparent;
  border: 3px solid;
  border-radius: .5rem;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 2rem;
  overflow: hidden;
  padding: .7rem .75rem;
  position: relative;
  text-decoration: none;
  transition: all .3s ease;
  width: 90%;
  z-index: 10;
}

.inside-page__btn::before { 
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleY(0);
  transition: all .3s ease;
  width: 100%;
  z-index: -1;
}

.inside-page__btn--city { 
  border-color: var(--themeColor);
  color: var(--themeColor);
}

.inside-page__btn--city::before { 
  background-color: var(--themeColor);
}

.inside-page__btn--ski { 
  border-color: #279eb2;
  color: #279eb2;
}

.inside-page__btn--ski::before { 
  background-color: #279eb2;
}

.inside-page__btn--beach { 
  border-color: #fa7f67;
  color: #fa7f67;
}

.inside-page__btn--beach::before { 
  background-color: #fa7f67;
}

.inside-page__btn--camping { 
  border-color: #00b97d;
  color: #00b97d;
}

.inside-page__btn--camping::before { 
  background-color: #00b97d;
}

.inside-page__btn:hover { 
  color: #fafbfa;
}

.inside-page__btn:hover::before { 
  transform: scaleY(1);
}

.main {
  background:var(--bgColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.card-area {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-evenly;
  padding: 1rem;
}

.card-section {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.card {
  background-color: rgba(0,0,0, .05);
  box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.5);
  height: var(--defHeight);
  position: relative;
  transition: all 1s ease;
  width: var(--defWidth);
}

.flip-card {
  height: var(--defHeight);
  perspective: 100rem;
  position: absolute;
  right: 0;
  transition: all 1s ease;
  visibility: hidden;
  width: var(--defWidth);
  z-index: 100;
}

.flip-card > * {
  visibility: visible;
}

.flip-card__container {
  height: 100%;
  position: absolute;
  right: 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transition: all 1s ease;
  width: 100%;
}

.card-front,
.card-back {
  backface-visibility: hidden;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.card-front {
  background-color: #fafbfa;
  height: var(--defHeight);
  width: var(--defWidth);
}

.card-front__tp {
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
  display: flex;
  flex-direction: column;
  height: var(--frontPageDividerHeight);
  justify-content: center;
  padding: .75rem;
}

.card-front__tp--city {
  background: var(--themeColor);
}

.card-front__tp--ski {
  background: linear-gradient(
    to bottom,
    #47c2d7,
    #279eb2
  );
}

.card-front__tp--beach {
  background: linear-gradient(
    to bottom,
    #fb9b88,
    #f86647
  );
}

.card-front__tp--camping {
  background: linear-gradient(
    to bottom,
    #00db93,
    #00b97d
  );
}

.card-front__bt {
  align-items: center;
  display: flex;
  justify-content: center;
}

.card-back {
  background-color: #fafbfa;
  transform: rotateY(180deg);
}

.video__container {
  clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%);
  height: auto;
  min-height: 100%;
  object-fit: cover;
  width: 100%;
}

.inside-page {
  background-color: #fafbfa;
  box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0,0,0,0.25);
  height: 100%;
  padding: 1rem;
  position: absolute;
  right: 0;
  transition: all 1s ease;
  width: var(--defWidth);
  z-index: 1;
}

.inside-page__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center; 
  width: 100%;
}

.card:hover {
  box-shadow:
  -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.75);
  width: 30rem;
}

.card:hover .flip-card__container {
  transform: rotateY(-180deg);
}

.card:hover .inside-page {
  box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0,0,0,0.1);
}

Here is our style.css file is too long to read so we will discuss the important topics of it.

:root {
  --themeColor: #ff0551;
  --defWidth: 20rem;
  --defHeight: 20rem;
  --frontPageDividerHeight: 13rem; /*--frontPageDividerHeight =  (--defHeight/2)+3rem */
  --bgColor: #DDDDDD;
}

You can create variables in CSS using :root, here we also have variables, Let’s discuss all variables of our .css file.

–themeColor: #ff0550; is used to give a universal color to our code as you can see a pink color is shown in the card, here you can change that color.

–defWidth: 20rem; is used to give a default width to all elements.

–defHeight: 20rem; is used to give a default height to all elements.

–frontPageDividerHeight: 13rem; as you can see a pink color on the front of the card. you can change the height of that pink color element using this. the default height should be
(–defHeight/2) +3.

–bgColor: #DDDDDD; is used to give color to the background. the default color is gray, you can change from here.

What is rem?

To recap, the rem unit means “The root element’s font-size”. (rem stands for “root em”.) The <li> elements inside the <ul> with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

If you are having any issues with this code, you can copy the code from our Github page. Click Here!

Thank You

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

This Post Has One Comment

Leave a Reply