Sometime ago I started learning about web development. As a beginner I started with HTML and CSS. I watched several videos and read several articles on the web. I was always excited with the animations and the smart graphics presented on the websites and I was curious about how I could create them.

Then I saw a great video Ali made and I was eager to create a simple CSS graphic with animation. The first thing that came to my mind was a gift card like those we shared back when internet was not a thing yet.

So, let's make a simple gift card to share with your valentine.

The main idea is to create a heart and below to present a love message. For this I will use a div for the heart and a div for the message.

Heart modelling

The heart consists of three shapes. A square and two circles. It is possible to create the heart shape using only a div block and the two pseudo-elements ::before and ::after.

.heart { width: 100px; height: 100px; background: #EF9A9A; transform: rotate(45deg); } .heart::after, .heart::before { position: absolute; content: ''; width: 100px; height: 100px; background: #EF9A9A; border-radius: 50%; border-top: 5px #E57373 solid; } .heart::after { top: -55px; } .heart::before { top: -5px; left: -50px; } 

Using CSS I created three squares and to make two of those (the ::before and ::after) circles I used border-radius: 50%. Then I carefully position them to create the shape I'm looking for.

The next step is to create a heartbeat-like effect.

At the .heart class I create an infinite animation, animating the scale of the element.

.heart { animation: heart-beat 2s ease-in-out infinite; } @keyframes heart-beat { 50% { transform: rotate(45deg) scale(0.8); } } 

The heart then is completed. I did some further styling and the result you can see it below.

PS: I could use three divs to create the shape of the heart and position them in the same manner. I thought it would be awesome if I could practise using the pseudo-elements.

Birthday cake animation

I was pretty satisfied with the result of heart animation and I thought that it would be the best moment to try and recreate a shape I've seen before in github.

I gave it a go following the same concept as above and the end result is listed below.

I hope you like my article as it is my first full article here. Any tips, advice or whatever is really appreciated.