CSS3 in 10 days — Day 10

Welcome to Day 10 of learning CSS. You can find Day-9 here.

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

We will start with Blurry Effect on day-10. Open your code editor and create a new 10.1-BlurryEffect 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

Now, let’s put some basic CSS in sandbox.css to show the images.

Image for post
Image for post
Basic CSS

It will show the images in a nice box in our webpage.

Image for post
Image for post
Nice Images

Now, we will put the code in CSS which will blur the images on going inside the box.

blurring

It will show this nice animation on moving the mouse inside the box.

Image for post
Image for post
Nice Animation

Now, we will put the code to scale the images on hovering the mouse over it.

Image for post
Image for post
Mouse hover

It will complete our code and will give this nice effect of scaling up images.

Image for post
Image for post
The complete project

We will next do our last project and it will be a CSS Coffee Cup. Open your code editor and create a new 10.2-CoffeeCup 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

As, you can see from the browser, we have only divs.

Image for post
Image for post
Only divs

We will create the handle of the coffee cup first. Put the below in sandbox.css

Image for post
Image for post
The handle

It will show this nice handle, which we need to position later.

Image for post
Image for post
Nice handle

Let’s make the coffee cup now.

Image for post
Image for post
Coffee cup

Now, we get this nice coffee cup, with coffee inside it.

Image for post
Image for post
Coffee cup with Coffee

Now, we will put a brew layer in the coffee.

Image for post
Image for post
The brew

This brew is the thing, which happens by the cream of the coffee. Now, we get this nice half circle inside coffee.

Image for post
Image for post
Nice brew

Now, it’s time to move the handle to the correct position. We will add the following to our handle code.

Image for post
Image for post
Handle code changed

This will perfectly align our handle to the cup.

Image for post
Image for post
The complete product

This completes our CSS in 10 days course. Hope you liked it.

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