Creating graphics with CSS

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.

elenatorro / CSSCake

Birthday Cake made with CSS

CSS Birthday Cake

Birthday Cake made with CSS.

View on 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.