Categories
CSS HTML Web development

CSS Valentine’s Day Card

Valentine’s Day is coming! Valentine’s Day cards are always a good idea. Create your own Valentine’s Day card using HTML and CSS, and share it with the loved ones!

Valentine's Day Card
Do you like this image? Check more images in theĀ store.
To see live output click here.

What do you need to do?

You need to have 3 images. 2 with the little hearts in .png format, and one which you would like to send as a Valentine’s card.

Images with the little hearts you can take from here (if you want to create them by yourself make sure that they are in the size):

heart.png
heart1.png

After collecting your all images, you need to follow three steps:

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

Step 1.

Add HTML

<div id="card-container">
        <img src="your image.jpg"> 
        <div id="heart-1" class="heart-layer"></div> 
        <div id="heart-2" class="heart-layer"></div> 
        
    </div>
    <h1>Valentine's Day Card</h1>
    <p>You can type your text here.</p>

Step 2.

Add CSS

#card-container {
            position: relative;
            box-sizing: border-box;
            display: inline-block;
            padding: 0;
            margin: 0;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
            border: 15px solid white;
            border-radius: 5px;
        }
 
      
        #card-container img {
            position: relative;
            box-sizing: border-box;
            height: 480px;  
            padding: 0;
            margin: 0;
            display: block;
        }
 
     
        .heart-layer {
            position: absolute;
            box-sizing: border-box;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

Step 3.

Add CSS Animation

	@keyframes backgroundScroll {
            0%   { background-position: 0 0 }
            100% { background-position: 0 480px }  
        }
 
        
        #heart-1 {
            animation:  backgroundScroll 6s linear infinite;
            background: url('heart1.png') repeat;
            background-size: 100% 100%; 
        }
 
       
        #heart-2 {
            animation: backgroundScroll 10s linear infinite;
            animation-delay: -3s; 
            background: url('heart.png') repeat;
            background-size: 100% 100%;
        }
 

To see live output visit: lenastanley.com

Edit:

As a bonus, you can see how this animation looks for the whole background.

Note: I added opacity property to make falling hearts more transparent. More about opacity property you can read here.

Click here to see the BONUS.

Enjoy!

Leave a Reply