Image for post
Image for post
Photo by Greg Rakozy on Unsplash

Welcome to Day 5 of learning CSS. You can find Day-4 here.

As i have told earlier, this series is inspired by this awesome youtube series in freecodecamp channel.

We will start with CSS only Modal Window on day-5. Open your code editor and create a new 5.1-ModalWindow folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

Image for post
Image for post
Basic html

Also, put the basic style of the button. On clicking the button, we will display the modal.

Image for post
Image for post
Basic button

It will show our index.html as the below in browser.

Image for post
Image for post
Basics

We will first style the overlay. So, head over to sandbox.css and put the below code.

Image for post
Image for post
Overlay

So, now if you click on the button the overlay will cover the whole browser. Now, we will write style for the modal.

Image for post
Image for post
modal style

And our modal is complete. Click on the button Click to launch modal to open the modal and close it by clicking on the Close button.

Button logic

Next, we will create a CSS only Pacman. Open your code editor and create a new 5.2-Pacman folder and two files index.html and sandbox.css inside it.

Next, in index.html put the basic html.

Image for post
Image for post
Pacman begins

The html doesn’t contain any style. All the code happens in CSS. Let’s first create the path for the Pacman.

Image for post
Image for post
Path

It will show the path in the browser.

Image for post
Image for post
The dotted path

Let’s create the pacman now. We are creating it from two separate blocks, which we are using in before and after pseudo element.

Image for post
Image for post
Pacman

We will now see the pacman in the browser.

Image for post
Image for post
Pacman in browser

Now, let’s animate the pacman close and open it’s mouth.

Image for post
Image for post
Animation code

You can now see the below in browser.

Image for post
Image for post
Pacman Closing opening

Now, we will make the pacman move from left to right. For this we will add a moveForward animation.

Image for post
Image for post
moveForward

Now, our pacman is moving.

Image for post
Image for post
Moving pacman

Let’s create the Ghost now. Put the below in sandbox.css to create the ghost.

Image for post
Image for post
Ghost Code

It will show the below in browser.

Image for post
Image for post
Ghost in the browser

Now, we will make the pupil of the ghost.

Image for post
Image for post
Pupil

Which will now show the blue pupil of the Ghost.

Image for post
Image for post
Blue pupil

Now, we will give the Ghost a nice skirt.

Image for post
Image for post
Skirt code

And we get the skirt.

Image for post
Image for post
The Skirt

Now, we will do the animation for the Ghost.

Image for post
Image for post
Code
Image for post
Image for post
The Animation

This completes our pacman animation.

Image for post
Image for post
The final

This completes day 5 of the course. You can find Day 6 here.

You can find the code for the same here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store