Categories
CSS HTML Web development

CSS Valentine’s Day Card (Open/Close on Click)


HTML & CSS Valentine's Day Card

To learn how to create the CSS Valentine’s Day Card (Open/Close on Click) follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="valentines-day-card">
  <input id="open" type="checkbox">
  <label class="open" for="open"></label>
<div class="card-front">
  <div class="note">Click to Open</div>
</div>
  
  <div class="card-inside">
    <div class="text-one">Happy
    </div>
    <div class="heart"></div>
    <div class="smile"></div>
    <div class="eyes"></div>
</div>
</div>

Step2.

Add CSS

Import the font:

Font source: Google Fonts

To read how to import the font in CSS click here.

@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');

Set the colour and the position of the background and the elements:

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2acac;
  font-family: 'Mochiy Pop P One', sans-serif;
}

Style the card (make the card open/ close):

input#open {
  display: none;
}

.valentines-day-card {
  position: relative;
  width: 300px;
  height:300px;
  transform-style: preserve-3d;
	transform: perspective(2500px);
  transition: .3s;
}

.card-front {
  position: relative;
  background-color: #fff0f3;
  width: 300px;
  height:300px;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.15), 30px 0 50px rgba(0,0,0,0.3);
  transition: .3s;
}

.card-front:before {
  content:"";
  position: absolute;
  width: 280px;
  height: 280px;
  background-color: #d04e4e;
  top: 10px;
  left: 10px;
}

.card-inside {
  position: absolute;
  background-color: #fff0f3;
  width: 300px;
  height:300px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.22), 100px 20px 100px rgba(0,0,0,0.1);
}

.open {
  position: absolute;
  width: 300px;
  height:300px;
  left:0;
  top:0;
  background-color: transparent;
  z-index:6;
  cursor: pointer;
}

#open:checked ~ .card-front {
  transform: rotateY(-155deg);
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
}

#open:checked ~ .card-front:before {
  z-index:5;
  background-color: #fff0f3;
  width:300px;
  height:300px;
  top:0;
  left:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.1), 30px 0 50px rgba(0,0,0,0.1);
}
CSS Valentine's Day Card (Open/Close on Click)

Style the front side of the card:

.note {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #fff0f3;
  top:75px;
  left:50px;
  color: #333;
  font-size:30px;
  display: flex;
  align-items: center;
  text-align: center;
  filter: drop-shadow(0 0 20px rgba(0,0,0,0.3));
}

.note:before, .note:after {
  position: absolute;
  content:"";
  background-color: #ba1c1c;
  width: 40px;
  height:40px;
}

.note:before {
  transform: rotate(-45deg);
  top:-20px;
  left:80px;
}

.note:after {
  border-radius:50%;
  top:-35px;
  left:65px;
  box-shadow:30px 0 #ba1c1c;
}
CSS Valentine's Day Card (Open/Close on Click)

Style and animate the card inside:

.text-one {
  position: absolute;
  color: #333;
  font-size: 30px;
  top:30px;
  width:300px;
  text-align: center;
}

.text-one:before, .text-one:after {
  position: absolute;
  left:5px;
  text-align: center;
  width:300px;
}

.text-one:before {
  content:"Valentine's";
  top:30px;
  color: #d04e4e;
}

.text-one:after {
  content:"day!";
  top:60px;
}

.heart {
  position: relative;
  background-color: #d04e4e;
  height: 60px;
  width:60px;
  top:180px;
  left:120px;
  transform: rotate(-45deg);
  animation: .8s beat infinite;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: #d04e4e;
  border-radius:50%;
  height: 60px;
  width: 60px;
  position: absolute;
  }
  
.heart:before {
  top:-30px;
  left:0;
}
  
.heart:after {
  left:30px;
  top:0;
}

.smile {
  position: absolute;
  width:30px;
  height:15px;
  background-color: #333;
  z-index:1;
  border-radius: 0 0 100px 100px;
  top:200px;
  left:135px;
  overflow: hidden;
}

.smile:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width:20px;
  height:20px;
  background-color: #030202;
  top:5px;
  left:5px;
}

.eyes {
  position: absolute;
  border-radius: 50%;
  background-color: #333;
  width:10px;
  height:10px;
  z-index:1;
  top:190px;
  left:165px;
  box-shadow: -40px 0 #333;
  transform-origin: 50%;
  animation: close 2s infinite;
}

@keyframes close {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%, 95% {
        transform: scale(1, 1);
    }
}

@keyframes beat {
  0%, 40%, 100% {
    transform: scale(1) rotate(-45deg);
  }
  25%, 60% {
    transform: scale(1.1) rotate(-45deg);
  }
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Valentine’s Day Card

CSS Heart in Envelope

CSS Heart Shape & Heartbeat Animation

Categories
CSS Web development

CSS Heart Shape & Heartbeat Animation



CSS heartbeat Animation

Demo:

*to see the CSS Heartbeat Animation on the website click here.

What do you need to do?

To create the CSS Heart Shape & Heartbeat Animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
      <div class="heart"></div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #fae1dd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  
.container {
  position: relative;
  animation: .8s beat infinite;
}

Create the heart shape:

.heart {
  position: relative;
  background-color: red;
  display: inline-block;
  height: 60px;
  top:0;
  left:0;
  transform: rotate(-45deg);
  width:60px;
}
  
.heart:before, .heart:after {
  content:"";
  background-color: red;
  border-radius:50%;
  height: 60px;
  width: 60px;
  position: absolute;
  width: 60px;
  }
  
.heart:before {
  top:-30px;
  left:0;}
  
.heart:after {
  left:30px;
  top:0;}

Step3.

Add CSS Animation

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Valentine’s Day Card

Fast & easy CSS Valentine’s Day Animation (Heartbeat)

Valentine’s Day

Categories
Web development

Fast & easy CSS Valentine’s Day Animation (Heartbeat)



CSS Valentine's Day

New: Check also pure CSS Heart Shape & Heartbeat Animation.

Demo:

*to see the animation on the website click here.

What do you need to do?

You need to have an image of the heart in .png format (you can use mine below) and:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
heart

Step1

Add HTML

<div class="valentinesDay">
  <h1>Happy Valentine's Day!</h1>
 <img src="https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640" class="heart" alt="heart" />
</div>

Step2.

Add CSS

Set the color and the position of the background and elements:

body {
  background-color: #E1594C;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.valentinesDay {
  position: relative;
}
.heart {
  position: relative;
}

Step3.

Add CSS Animation

Add to .heart:

animation: .8s infinite beat;

and add @keyframes to create the Heartbeat:

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

Enjoy coding!

Read also:

CSS Valentine’s Day Card

CSS Christmas Tree Snow Globe

Simple CSS Birthday Cake