DEV Community

Cover image for CSS3 in 10 days — Day 5
Nabendu
Nabendu

Posted on • Updated on • Originally published at nabendu.blog

CSS3 in 10 days — Day 5

Welcome to Day 5 of learning CSS.

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.

Basic htmlBasic html

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

Basic buttonBasic button

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

BasicsBasics

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

OverlayOverlay

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

modal stylemodal 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 logicButton 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.

Pacman beginsPacman begins

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

PathPath

It will show the path in the browser.

The dotted pathThe 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.

PacmanPacman

We will now see the pacman in the browser.

Pacman in browserPacman in browser

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

Animation codeAnimation code

You can now see the below in browser.

Pacman Closing openingPacman Closing opening

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

moveForwardmoveForward

Now, our pacman is moving.

Moving pacmanMoving pacman

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

Ghost CodeGhost Code

It will show the below in browser.

Ghost in the browserGhost in the browser

Now, we will make the pupil of the ghost.

PupilPupil

Which will now show the blue pupil of the Ghost.

Blue pupilBlue pupil

Now, we will give the Ghost a nice skirt.

Skirt codeSkirt code

And we get the skirt.

The SkirtThe Skirt

Now, we will do the animation for the Ghost.

CodeCode

The AnimationThe Animation

This completes our pacman animation.

The finalThe final

This completes day 5 of the course.

You can find the code for the same here.

Top comments (0)