CSS Rainy Cloud Animation

1. Course introduction: So this is what we are going to build today in this class. We are going to build this beautiful rainy cloud. As you can see, Harry create a beautiful rainy cloud effect. You can notice raindrops are fall from the cloud and after fall into the ground, it disappeared. We are going to build it today in this class. Hello. My name is John Sharkar and I am your instructor for this project. This beautiful CSS animation project would be great addition for your portfolio. Here, we need to create cloud using CSS and also we need to create these raindrops and also we need to fall these raindrops redbly. This is what we are going to create in this project. If you are interested to learn, let's get started. 2. Creating the cloud using CSS: Good to see you back, guys. This is the first tutorial of this project, and in this tutorial, we are going to create the Cloud. At the first part of this tutorial, we are going to create this beautiful cloud using CSS. To create this kind of cloud shape, we are going to use Posido classes, such as before Posido class. Without talking too much, let's jump into the result Studio code editor and start the project. As you can see, side by side, I open my Result Studio code editor and my browser using live server extension, and I already create index dot TML file. I also create style dot CSS file. As you can see, we link our Style file with this TML document. As you know, we need to start with TMS structure. At first, I'm going to create a container, which is going to contain Cloud and ring. I'm going to create a class D dot container. As you can see, we create a class named container, and then inside this container Dev I'm going to create Cloud. Here I'm going to create another De Dev Cloud. I'm going to set this file. Now I'm going to jump into the style section, style dot css file. At first, I'm going to select the document page using Universal select so I'm type star. Then inside the Cali says, first, I'm going to use margin property. Margin zero. With that, also, I'm going to use padding, padding, also zero. Then I'm going to use box sizing property, box sizing, and here I'm going to use Water box V. By default, there is no margin late on this document. Now I'm going to style our body tag. Here I'm going to tie body. Then inside the Cali resis, at first, I'm going to use this property, display display flex. And next, I'm going to use Justify content, Justify content center. Also, we need to use another property, align items. Align IMs center. If you are not familiar with Flexbox and greed, then you can check out my course. Then I'm going to say minimum height to this page. So to type mean height, mean height, 100 VH. Our next property is background. Background, and I'm going to say background color. Yeah I'm going to say something dark gray color. Dark gray. I want some more darker color. I select this color, this one, and I'm going to set this file. This color is good for example, and you can choose your own color. And now we need to style the container section. I'm going to copy this container class name. And here, I'm going to type dot container. Then inside the coli res, our first property is position. Position, really. Also, I'm going to say height to this container, height something 400 pixel. I'm going to set this side. Now we need to design the cloud portion. So to copy the class name cloud and then a container, I'm slate dot Cloud. Then inside the calices, our first property is position, position relating. Also I'm going to say it within height to this cloud with 320 pixel. And height, 100 pixel. Then I'm going to set background color, background, and I'm going to use white background. For that, I'm going to use hexadecimal value, has tag F. If I set this file, as you can see, it creates a rectangle and we need to give it round shape. That's why I'm going to use border radius property. Border radius, border radius, 100 pixel. Let's set the file and C. Also I'm going to position it from the top. Here I'm going to use top property, top 50 pixel. I will set this one to give it cloud shape, we need to use Posius selector. Here I'm going to create a posius selector for the cloud, cloud, colon colon before. Then inside the alivss I'm going to create Blank contain bland basically, I'm going to create a copy of this cloud. Next property is position, position, and this time, I'm going to use absolute Obsolt Next, I want to move this new cloud to this position. For that, we need to use to property, top -50 pixel. Then I'm going to set within height to this cloud. We 110 pixel. Also, I'm going to set height, height, also 110 pixel. And then I'm going to set background color. Background and for background color, I'm going to set also white. I'm going to set this file. Now we need to give it round shape. For that, we need to use border radius. Border radius, 50%. I'm going to set this one. To place it middle, we need to move this circle lip side. Here I'm going to use lit property, it, p 40 pixel. If I satisfy, you can see the result. Now here we need to create another circle shape to create a perfect cloud. For that, I'm going to create solid box shadow. Let me show you how. Here I'm going to use box shadow property, box shadow. At first, we need to position this shadow. From top, I'm going to give 90 pixel. From right, I'm going to give it zero. From bottom, also I'm going to give zero and from left, I'm going to give 30 pixel. And at last, I'm going to give it solid color to this box shadow. So here, I'm going to type, has tag, white color, if if if. If I set this file, you can see the result. So as you can see, we create perfect cloud shape using DML and CSS. In the next part of this project, we are going to create in. So thanks for watching this video. See you in the next part. 3. Creating the raindrops and animate it using CSS: So this is the final part of this tutorial. In this section, we are going to create the raindrops and to create the raindrops, we are going to take help of CSS variables. And also, you are going to taking help of CSS calc function. So let's get back to the visual studio code editor. In the previous part, we successfully create the Cloud. But in this part, we are going to create the rain drops. So without wasting your time, let's start it. At first, I'm going to create a deep tag which is going to contain raindrops. Deep dot RL. As you can see, we create a deep element with rain class. Then inside this deep element, I'm going to create multiple span tag for our raindrops. Here, inside this deep tag, I'm going to create span tag. Then I'm going to use style attribute in this plan style. Here I'm going to use CSS variables. I know it sounds a little advanced, but it's pretty effective to clear a CSS variable, we need to use dads sine. Let me show you how dash and our variable name is I. Then we need to use colon. Then we need to use cold to set our variable. After colon we need to provide the value. For value here I'm going to type a random number, something 11. Total, I'm going to use 20 raindrops, but you can use as much you want. I'm going to duplicate this line. And here, I'm going to pass 12. Then again, I'm going to duplicate this line here I'm going to pass ten. You can use random number, any random number. It is a ten. There duplicate it once again. And here I'm going to use 14. Then again, I'm going to use 18. Let's first forward this section to save your time. And then I'm going to duplicate this work section again. I create 20 raindrops using span tag. If I set this file, as you can see, nothing is haven here. Now we need to style the raindrops in our SSS file. I want to copy the class name reign in our style file, I'm going to select this class, Reg. Then inside the Calibra our first property is position, position relative. Our second property is display, display flex. And our third property is Z index. Z index one. Now we need to style the raindrops. For that, we need to select rain and Span tag. For that, we need to select span tag, dot, rain, space, span. Then inside the aliases, our first property is position relative. Our next property is heightenith, height, ten pixel, also width, ten pixel. Now I'm going to say diagram color to our drops. Here I'm going to use diagram property, background red. Let's set the file and see what happened. If I set this file, as you can see, it looks like a state line. But these are all 20 raindrops. Let's add some padding to our rain. Here I'm going to use padding property, padding. First, for top and bottom, I'm going to use zero, and for left and right, I'm going to use 20 pixel. If I set this file, you can see the result. Then we need to as some margin between raindrops. For that, we need to use margin property. Margin. For top and bottom, I'm going to use zero and from left and right, I'm going to use two pixel. Now you can see our rain dots are perfectly organized, and now we need to keep the rain dots round shape that we need to use border radius property. So here, I'm going to type border radius. Border radius, 50%. Let's set the file and you can see the result. Now, it's sent to create the animation. So I'm going to use animation property animation. And our animation name is animate. And our animation duration is five second. Also, the direction is linear. At last, we need to provide animation iteration count, which is infinite because I want to follow range infinite time. Now, let's add the keyframe to this animation. I type at the red keyframes our animation name is animate. Then inside the calices first at 0% position, I'm going to use transform property, transform and I want to move these red dots downwards. That's why we need to use translate Y. Translate Y. I want to start our red dot animation from 0% position. That's why I pass zero. Similarly, I'm going to duplicate this line and at 70% position, I want to move it downward 300 pixel. That's why I'm going to pass 300. Also at 100% position, I want to use 300 pixel. Let's set the file and see is it worked properly or not. As you can see, animation work perfectly and we translate Y property, I want to use scale property. Scale at 0% position, I want to scale it one time. Then at 70% position, I want to scale it one time again, but at 100% position, I want to scale it zero. If I set this file, now you can see the result. As you can see, when our raindrops fall into the ground, it disappeared, not back to the old position again because we use zero scale value at 100% position. That's why it's disappeared when it fallen to the ground. Now we need to change the transform origin position. Here I'm going to use transform ors and I'm going to use bottom weight. Then scan the most important part of this project. Here you can see the raindrops are falling together, but I don't want to fall raindrops like that. I want the raindrops to fall one by one, randomly. And to do that, we need to play with animation duration property. If we change anivation duration, then all the raindrops are falling one by one, randomly. If you remember, as you can see in my ML file, we create our span tag with variable and our variable lim is I and we set a random value to this variable, 16, 11, 12, et cetera. I'm going to use this random value to create actual rain. Let's get to the CSS file and here, I'm going to use animation duration property, animation duration. Also I'm going to use Kels function, which is a function from CSS. I want to divide 15 second we or variable I. Here I'm going to type where then inside the roundresses our variable N is I to call out variable, we need to use dash dash, then I. If I set this file, now you can see our raindrops are falling randomly. I look very pretty and now it's look like actual raindrops we need to change the raindrops color, and I'm going to use white color for that. If I set this file, now you can see it work perfectly. Our project is almost finished, we need to create the ground and to create a ground portion in death place, we need to use border bottom property. We need to find a container here I'm going to type border bottom. And I'm going to use two pixel border. And also, I want solid color for our border, solid, and our border tlor is white, if if if. If I set this file, you can see the result. And also, we need to remove the raindrops from the bottom. So here, I'm going to type bottom ten pixel. After set this file, now it's worked perfectly. So we successfully complete our Rainy Cloud animation project. If you like this project, please don't forget to provide your Vov review. Thank you very much.