Welcome to Day 10 of learning CSS.
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.
Now, let’s put some basic CSS in sandbox.css to show the images.
It will show the images in a nice box in our webpage.
Now, we will put the code in CSS which will blur the images on going inside the box.
It will show this nice animation on moving the mouse inside the box.
Now, we will put the code to scale the images on hovering the mouse over it.
It will complete our code and will give this nice effect of scaling up images.
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.
As, you can see from the browser, we have only divs.
We will create the handle of the coffee cup first. Put the below in sandbox.css
It will show this nice handle, which we need to position later.
Let’s make the coffee cup now.
Now, we get this nice coffee cup, with coffee inside it.
Now, we will put a brew layer in the coffee.
This brew is the thing, which happens by the cream of the coffee. Now, we get this nice half circle inside coffee.
Now, it’s time to move the handle to the correct position. We will add the following to our handle code.
This will perfectly align our handle to the cup.
This completes our CSS in 10 days course. Hope you liked it.
You can find the code for the same here.
Top comments (0)