CSS3 in 10 days — Day 10
Tags: css, webdev, tutorial, beginners
Published: 2019-10-26 06:34:41

Welcome to Day 10 of learning CSS. 

As i have told earlier, this series is inspired by [this](https://www.youtube.com/watch?v=pmKyG3NBY_k&list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU) 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.

![Basic HTML](https://cdn-images-1.medium.com/max/2880/1*tnpuT6kJr2qlw6gkJy0w_Q.png)*Basic HTML*

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

![Basic CSS](https://cdn-images-1.medium.com/max/2880/1*DwMT4Lbvo5JNfRSR_xN98Q.png)*Basic CSS*

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

![Nice Images](https://cdn-images-1.medium.com/max/2880/1*hzzr6J9vAqpk_9bsxaXfPA.png)*Nice Images*

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

![blurring](https://cdn-images-1.medium.com/max/2880/1*UDNJw_tWtUYjD5_A3wFpYg.png)*blurring*

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

![Nice Animation](https://cdn-images-1.medium.com/max/2000/1*Kr3UjT0v6FipKCICfuFZNA.gif)*Nice Animation*

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

![Mouse hover](https://cdn-images-1.medium.com/max/2880/1*to0FkHc5OBGImKCtg1BhBg.png)*Mouse hover*

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

![The complete project](https://res.cloudinary.com/dxkxvfo2o/image/upload/v1572072100/7_cqt3pg.gif)*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.

![Basic HTML](https://cdn-images-1.medium.com/max/2880/1*a2vCf5aJJtAaP8sIE5JggA.png)*Basic HTML*

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

![Only divs](https://cdn-images-1.medium.com/max/2880/1*PZhbEOiDs1IS10sVSoRSMA.png)*Only divs*

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

![The handle](https://cdn-images-1.medium.com/max/2880/1*sGnaVGyWGbRAhdQjaY1fEg.png)*The handle*

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

![Nice handle](https://cdn-images-1.medium.com/max/2880/1*Xi2rNFbpMh3iMMOwz6zi7w.png)*Nice handle*

Let’s make the coffee cup now.

![Coffee cup](https://cdn-images-1.medium.com/max/2880/1*S-x2R_oFFs2GJfTgoO9dvg.png)*Coffee cup*

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

![Coffee cup with Coffee](https://cdn-images-1.medium.com/max/2880/1*8lDjFeByzoafxWnELrgshA.png)*Coffee cup with Coffee*

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

![The brew](https://cdn-images-1.medium.com/max/2880/1*u0YdAjvhSUIToYHwyq-OcQ.png)*The brew*

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

![Nice brew](https://cdn-images-1.medium.com/max/2880/1*UkVjDhODguU1cacG8FLsSw.png)*Nice brew*

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

![Handle code changed](https://cdn-images-1.medium.com/max/2794/1*7e11auH1jVx-5GOUeYgy-A.png)*Handle code changed*

This will perfectly align our handle to the cup.

![The complete product](https://cdn-images-1.medium.com/max/2880/1*vvzX11LzW3MsgTTpNfEz9A.png)*The complete product*

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

You can find the code for the same [here](https://github.com/nabendu82/CSS10days).