Creating graphics with CSS

nikolisan — Tue, 16 Oct 2018 15:14:21 +0000

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.

Fullstack development using JS

nikolisan — Fri, 12 Oct 2018 18:42:10 +0000

I have a question for you today and it's a general purpose one. I want to learn more about the modern web development. I've watched many tutorials and courses online but as I search more and more, I get confused even more.

I will describe my main question through an example. I want to create a web application which displays data retrieved from a DB, which is populated with some sensor values.

I've seen many online lessons creating this kind of an app using React.js and other using Express.js or pure Node.js. I understand that the React is for the frontend and the Express is for the backend. However similar things can be made using both frameworks.

Using the Express.js I can create a server side application which handles the the requests to the DB's API, handles the routing between pages and can handle HTTP requests and generate EJS templates to show the data to the screen. My question is where does React come and help to the production of the app, especially when the rendering is done from the client and not on the server (which makes things worse for SEO).

DEV Community: nikolisan