Mastering CSS Animation Projects (12 Real-World Projects)

1. Introduction: Good to see you back, guys. Once again, I am back with a new class related CSS animation project. Today in this class, we are going to cob Cotter 12 animation project. We are going to start with rotating loading effect using pure CSS animation. Then we are going to learn simple driving car animation. After that, we are going to create this simple text rotar animation. Then we are going to create this Herm button animation when I hover on it, as you can see it shake the button. With that, also, I'm going to create another button Hover animation, text lighting effect using POCsS animation, moon rotating animation around the orbit. Then we are going to learn itable reflecting animation text. This text is also itable. If I try to remove this text and you can put new text here, such as hello world. Then we are going to learn three D wavy circle animation loading, three D rotation animation loading, Rainy Cloud animation project. Also, I'm going to cover this loading text animation. These are the projects that I'm going to cover in this class. I hope you will enjoy all of this projects. Let's get started. 2. Rotationg loading effect using css animation : Hello, everyone. Once again, I'm back with a new project related CSS animation. Today in this project, we are going to build this beautiful loading animation using rotate X and rotate Y value in three D environment. Let's see how we can build this animation. As you can see, first, it rotate the animation at YXS 180 degree, then it's going to rotate the animation XXS and YXS 180 degree. Let's see how we can build. As you can see side by side, I open my Visual Studio code editor and my browser using Live Server extension and I already create an TML document named indexOtETML. With that, I already create styled CSS file and I link the style CSS file with this document. At first, inside the body tag, I'm going to take a deep tag, beef and I'm going to assign a class and our class name is Lodi. Then I will jump into the style CSS file and first, I'm going to style the body section. Body, then inside the CalibrasF I'm going to assign height. Height, I'm going to assign 100 viewport for height and then I'm going to use the property, this way flex. This flex, then I'm going to use property called justify content, Justify content center because I want to place the alignment center of this page. Then I'm going to use align align items center. After that, I'm going to use background color, background color. I want to use dark gray background. So I use this color code, has track 222, and I'm going to set this file set this file, this is how it looked like. Now let's target the element using its class name. So type dot loading. Loading inside the Calibra says, here, I'm going to use the property, the property called Wi Wi 100 pixel. Then I'm going to use height property, height also 100 pixel and background color, background color, and I'm going to use Daground color white. After that, I'm going to assign little border radius. Border radius, I want 12 pixel border radius from each of the corner. Now to s this file, you can see the result. QullPixel border radius provide beautiful nice rounded boder. Now, let's work on the animation keyframe. It at the rate keyframes. And our animation name is, for example, loading. Then inside this keyframe, I'm going to add the first stage 0% at 0% position at 0% of time, inside the cool resis. Here I'm going to use transform property, transform and transform rotate X zero DG. Then come rotate Y, rotate, Y. Also, I'm going to pass zero DG. It's going to start the animation from its original position. Then I'm going to jump into the second stage of animation, so I duplicate this line and at 50% of time, I want to rotate this animation at Xs is zero degree but I want to rotate this animation, YXs 180 degree 18 DG. At the 50% of animation duration, it's going to rotate this element at YXs 180 degree. Then at final stage at 100% of animation, let me show you at 100% of duration, I want to rotate this element at XX is 180 degree. Also, I want to rotate the same element at YX is 180 degree. I'm going to set this file. Then I'm going to call this animation in my selection. I'm going to type animation. First, I'm going to provide the animation name which is loading. Then I'm going to provide the animation duration, which is to second to a. Next, we need to provide the animation timing function which is linear. Finally, we need to pass animation iteration count. I want to run this animation for infinite time. I'm going to pass infinite. As you can notice, here we work with rotate x value and rotate Y value, this two function and it's work on three environment. That's why we need to use perspective on it to understand it better. I'm going to jump into the body section and here I'm going to add perspective. Perspective perspective, and I'm going to say prospective 200 pixel. Now after set this file and reload my browser, this is how our animation look like. This is how it rotate the element. First, it's going to rotate the element at YXS 180 degree, then it's going to rotate the element, XX is 180 degree, also YXS 180 degree. That's why it creates this beautiful loading effect. I hope now it's clear for you how we can build it. Thanks for watching this video. Stay tuned for our next project. 3. Driving car animation : Hello, everyone. In this lesson, we are going to create this beautiful nice infinite animation. As you can see, we have a car and a motorbike riding on this rode. The idea behind in this example is very simple. We have a background image which is this rode we have to two images, one for the car and another for the motorbike, and the car and the motorbike images is not moving. We move the background from left side to right side and it gives us this beautiful driving effect. Let's see how we can build this animation. So as you can see, finally, I am in my Visual Studio coordinator, and I already created an TML document index dot HTML. With that, I already create this style dot CSS file. And as you can see in my current working directory, we have multiple images. We have image of background image. This is our main background image, and I join this background image multiple time and create a new background image. And here I join this background image multiple time and extend the width of this image. So we can run our vehicles at that road. Let's jump into another image, which is car image. I'm going to use this car PNG image. Also, I have another vehicle which is this motorbike. I'm going to add the motorbike and car image on this road and we are going to move the background image only. Let's back to the index dot file. At first, inside my body tag, I'm going to create a deep tag, weave that, and I'm going to assign a class background. The inside this dip tag, I'm going to take two image IMG image. As a source, I'm going to pass cimag card, and also I'm going to assign a class and our class Name is card. Then I duplicate this line and here I'm going to add the motorbike image, motorbike. And it's a motorbike. Then I'm going to set this file. After I set this file, if I show you my browser, and I already open my browser using my live server. So if I show you my browser, this is how it look like. Now, in our background element, we need to add the background image. Let's back to the users to your code, and I'm going to jump into the style dot CSS file, and I'm going to start our styling. At first, I'm going to select the body tag body. Inside the Cariss the first probity, I'm going to use Margin, Margin zero. The second probit, I'm going to use pairing. Padding also zero. I'm going to set this file. After that, I'm going to work on the background. I'm going to work on the background deep element, so I'm going to copy its class name, background and back to the styler CSS file. I'm going to select this background deep using its class name. Then I'm going to assign height, height, and I'm going to assign 100 viewport height. Then I'm going to assign background, background, and I'm going to use URL. URL and inside it, I'm pass the background image. Which background image this background image? This long background image. Ham type background three BG three to JPG. Then we need to position this background. Background position, and I want to position it from the bottom, bottom lit. I'm going to set this file. After I set this file, let's get to the browser. This is how our background look like. Now we need to place this motorbike and the car right position. For that, we need to style the car. At first, I'm going to style the cart car. I'm going to use its class name. Then inside the calibre says, first, I'm going to define the position. Position, I'm going to make it absolute. Then I'm going to define from the late, I want to place it 300 pixel. From the bottom, I want to place it 250 pixel. And also, I'm going to define width of this car Width. Here I'm going to define width of this car image, and I'm going to say 500 pixel. At the same way, I'm going to position the motorbike. For that, I'm going to use its class name. I copy the class name and add to the style CSS file, and I'm going to select the motorbike image. Then inside the calibrssF want to define the position position, which is absolute position. Here we use absolute position because we are not going to move a car and motorbike image. That's why we use absolute position and from the left and from the left, I want to place it 1,100 pixel and from the bottom, I want to place it 360 pixel. Also, I'm going to define the width of this image. Width, I'm going to make it 250 pixel. I'm going to set this file. After set this file, if I back to my browser, this is how it looked like. I think I need to adjust this car image a little bit. Let's back to the code again and from the bottom, I'm going to make it 250, not 150. I'm going to set this file. After I set this file, if I back to my browser again, this is how it look like. Now, we place our car and the motorbike at right position. Now we need to run the animation. We need to run the bottom lap to bottom right. I want to say we need to move this background from bottom lap to bottom right position, and it's going to give us this beautiful animation effect. Let me show you how. So as you can see, here we define the background position, bottom lift. In our animation, we need to move it bottom right. Let's define a keyframe. So t at the red keyframes and our keyframe name is driving driving and inside the Clss I'm going to use from keyword. Inside the cl recess, I want to change the background position only. Background position, and we are going to start from the initial position, so I'm going to use the same value, bottom left. Copy this value and I'm going to paste it here. And then I duplicate this line, and I want to move up to, so I'm going to use two Qard, and this time, I want to move up to bottom right corner. Bottom right. I'm going to sub this pile. After set this file, we need to call this animation in our selection. In our background, I want to run this animation. I'm going to use the animation property animation and our animation name is driving. Then we need to provide the animation duration which is ten second. Then we need to provide the animation direction, which is linear. And also we need to provide the animation time. How many time we want to run this animation and I want to run this animation for infinite time, so I'm going to use infinite. I'm going to set this file. After set this file, if I back to my browser, as you can see, it run my animation. This is how we can run any driving animation. We need to just move the background, and we don't need to move our objects such as car, otherwise motorbike. Just need to move the background from another side to another side. Here we just move this background to left side to right side and it gives us this beautiful driving effect. So I hope now it's clear for you. Thanks for watching this video. Stay tuned for our next project. 4. Text Rotar animation: Hello, everyone. Once again, I'm back with another CSS project. In this project, we are going to create this takes to rotator animation. As you can see, first type, I love CSS transform, transition and CSS animation. Now let's see how we can change the text using the Hl op CSS animation, not by the JavaScript. Let's jump into the isults Studio code editor. As you can see, side by side, I open my visual Studo code editor and my browser using Lip server extension and I already created an TML document name index dot HTML. With that, I create this style file style CSS. At first, inside the body tag, I'm going to take H one tag heading W and Hebru type, I love CSS. And then I'm going to take a tag, span. Then inside the span tag, hell, I'm not going to type anything. For now, it's empty, but it's going to contain animation, transition, and transformation. But we are going to add them using CSS, not by the TML. Now to set this file, this is how it look like. And now we need to jump into the tile dot CSS file. At first, at first, I'm going to style the body tag. Body, then inside the curses, first, I'm going to assign height, height, and I'm going to set height, 100 viewport height. Then I'm going to assign this way. Display flicks justify content center because I want to align this taste horizontally and vertically center of this page. Then I'm going to try align items also center. After that, here I'm going to define background color, background color, and I'm going to set it dark gray color, tag 222, this one, and I'm going to set this file. Up set this file, this is how it looked like. Now I'm going to change the text color. I'm going to target the H one tag using its tag name H one and herund assign color. And I want to use white color white. With that, also, I'm going to define font size. Font size, and I want a little larger font so I'm going to make it 40 pixel. I think 40 pixel is good for me. Yes. And then I'm going to target the span tag, and I want to create a before element before pseudo element. So type, span colon before. Then you said the clivss here I'm going to pass the content which I want to add. Some type contain colon and I want to add inside the single codes, and I want to add transition, first of all, so type transition. Then precip this file, here it is. I love CSS transition. Next, I'm going to assign text transform, text, transform uppercase. Also, I'm going to define the font family font family area. I'm going to set this file for the color text color, I'm going to use this hexa value, this blue colored and I'm going to set this file. Now I want to change the word transition. We can do that using animation. I'm going to create animation at the red keyframe our animations word switch. Word switch inside the car resis. Now, inside the keyframe at 0% of animation time, I'm type 0% inside the car resis, I would like to change the content, but I would like to go with the same value content transition. I type contained colon and I'm type transition. So we're going to do in this line. After that, I duplicate this line at 50% of animation time, 50% of duration, Hemotyp animation, and at 100% of duration, I'm going to change the contag Hemotype transform. Instead of using animation, I'm going to replace it with transform. I'm going to set this file. After set this file, I'm going to call this animation Word switch, copy the animation name. I'm going to call this animation inside this span tag, span before pseudo element. So t animation and our animation name is Wordswitch and animation duration is five second. Also, I want to run this animation for infinite time, so I'm going to use infinite value. I'm going to set this file. After set this file, here you can see the result. Within 5 seconds it complete the animation. First, it tip animation, transition, then it type animation. I love CSS animation and then it pass and then tip animation transform. If I increase the speed, so I'm going to reduce the time, I'm going to make it two second and then set this file. Now you can see it changed quickly. Animation transform transition. This is how we can create this effect. I hope it's clear for you. Thanks for watching this video. Stay tuned for our next project. 5. Animated button with css animation: Hello, everyone. In this tutorial, we are going to create this leak, this animated leak. Now, if you take a look, we have a red background and it have specific wide and we skew this element a little wit. Also it moving left to right side continuously. Infinite time, it's going to run the animation. But whenever if I hover my cursor on this element, let me show you if I hover my cursor on this element, now you can see it stop the animation. Also, the button filled with this red background. I extend the width of this skew element and cover the whole button. This is what we are going to create in this project. I hope you will enjoy. It's a very simple and easy project. It's not a very difficult one. So let's jump into user studio code editor. So as you can see side by side, I open my Visual Studio code editor and my browser using if server extension, and I already create an HTML document named index dot TML. With that, I create Stylo CSS file. For now, it's an empty. Now inside the body tag here, I'm going to take a anchor tag, A, and here, I'm going to type Hover me. Dash it up to set this file, here you can see the link in my browser. But we need to style this link. For that, we need to go jump into this style dot CSS file. At first, I'm going to start styling with body tag, some type body. There inside the Cli vers is the first property I'm going to use height. I'm going to define a height, and for height, I'm going to tie 100 VH, put height. Then I'm going to define display and I'm going to make it flax. Display flakes and justify content center align item, align items also centered. Whatever element we pass inside this body tag, it going to vertically and horizontally center this element. After that, also I'm going to pass a background color background color here I'm going to use dray background color. So type has tag 222, and I'm going to set this file. After I set this file, you will see the result. As I told you, horizontally and vertically, it going to center the element of this page in this page. Next, I'm going to starle the anchor tag. So type A, then inside the clirassF I'm going to remove the underline from this text, some type text, decoration. I'm going to make it nun. I'm going to set this file, you can see it remove the underline. After that, I'm going to make it visible some time, color. I'm going to make it white. Also, hair, I'm going to define font size, font size, and I'm going to make it 40 pixel, I think 40 pixel is enough for the example. Next, I'm going to define the font family, font family. Here I'm going to use sensory. After that, I'm going to define border, border. I want three pixel, solid border, solid, and our border color is also white. Then I'm going to set this file. After set this file, this is how our button look like. After that, we need to add some padding on it. So that padding so from top and bottom, I'm going to pass 40 pixel and from left and right, I'm going to pass 80 pixel. Then I'm going to make position. Position, I'm going to make it relative. After that, I'm going to define overflow. Overflow hidden. I'm going to set this file. After I set this file, this is how our button look like. Next, I'm going to create the inner element using before pseudo class. Here, I'm going to create a before pseudo class of anchor tag A, colon before. Then inside the aliases, the first property, I'm going to use content because to create a blank content for that. Content, content is a blank content. Then after that, we need to define position of this blank content. So from the top, from the top position, I'm going to make it zero. From the lab also I'm going to start bed also zero. After that, I'm going to define a background color, background color. I'm going to use reddish color someti HatagF four, four, three, three, six. After that, I'm going to define id. Width, helm to use width, 120 pixel. Next, I'm going to define height, height, and hem to use height, 100%, 100%. After that, I'm going to define the position position, and I want to make it absolute. And I'm going to set this file. After set this file, this is how our element look like. But the problem is letters under it. So for that, we need to use Z index value. So here are T Z index, and I'm going to pass minus one. I'm going to set this file and resolve the problem. Now I'm going to transform this element. I want to skew this element. For that, we need to use transform property, transform, and I'm going to use skew value, skew. And I want to skew it up to -15 degree the EG, and I mo to set this file. After set this file, this is how our element will look like. Also, you can notice this element is not visible outside the border area because here we use overflow hidden propriety. That's why we cannot see this part of area of this que element. Now we need to work on the animation that going to move this element lap to right side. But before I start the animation, I'm going to comment out this line overflow hidden and here, I'm going to declare the animation using the red keyframe and our animation name is, you can name it anything, I'm going to name it move. Then inside the Caira says at here, I'm going to use from keyword, from this is the starting position of this animation. Then inside the caliber says, here, I'm going to use the property called P. From the lap, I want to start the animation at minus 120 pixel. Sorry, 120 not 12. Then I'm going to set this file. I mean, it's going to put this element at that place. Let me show you. If I change the value, if I change left value, if I make it minus 120 pixel and then set this file. As you can see, we move this element at that position. Now, in our animation, we are going to start this element from that position. For now, I'm going to make it zero, zero again because this is the starting position of this element. But in animation, we are going to start this element at that position. And in two keyword two, our end destination is left value f here, I'm going to pass 100%. I'm going to set this file. Also, now, I'm going to uncomment this line again. I'm going to set this file again. After that, I'm going to call this animation in our BfcedElimate. Tip animation, first we need to provide the animation name which is move, then we need to provide the animation duration, and I'm going to use 1.2 second. And our animation derion is linear, for animation intercon count here I'm going to use infinite value, infinite. I'm going to set this file. After set this file, as you can see, infinite time for infinite time, it moved this element behind this bottom. For infinite time, it's going to run the animation, but I want to stop this animation when I Her my cursor on this button. Also, I want to extend the width of this skew element. For that, we need to create a hover selector of this before element. Here, I'm going to type NCatag colon hover, and I'm going to apply the Her selector in before element before. Then inside the calibrsF property, I'm going to use wed. I want to extend the width of this element, and I want to make it 100%. Then I'm going to remove the QVLu. I want to make it a square. I will type transform, and I want to make it Qvalu zero DG and also I'm going to remove the animation when I hober my cursor on this element. So type animation, and here I'm going to pass Nn Value. I'm going to set this file after set this file, if I hober my cursor on this button, as you can see, instantly it stop this animation. Also it fill the button with this before pseudo element. But the problem is we cannot experience the transition on it. It instantly covered the whole button. For that, here we need to use a property called transition. Transition all of this element, and our transition time is 0.5 second. Win hub second, it's going to covert this element. Let me show you. Whenever I hover my cor on this button, you can experience this animation. You can experience this transition. This is how we can create this beautiful animation effect on this button with the help of keyframes and before pseudo lemate. So thanks for watching this video schedule for our next project. 6. Text Lighting Effect: Hello, everyone. Once again, I'm back with a new project related CSS animation. And today in this project, we are going to create this lighting text animation, as you can see, Hearty animation word and all the characters light up one after another. It's not blinking at the same time. One after another, it light all the characters. So let's see how we can create this animation without using JavaScript. Most of the cases to create this kind of animation, we need Java script. But in this tutorial, we're not going to use any JavaScript. We are going to use on CSS and HTML. So let's start the code. So as you can see side by side, I open my visor studio code editor and my browser using Live Server extension and I already created an TML document, named index dot HTML. With that, I create style door CSS file and I link this file with this document. Now, at first inside the body tag. At first, inside the body tag, I'm going to take a under list, UL. Then inside this nodal list, I'm going to take list item, I, and I'm going to take multiple list item. Here I'm going to type animation, A, A N I A, T, I, I'm going to duplicate this multiple time ON, and I'm going to set this file. After set this file, let's jump into the style or CSS file. Now I'm going to start with body tag, some type, body. Then inside the Curless, first property, I'm going to use height. I'm going to assign a height to this page and which is 100 VH. After that, I'm going to assign display display flex, justify content, justify content center. Also align items center and I'm going to set this file. It going to horizontally and vertically align this item, center of this page. After that, here I'm going to assign font family, font family, and I'm going to use aerial font aerial. I'm going to set this file. Next, I'm going to add a background color to this body tag some type, background, and here I'm going to use hashtag 222, this dark gray background color. Then after that, I'm going to target the UL tag, UL and list. Then inside the carivers here, I'm going to set margin. Margin, zero, Adding also padding zero. Then I'm going to use display property. Display flakes and I'm going to set this file. After I set this file, this is how it look like. Now all the list item disappear side by side. After that, I'm going to target all the list items. Here I'm type, ULI inside the cariverss the first property I'm going to use is tile. List style, I'm going to make it none because I want to remove the dots. After that, here, I'm going to assign a color, color, and I want to use little grayish color, light grey color some type has tag, some type has tag, four, 848, 48. After that, I'm going to assign phone size. Phone size Hemon assign phone size eight pixel. Pixel. Then I'm going to set this file. After I set this file, this is how our takes to look like. Also, I'm going to provide little later spacing between these characters. Here I'm type later spacing, 15 pixel, I think 15 pixel is good for it, and I'm going to set this file. Now, this is how it look like. After that, we need to create the animation using keyframes. For that, here, I'm going to type at the weight keyframes, added keyframes and here I'm going to name the keyframe lighting. Lighting inside the clss the first probability at 0% of duration inside the less, I'm going to use color property, color. I'm going to change the color. Basically, I'm not going to change the color, I'm going to keep as it is. I use this way. With that, I'm going to use text shadow, text shadow. For now, I'm going to type none. Later, I'm going to change the text shadow value. Then I duplicate this line. Then I duplicate this section, and here I'm going to pass at here I'm going to pass at 90% of duration. I want to use the same color, but I'm going to duplicate it again now at 100% of duration. I'm going to set color. I'm going to change the color. Here I'm going to use this color, FS if nine do zero, this yellow color. Now I'm going to apply a page shadow value at 100% duration. Here I'm going to replace nano with this value. I already copy this value, so I place it here and I'm going to set this le. After that, I'm going to call this lighting animation, copy the animation names and I'm going to call it here inside this LI tag, I'm going to call the animation. Animation, first I'm going to provide the animation name which is lighting. Then we need to provide after I provide the animation name, we need to provide the animation duration, and animation duration is 1.4 second. With that, we need to pass the animation timing function which is linear. After that, we need to pass animation iteration count value, which is infinite because I want to run this animation infinite time. Infinite and I'm going to set this file. After I set this file, you can see the animation in our text. But the problem is all the characters blinking at same time. Now I want delay. I want delay between every character. For that, we need to select all the elements one after another. I want to say all the characters. For that, we are going to use nth child. We are going to use advance selection technique. Hern type UL, Ali, Colon nth child. It's means using it, we can target the LIE means using its index number. Inside the rounds here, I'm going to pass one. At first, I want to select the first character. Basically, I want to say it's going to target A. Now one by one, target all the characters for N for I, for M, for A, T I O N. Here, inside the Kalis is hairy target character A, and I want to assign little animation delay on it. Animation delay. This is our first character, so I'm going to pass zero. Then I duplicate this line, and this is nth child two here I'm going to assign animation delay 0.1 second. After that, I duplicate this section, then I target I I character using its index number. Then here I want to assign delay, 0.2 second. After that, I duplicate it again and this time, I'm going to select here I'm going to assign delay 0.3 second. Then I duplicate it again, and this time, I'm going to delay for A A, this character, A. Here, I'm going to pass index number five and 0.4 second. Then I duplicate it ag then I'm going to target T using index number six, 0.5 second. Then again, I duplicate this number, duplicate this line and then I'm going to target I using index number seven and delay value 0.6. After that, I duplicate this again. This time, I'm going to select the nth child number eight and delay 0.7 duplicate it again, this is for the last character aim. I'm going to change the index number nine. And here, I'm going to change the value. I'm going to make it 0.8 second delay. If I set this file, now you can see now after set this file, you can see one after another, it growing the characters. This is how we can achieve this lighting effect. I hope now it's clear for you how we can achieve it. Thanks for watching this video. Stay tuned for our next project. 7. Editable reflecting animated text: Good to see you bad guys. Once again, I am back with a new project related CSS animation. And today in this tutorial, as you can see, we create this beautiful text animation. Here you can see how our text is growing, and also you can see the reflection of this text. Not only that, also our text is irritable. Let me show you. Suppose if you want to type your name, you can remove the text from this place and you can type your name. It's a very good practice and example of CSS animation. You can use this animation on your website. It can give your website very creative look. Without further top, let's start the project and see how we can create it. As you can see, side by side, I open my visual studio codaor and my browser using if server extension, and I already create a HTML document, named index dot HTML. With that, I link *** file style dot CSS. At first, inside the body tag, I'm going to create a header tag, H two header inside this tag for now, I'm going to type text. If I set this file, you can see the result. Text. It is a static content. We cannot edit it from our browser, and if you want to make it itable content, in that case, we need to use a attribute and our attribute name is content itable. Let me show you. Here I'm going to type content. Editable. I want to make it true. If I make it true and then set this file, now we can edit our content from our browser. Let me show you. I want to convert text to name. You can see the result. So we successfully done our table part. Let's jump into our design part. I'm going to jump CSS file style or CSS. At first, I'm going to use Universal selector, I type star. Inside the Caliss I want to set margin. Margin, zero. With that, also, I want to set padding, padding zero. Also I want to use box sizing property, box sizing, box sizing border box. Then I'm going to use font family font family. Font family, and I'm going to use Aerial font. Aerial Heldic and sensory. If I say this file, you can see the result. Next, I want to style our body tag, body. Instead the Kalis is, I want to start with display property, display flex. Hey, if you are not familiar with flex and read, you can check out my course. Then justify content. Center. Also I want to align this item center. I want to use align item property, aligned item center. Our next property is minimum height. We need to set minimum height. Man height. Minimum height, I want to use 100 VH. With that, I want to set dark background color. Background, and I'm going to use RGV yellow. For red, I'm going to use five. For green, I'm going to use 30. And for blue, I'm going to use 71. If I set this file, you can see the color. You can see the dark bluish background color, and also hit center our content middle of this page because we use flexbox to align our content. And then come the most important part H two heading tag design. H two is at the calibrassO first propriety is position, position relative, and our second property is font size. Font size 6:00 A.M. If I set this file, you can see the result. With that, I want to say letter spacing. Letter spacing, letter spacing, 15 pixel. Our next property is color means font color, color, and I'm going to use RGVa value. For red, I'm going to use four. For green, I'm going to use 50. And for blue, I'm going to use 124. If I set this file, you can see the result. This color is pretty identical with background color, and now I'm going to transform these takes into uppercase. Takes transform uppercase. If I set this file, you can see the result. Then I'm going to set wet wet hundred percent. Text align, center, and then come the very important part of this video. Now we need to reflect this text. I want to create a mirror reflection. For that, we need to use a new property name box reflect. Let me show you. Hey, as you can see, I work with Chrome browser. That's why we need to use a prefix. Dash web ket. Our property name box reflect. Dash reflect. At first, we need to declare the direction of our reflection, which is below, and then we need to provide the length of this reflection, which is one pixel. If I set this file, you can see the result. It creates a perfect reflection of our text. Our first value is reflection direction value. Our second value is opposite value. And third, we need to provide the mag value. And for mag value, I'm going to use linear gradient. So here I'm going to type linear gradient. Inside the parenthesis or first value is transparent. Our second value is RGVA inside the parenthesis, we need to provide the argv value. But at first, I'm going to turn on the water wrap. Now I'm going to pass the value or first value is red value. For red, I'm going to use 11 for green, I'm going to use 70 for blue, I'm going to use 138. At last, we need to pass the Alpha value. And as you know, Alpha value used for transparency. So for Alpha value, I'm going to use 0.267. If I set this file, you can see the result. Then I'm going to use semicolon to end this line. Our next property is line height. Line height. For line height, I'm going to use 0.70 EM. And next, I want to turn on the outline of the stakes. I'm going to use outline property. Outline, none. If I set this file, you can see the result. After removing the outline, our reflection attach with our content. Now our reflection looks realistic. Thence come our final part, which is animation. So at first, I want to create a keyframe at the rate keyframes. Our animation name is animate. Then inside the Cali resist, as you know, we have to tell two type of keyframe selectrod. You can use from or two keyword, otherwise, you can use percentage value. For this example, we need to go with percentis value. Not only, we need to work with multiple percentage value, and I already prepared the percentage value for this example. I'm going to copy it and I want to paste it here, paste. Then inside the caliss we need to use our property. At first, I want to change the text color. I'm going to use color value. Color and I'm going to use argv value. And I use the same color which I use in our heading tag. Our next property is take shadow. Sonu type takes shadow. Take shadow, none. As you can see, I apply this property, 0% of animation, 18% of animation, 20% of animation, 50.1% of animation, 60% of animation, 65.1% of animation, 80% of animation, 90.1% of animation, and 92% animation. Now, let's call the animation and try to see is it worked properly or not. So I want to use animation property. Animation. And our animation name is animate. And our animation duration time is 1 second. And our animation direction is linear. And for our animation duration time, I'm going to use infinite Value. Infinite. If I save this file, let's see what happened. As you can see, nothing is happening because to create the growing effect, we need to play with te shadow value. So for that, we need to use some more percents selector. I already copy the percentage selector, and I'm going to paste it here. Then inside the colrass I'm going to use color property. Color, color white, Haz tag, if if is. And now we need to play with tee shadow property. So type takes shadow. Take shadow. At first, you need to pass the XXS value, which is zero, then you need to pass the Y X vero. I'm going to use zero. Third, you need to pass the blurriness value. So here, I'm going to use ten pixel. At last, you need to pass the shadow color. For shadow color, I'm going to use RGV Vo RGB, inside the parenthesis, I'm going to type red value six, green value 149 and blue value 231. If I set this file, you can see the result. You can see how it is blinked. Also you can see the reflection. And now I want to create this effect more attractive. I'm going to duplicate this line, copy. In the next slide, I want to duplicate this line. And now I just want to increase the blur value, 20 pixel. If I set this file, you can see the result. Now you can see a glowing light effect edge of this text. So after, I want to duplicate this line, once again, I want to increase the value of blurness 40 pixel. Then once again, I want to duplicate this line, and now I'm going to use 80 pixel. At last, I'm going to use 160 pixel. If I remove the last comma and set this file, you can see the effect. As you can see, now our growing effect look more attractive. Not only that, it's also itable. Suppose you want to type your name. I'm going to remove this one, and I'm going to type Smith. You can type any text here because we use irritable content. As you can see, content itable true. I hope now it's clear for you how we can create this growing effect. Thanks for watching this video, stay tuned for our next project. 8. CSS 3D Wavy Circle Loader Animation Effects: Hello, guys, good to see you back. Once again, I'm back with a new project related CSS animation, and today we are going to create this beautiful CSS three D wavy circle loader. As you can see, we have multiple circles with different size and how it perform a beautiful wavy animation. Let's see how we can create it. Let's jump into the studio code editor. So as you can see, side by side, I open my Visual Studio Creator and my browser using Lip server extension, and I already create a ETML document named index dot TML. Also, I link this document with the tyler CSS five. So first, inside my body tag, I'm going to take a Deep tag, Dev, and also I'm going to set a class to this Deep class loader. Then inside the dip tag, I'm going to take multiple span tag span. Basically, I'm going to take empty Spentag to create some circles. For this project, I'm going to take pipten span tag, so I'm going to duplicate this line 14 time. We have total 15 span tag for 15 circles, we successfully done our TML part. Now, let's jump into the CSS file, style dot CSS. Here, at first, I'm going to select Universal selector, which is star. Then inside the calibers, I'm going to use margin property. Margin, zero, then I'm going to use padding property. Padding zero. Then I set this file. Next, I'm going to select the body tag. Here I'm type body. Then inside the aliases, at first, I'm going to use display property, display flex, Justify content, center. Our next property is Align item. It is also center. And then I'm going to say minimum height to our web page. For that, I'm going to use mean height property IN height. Man height, 100 VH. I want to select whole page for this project. That's why I use 100 VH. Our next property is background. Background and for background, I'm going to use RGV value RGB. For red, I'm going to type 70. Similar for green, I'm going to type also abnty. And for our blue value, I'm going to type 70. If I set this file, here you can see our background color is dark gray, and now I'm going to style the Loader class. So to select dot loader. Inside the calirass at first, I'm going to use position property. Position relating. Also, I'm going to set Haydn weight to this loader, with 300 pixel. Height, 300 pixel also. Now I'm going to use the most important property, which is transform style, transform style. In our transform style property, I'm going to use preserve three d value because I want to give our circle three D L. Our next property is transform. Transform. Our first value is perspective. Prospective 500 pixel, and our next value is rotate x value, rotate X. Here I'm going to pass angle 60 degree. Next, I'm going to style all the spentag inside the oder class. So here I want to tie dot loader, space, I'm going to select all theta, span. Then inside the Cali resis, our first property is position, position absolute. Our next property is display, display block. And now I'm going to set border to our span tag. Border. Five pixel. I'm going to set border with five pixel, and I want solid border. And our border color is white. Sm type FFF. If I set this file, you can see the result. Here you can see just to create multiple boxes at the same place. For now, it's not clear for us. So our next property is box shadow box shadow. And I'm going to position this shadow. Zero pixel, five pixel, and zero pixel. And also I'm going to use a color for this box shadow. Hass tag, CCC. It's provide light gray color to our shadow. Now with that value, I want to use another value, which is inset. Also, I want to set shadow inside part of these rings. That's why I use inset value. And then I'm going to copy the value, and I'm going to paste it here. I'm going to set this file. Our next property is box sizing, box sizing. And here I'm going to use Border works value. And also, I'm going to use another property which is border radius, border radius, border radius, 50%. If I set this file, you can see the result. I know it is still not clear for you, and now I'm going to increase the circle size one by one. For that, we need to select all the Spen tag one by one. So let's select all the spent tag one by one. S type dot, loader or Spen tag, span. Colon, and now I'm going to use nth child selector, NH child. At first, I'm going to select our first spentag I'm going to type one here. Then inside the alivss we need to position our first spend tag. At first, I'm going to use top property, top zero. Our next property is lipped, p, also zero. And then come our another property, which is bottom, bottom, also zero. And our last positioning property is right, right, also zero. With that, I'm going to use another property which is animation delay. Animation delay. For now, I'm going to leave it blank. I will tell you later why I use this property. If I set this file, as you can see, it create our first circle, and this is the biggest circle from our group. And to create our second circle, I'm going to duplicate this whole section. At first, I'm going to change the selector, nth child two. With that, I'm going to change top value, left value, bottom value, and right value. Let me show you top ten b, ten, bottom position, ten, right position, ten. If I set this file, here you can see nothing is happening here. I do not create another circle because we do not provide any unit. Here we need to provide unit. I want to provide pixel hell ten pixel, ten pixel and ten pixel. If I set this file, now you can see the result. There is another circle inside this circle. Then one by one, I'm going to create this circle. So I'm going to duplicate this section, and here I'm going to select child three. And also, I'm going to increase the position values, 20 pixel, 20 pixel for bottom and 20 pixel for right. If I set this file, you can see the result. It add third circle in this group, and now I'm going to fast forward this section to complete the process. So as you can see, we complete the creation process. If I set this file, you can see the result. You can see all these circles are aligned perfectly, and here you can see, and here you can see every time I add ten pixel value to our previous value. In our 13 selector, we use top value 120 pixel. But in our next selector, means in our 14 selector, we use 130 Vale. In that way, in our 15 selector, we add ten pixel and we pass 140 wave. So we successfully create our circle. Now we need to animate it. Just we need to play with the Zatdex value to create the wave. So let's create a keyframe for this animation. So I'm back to the top section, and here, I'm going to create the keyframe. At the red keyframe. And then we need to type the keyframe name and our keyframe name is animate. Then inside the calices, we need to select the position. To select the position of animation, I'm going to use percentage value. First, I'm going to select two position 0% position and 100% position. Then inside the alive resis at that position, I want to transform these circles. So here I'm going to use a property name transform, Transform, and I'm going to use Translate Z value. Translate Z. And I want to translate it -100 pixel at Z x's direction. Next, I'm going to select 50% position, 50%. Then you at the Cali says, once again, I'm going to use transform probity, transform, Translate Z 100 pixel. And now we need to call this animation in our spentag. Here I'm going to type animation. Our animation name is animate. And I want to run this animation for 3 seconds. With that, also, I want to say it is in out animation mode. At last, I'm going to pass animation iteration count value, which is infinite. If I set this file, as you can see, all these circles move together up and down because we use Z index in. Here you can see it move all the circle together at the same time. Now we need to use delay property, animation delay. Using this property, we can delay our animation, and it's very necessary to create the wavy circle. So here, at first, I'm going to use 1.4 second delay. If I set this file, as you can see, up 1.4 second, it start the animation for our first child. Similarly, for our second child, I'm going to pass 1.3. Second. And for our third child, I'm going to pass 1.2 second. And for our fourth, I'm going to pass 1.1 second. And for our fifth child, I'm going to pass 1 second. And for our sixth child, I'm going to pass 0.9 second. For our seven child, I'm going to pass 0.8 second. And for our eight child, I'm going to pass 0.7 second. And for our nine child, I'm going to pass 0.6 second. For our ten, I'm going to pass 0.5 second. For our 11 child, I'm going to pass 0.4 second. For our 12th child, I'm going to pass 0.3 second. For our 13 child, I'm going to pass 0.2 second, and for the 14th span selector, I'm going to pass 0.1 second, and for our last one, I'm going to pass zero second delay. I successfully set animation delay property, all of this span tag. If I set this file, now you can see the result. As you can see, now it's create perfect web circles. And now it's look pretty amazing. It's created a very beautiful infact waves. I hope now it's clear for you how we can create this web circle animation. So thanks for watching this video, stay tuned for our next project. 9. Animated button with CSS animation: Hello, everyone. In this tutorial, we are going to create this nice shaking O animation for our button. As you can see when I hover my card on this element, it shake the button. To create this button, we are going to use CSS animation. I want to say CSS keyframe animation. Let's see how we can create this shaking effect. Let's jump into the studio code. So as you can see side by side, I open my Visual Studio code editor and my browser using Live Server extension and I already create an STMA document named index dot TML. At first, inside my body tag, I'm going to create an anchor tag, A, and here I'm going to type Hober me. Her me. And as you can see, I already link with style file style CSS. I'm going to set this file. After set this file, up to set this file, you can see the anchor tag in my browser. Next, I'm going to jump into the CSS page. Here at first, I'm going to style the body section, body. Then inside the cli says, first, I'm going to assign height to our body height Hermon to use 100 viewport height. Then I'm going to define this way, display flakes because I want to place the button middle of this page. That's why I use this flakes. Justify content, justify content centered. Also, a line items center. After set this file, as you can see, it plays this anchor tag particularly and horizontally middle of this page. Next, I'm going to add dark gray background to this body. Here I'm type background, and I'm going to say background has tag 222. It's going to provide dark gray colored. Then I'm going to target the anchor tag. A, and inside the Cali verses, first, I'm going to remove the underline tight text decoration. I'm going to make it none. After that, I'm going to define color, colors, and here I want to use white color, White. As you can see, it already suggests me some propriety and value. Next, I'm going to define font family. Font family, and here, I'm going to use Sensai. After that, I'm going to define font size. Font size, I'm going to use 40 pixels. Then I'm going to define border, border, and here I'm going to use three pixel solid border. After that, I'm going to define watercolor, white, and I'm going to set this file. Then I'm going to define some padding from top and bottom. Padding from top and bottom, I'm going to use 40 pixel and left and right, I'm going to use 80 pixel and I'm going to set this file. Set this file, this is how our button look like. Next, I'm going to use transition propriety. Transition and here I want to run transition to all of this property and I'm going to set time. Transition time is 0.3 second. I'm going to set this five. Next, I'm going to create a hover selector of this anchor tag. Here I'm going to tie anchor A, colon, Hovl. Then inside the caribasF property I'm going to use border. The first property, I'm going to use border. I want to change three pixel solid border, solid. And here, I'm going to define color, different color. So here, I'm going to set color A four, four, A four, four, 336, this color code. This kind of orange color orange red color. I'm going to set this file. After that, also, I want to change the text color. Somebody uses the same text color. So I copy the color code, and I'm going to type color property, color I'm going to paste this syn text color. I'm going to set this file. After set this file, if I Hoberm cursor, you can see the sin. This is how it changed the border color, also the font color. Now let's create the animation keyframe for the animation. So type at the rate keyframes and our keyframes name is shake because we are going to shake this button using this animation. Then inside the aliases, the first 33% of duration, I want to I want to rotate this whole element ten degree. I want to type transform property, transform, and I'm going to use rotate value, rotate. I want to rotate this element ten degree, ten DEG semicon to end this slide. At 33% of duration, it's going to rotate the element ten degree. Then I dubate this section and here I'm going to say 66%, 66% of duration. I want to rotate this element minus ten degree. I want to say opposite direction, lip side. Then at 100% of duration, I want to rotate this element, right side again, so I use positive ten degree and I'm going to set this file. Now, when I hober my car on this button, I want to call this animation. I'm going to call this animation in Hobart selector. So to type animation and our animation name is shape. Next, I'm going to say the animation duration which is 0.3 second. Then animation direction is linear. After that, we need to pass the animation time. How many times we want to run this animation? I'm going to type animation introduction count value one. That's it. Now, if I set this file and hover my cursor on this button, you can see this beautiful animation effect. This is beautiful shaking animation. When I hover my cursor on this button, as you can see, it shake the button within 0.3 seconds. At first, it routed the button at right side, then it roted the button at left side, and then it routed the button right side again. If I increase the duration time, if I make it five second and then set this file and whoever my cards are on it, now you can notice at first it going to tilt this button at right side. Then after ten degree, it's going to rotate it left side, then again, it's going to rotate it right side and it complete the animation within 5 seconds. For better experience, I'm going to use the previous value 0.3 second. I hope now it's clear for you how we can apply animation keyframe in our buttons. Thanks for watching this video, stay tuned for our next project. 10. CSS3 3D Rotation Animation Effects: Hello, guys. It's good to see you back. Once again, I am back with a new project related CSS animation. In this project, we are going to create CD rotation animation. And here you can see the demonstration, how it's rotate, and how it slop. So without wasting your time, let's study practical and see how we can create this kind of three D animation. Here you can see side by side, I open my Visual Studio coordinator and my browser using lip server extension, and I already create a tMLFle named index dot E stim. And I also link this file with our file, Style dot CSS. So first, inside the body tag, I'm going to create a DevTef and also, I'm going to set a class. Class box. Then I set this dip tag, I'm going to create dip tag, D, and I'm going to set any class then for this dip tag. Then inside this dip tag, I'm going to create total four span tag, span. And I'm going to duplicate this span tag three time. Now we are PlotlF span tag. If I set this file, you can see nothing in my browser. So we successfully done our TML part. Now, let's jump into the styler CSS file and start styling our elements. First, I'm going to start with body tag. So here I'm going to type body. Then you said the CalssF I'm going to use margin property, margin zero. Then I'm going to use padding property. Padding, zero. Our second property is background. Background, and I'm going to set a background color. For that, I'm going to use RGV do RGB. For red, I'm going to use 66. Also, for green, I'm going to use 66, and for our blue, I'm going to use 66. If I set this file, as you can see, it fill our page with dark gray color. You can use any color as you want. And now I'm going to style this box section. For that, I'm going to select dot or class name is box. Then it at the alissO first property is position, position absolute. Our next property is top top. I want to position it middle of the speech. That's why I'm going to pass 50%, 50%. Our next property is it, it also 50%. Then I'm going to use transform property, Transform. Here I'm going to use Prospective Perspective. Perspective 1,000 pixel. Without perspective, our three d model not work properly. Next, I'm going to say Dan with width 200 pixel, then height, height, 300 pixel. Also we need to use another property which is transformed style. Transform style, I'm going to use preserve three D will. And now we need to style this one, this deep which is inside this parent D. So here I'm going to select dot box space D. Then inside the alivsO first property is position, position absolute, and our second property is top top, zero. And also I'm going to use P zero. Then I'm going to say height and width to this div element. With 100%. Also height, 100%. Now, let's set a background color and see how it look. Background I'm going to use white color. If I set this file, you can see the result. Here you can see it creates a box, but it is not aligned in middle of this page. Now we need to align this box, middle of this page. For that, here I'm going to use calc value. Let me show you. So here, I'm going to type calc function, CALC. Then inside the round verses, we need to calculate the position, as you can see, our height is 300 pixel. Here I'm going to minus 150 pixel. From 50% of position hub of the height, which is 150 pixel. Similarly, I'm going to use Cal function for our lift position. CALC is at the roundres 50% minus, here you can see, our width is 200 pixel, so I'm going to -100 pixel. Now, if I set this file, as you can see, now our DV is perfectly middle align of this page. Then back to the dip section, and here I'm going to use transform style property, transform, transform style, transformed style, pres up three D. And now we need to style our span tags, which is inside this dip tag. So here, I'm going to select dot box, space, Dave space, span. Then inside the alibassO first property is position, position absolute. And top zero, it also zero. Our next property is display, display, and here I'm going to use block. As we need to set with height with 100% height, 100%. And then I'm going to set background. Background. And for background, I'm going to use linear gradient color, linear radiant. At first, we need to pass the gradient angle, and our gradient angle is zero degree. And here I'm going to provide to three color. Our first color is dollar, if one, if one, if one. Let's start on the ward wrap. Now you can see it clearly. Then our next color is has tag B, B B. It's a light gray color, and our third one is also I'm going to use this color again. Copy the color and paste it here. If I set this file, here you can see the gradient color. It starts with light gray color, then little dark gray color and once again, light gray color. And then I'm going to say border radius to this gradient color. Let me show you. Border radius, 20 pixel. If I set this file, you can see the border radius at the corner. Now, let's remove the background color from the parent div item. So to comment out this line and set once again. Now you can see the result. Now we need to select all the senteg one by one. For that, I'm going to select, I'm going to type dot, box, space, Bev space, span. Colon nth child nth child one. Then inside the round versus, I'm going to use a property named transform. Transform. I want to rotate our first child at X X's direction. So here I'm going to type rotate in, rotate x, and I want to rotate it zero dige. And then I'm going to select the whole section and duplicate it. And now I'm going to select our second child. And I want to rotate this one at xs direction 45 degree. Then I'm going to duplicate once again. And now I'm going to select third child. Here I'm going to say rotation angle -45 degree. If I set this file, you can see the result. One by one, we rotate our spare items. Then I'm going to select all this section and duplicate it once again and this time, I'm going to select fourth child. Now I'm going to set rotation angle 90 deg. As I'm going to set this file. Now I'm going to rotate the whole section at YXs direction. For that, after prospective, I'm going to use rotate Y rotate Y. -45 degree. If I set this file, you can see the result. Now it's look like a three object and you can see all the part of the span tag. Now we need to work with our final part, which is animation part. Here I'm going to call our animation property Animation. Or animation name is Animate. And our animation duration time is five second. And our animation direction is linear. I want to run this animation for infinite time. So here, I'm going to use animation iteration count infinite. And now we need to create the keyframe for this animation. So I'm going to copy the animation name. At last, I'm going to create the keyframe at the rate keyframe, keyframes and our animation name is animate. Then instead the calibs here I'm going to use percentage value at 0% position. Inside the aliases, I'm going to use transform Bbalty Transform. Transform. First, I'm going to say prospective. Prospective 1,000 pixel. After prospective, I'm going to say rotate x value. Rotate, x0t. Then I'm going to duplicate this section and at 100% position, I'm going to set rotate 359 degree. If I set this file, you can see the result. Here you can see it already rotate our object. This three D rotation looks very nice. I hope now it's clear for you, how we can create this three D rotation animation. Thanks for watching this video. Stay tuned for our next project. 11. Animated rainy cloud part 1: Good to see you guys. Once again, I'm back with a new CSS animation project. And in this project, we are going to create Rainy Cloud. It's a very advanced CSS animation project because we are going to use variables. Let's see the demonstration, how it's look. As you can see on your screen, raindrops fall from the clouds and disappear on the ground, and you can randomly notice raindrops. Without wasting your time, let's see how we can create this project. So as you can see, side by side, I open my Visual Studio code editor and my browser using live server extension, and I already create index dot TML file, and I also create style dot SASS file. As you can see, we link our style file with this ETML document. And as you know, we need to start with TML structure. At first, I'm going to create a container, which 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. 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 slip so I'm type star. Then inside the Liss, 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 Bader 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 play property, display. Display flex. 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. And then I'm going to say minimum height to this page. So to type mean height, mean height, hundred H. Our next property is background. Background, and I'm going to say background color. And here, I'm going to say something dark gray color. Dark gray. I want some more darker color. I select color, this one, and I'm going to set this file. This color is good for example and you can choose your own color. Now we need to style the container section. I'm going to copy this container class name here I'm going to type dot container. Then inside the cliras 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, Amsltt Cloud. Then inside the Cali resis, 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 say background color, background, and I'm going to use white background. For that, I'm going to use hexadecimal, has tag if if. 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 Cuperty 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 calivss I'm going to create Blank contain blank 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 plastic middle, we need to move this circle lip side. Here I'm going to use lift property, p 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. At last, I'm going to give it solid color to this box shadow. Here I'm going to tie, has tag, white color, if if if. If I set this file, you can see the result. 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. Thanks for watching this video, see you in the next part. 12. Animated rainy cloud part 2: What pro you guys, this is the second part of this project. In the previous part, we successfully create the Cloud. But in this part, we are going to create the raindrops. 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 in class. Then inside this deep element, I'm going to create multiple span tag for our raindrops. So 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 sin. Let me show you how dash and our variable name is I, then we need to use colon. Then we need to use l 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 rain drops, but you can use as much you want. I'm going to duplicate this line 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 pre. The duplicate it once again here I'm going to use 14. Then again, I'm going to use 18. Let's first forward this section to save you time. And then I'm going to duplicate this work section again. I create 20 raindrops using span tag. If I set this style, 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 calibraces, 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 e to select rain and spantag For that we equ sect spantagRg space, span. Then inst the alibasO first property is position relaty. Our next property is dnwidth height, ten pixel, also width ten pixel. Now I'm going to set diagram color to our raindrops. 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 have 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 gods are perfectly organized, and now we need to keep the rain gods round shape or that we need to use border radius property. 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. I'm going to use animation property. Animation. 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'm to 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 sub the file and see is it worked properly or not. As you can see, animation are work perfectly with 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 o. 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's fallen to the ground. Now we need to change the transform origin position. Here I'm going to use transforms, and I'm going to use bottom Val then come 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 animation duration, then all the raindrops are fallen one by one randomly. If you remember, as you can see in my SML file, we create our span tag with variable and our variable lime is I and we say a random value to this variable, 16, 11, 12, et cetera. I'm going to use this random value to create actual ring. Let's back to the CSS file, and here I'm going to use animation duration property, Animation duration. And also, I'm going to use Cal function, which is a function from CSS, and I want to divide 15 second with or variable I. Here I'm going to type where then inside the roundresses our variable name is I to call our variable, we need to use dash, then I. If I set this file, now you can see our raindrops are fallen randomly. It's 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. I'm going to use two pixel border. Also I want solid color for our border, solid our border color is white, if if it. If I set this file, you can see the result. As we need to remove the raindrops from the bottom. Here I'm going to type bottom ten pixel. I've set this file, now it's worked perfectly. We successfully complete our cloud and rain project. I hope you like this video. Thanks for watching this video, stay tuned for our next project. 13. CSS Loading: Good to see you guys. Once again, I'm back with a new animation project. And as you can see in this animation, how the loading animation work. So without wasting your time, let's see how we can create it. So here you can see side by side, I open my Visual Studio code editor and my browser using L server extension, and I already created a HTML document named index dot HTML. With that, also you create or style your CSS file. So first, inside the body tag, I'm going to create H two tag. H two. And inside the HT tag, I'm going to type Blod. Then dot dot dot. But in my H two tag, I'm going to use data atr. Here I'm type data, data text. Then equal to inside the double course, I'm going to pass the same text loading. Copy the text and paste it inside the double course. If I set this page, you can see the takes in my browser. This is our estimate part. Now we need to jump into the CSS file. At first, I'm going to import a form. Let me shoot. Here you see I import pop in sporm and the fontui is 700 is a bold form, and now I'm going to select Universal selector Star inside the caliss or first properties margin Margin, zero or second properties padding padding also zero or third property is box sizing, box sizing, and here I'm going to use border box. And then I'm going to use font family property, font family, font family, and here I'm going to use pop ins. This font is from sensory family. Sopkoma I'm going to type Sanseri. If I set this file, you can see the result. Here you can see the font result. You can use any kind of font. It is up to you. Now, let's tile our body section. I use body. Body inside the alias is our first property is displayed, and I'm going to use flax. I want to place this text middle of the speech. That's why I'm going to use flex. Then our next property is justify content, Justify content center. Also, I'm going to align this item. Align item center. If I set this file, you can see the reason. Then I'm going to say minimum height. Here I'm going to type minimum height, minimum height, 100 VH. With that, also, I want to say background. For background, I'm going to use RGV color, RGB. Also, you can use any darker color, but here I'm going to use some width three, green value is 40, and blue value is 53. If I set this file, you can see the. You can use any dirt background color. It is up to you. Then next, I'm going to style this H to tie. Here I'm going to tie H two. Then inside the livers, I'm going to type position. Position relative. Our next property is font size. Font size. 14 VW. If I set this file, you can see the result. Now it's look perfect. And now I'm going to set font color. Here I'm going to tie color, and I'm going to use the same RGV color. I'm copying the value and I'm going to paste it here. I'm going to set this file, and now you can see it's matched with the background color. That's why you cannot see the color. Our next property is taketro. For that, again, I'm going to use RGV color. But this time, I'm going to change the veil and our is two, 108 and for blue, I'm going to use 146. If I set this file, you still cannot see this stroke because we do not say stroke. That's why I'm going to pass 0.3 VW. If I set this file, now you can see the reason. Also, you can increase this stroke. It is up to you, and now we need to replicate the shape using Poseo select. For that, I'm going to type H two colon colon before. Then inside the caliorss or first properties contained. And here I'm going to use water function. Now we need to pass this attribute, data text. I copy this attribute and here, I'm going to pass data text. If you notice, you can see our data text and our content is similar. That's why it's going to create the same replica. Our next property is position. I want to position it absolute. Then we need to use top pedal top zero, P also zero. Also, I'm going to say we weigh for now, I'm going to pass 30 pixel. If I set this file, you can see nothing because we do not set any color and height to this element. For that, I'm going to use height property. Height, 100%. Also, I'm going to use color. Color and here, I'm going to use a hexadecimal id, hash tag 01 FE 87. If I set this file, now you can see the result. For now, I'm going to set with zero. It's not going to impact anything. Later, I'm going to show you why we need to use with property. Before I do anything, I want this text in uppercase. Here I'm going to use text transform property, but before I'm going to use semicolon. Then I'm going to type text transform text transform, uppercase. And then also we need to set stroke to this clone. Here I'm going to use this property and value and after color, I'm going to past it. But this time, I'm going to change the veil. Here I'm going to pass zero VH. Stroke with zero VH. If I set this file, you can see the result. If you can notice, here you can see there is no stroke on this clone. Our next property is overflow, overflow hidden. Set this file, now you can see the result. As you can see, our width is zero and overflow is zeran that's why you cannot see the text. But if I increase the width value, let me show you 40 pixel and then set this file, you can see the result. As you can see a slow, it feels the text with the color. Similarly, if I increase the value, 90 pixel and then set this file, also you can see the result. In the animation, we need to play with this property, W. For now, I'm going to make the W zero and then set this file. Next, I'm going to use another property, which is border. Border, right. Border right, and I'm going to use solid border two pixel. Solid. And also, I'm going to use a HA Decimal color. 01 FE 87. If I set this file, you can see the result. If I increase the width this time, so here I'm going to pass 120 pixel and the set this file. As you can see, it look like this line feel the color to this text. Again, I'm going to pass zero. And now we need to play with the animation. I'm going to create a animation. Animation and our animation name is Animate. And I want to run this animation for 6 seconds and our animation direction is linear, and I want to run this animation for infinite time. Here I'm going to use infinite. Now we need to create the key frame. Here time at the rate keyframes. Key frames and our animation name is animate. As you can see, I type wrong spelling for animate. That's why I'm going to correct it. I'm going to type the name animate. Then inside the caliss at 0% position, again, inside the Cali resist I'm going to set with with zero. I'm going to duplicate this section. Now, at 70% position, I'm going to set with 100%. If I set this file, you can see the animation, how it's worked, it's worked perfectly. If I play with some percentage value with 0%, I'm going to pass 10%. Also, with 10%, I'm going to pass 100%. At 0% position, 10% position and 100% position, I want stroke with zero. But at 70% position and 90% position of this animation, I want the week 100%. If I step this file, now it's look perfectly, how it's work. This is exactly what we want. So thanks for watching this video, stay tuned for our next project. 14. Creative Moon Drawing: Hey, there, everyone. Once again, I'm back with exciting project related CSS animation. Today we are going to build a dynamic and visually stunning moon, rotating animation effect. As you can see, we have the central orbit of the moon, and side by side, we place letter M and N, the moon orbit continuously in a smooth circular motion and creating a mesmerizing effect. And here we use g box to position the elements. Here, we creatively style this element and place it at right position. And then just we implement 360 degree rotate animation. Let's start it and see how we can create it. As you can see side by side, I open my iso studio code editor and my browser using live server extension and I already create an STML document name index dot HTML. With that, I create Style census file and I link up this file with this document. Now inside this body tag, at first, I'm going to create a DV element, Dev and I'm going to name it. I'm going to assign a class container, deep dot container. It is work as a wrapper. This continuer going to hold all the element required for this animation. Time to time, I'm going to add the elements in it, such as text, moon, et cetera. Now, let's jump into this tile or CSS file. At first, I'm going to use universal selector star, and then inside the roundress here, I'm going to use padding value, padding property, padding zero, margin, also zo With that box sizing, box sizing, how to use property border box. After that, I'm going to use font family. Font, family, and here I'm going to use Area font, Area. Then I'm going to select body. I'm going to style the body tag, sort of tight body. Then inside the colss the first property, I'm going to use background color, background colored, and I want to use dark gray background, otherwise, dark blue background. So I would like to go with dark gray, some type has tag, 222. And I want to satisfy. After set this file, this is how our web page look like. Then I'm going to use this way flix. This way, flix, Justify content because we need to move all the elements center of this page, some type justify content center, also align item, align, align items also center. Now it's going to horizontally and vertically center all the elements. After that, I'm going to assign a height to this page. Height here, I'm going to assign 100 viewport height, 100 VH I'm going to set this file. Next, I'm going to style the continent deep. For that, I'm going to use its class name, copy the class name and jump into the CSS file type dot container inside the livess the first property I'm going to use height. I'm going to assign 31 EM height. As I'm going to assign width with 31 EM. That's it. Basically, it is a square container. With that, I'm going to add a white border. For that, I'm going to type border border property, and here I'm going to use one pixel solid and our border color is HatagFFF I'm going to sub this file. After sub this file, after set this file, here you can notice the square box with one pixel solid border. Also, I'm going to define position and I'm going to make it absolute. With that, I'm going to define color, I'm going to set font color white, fully visible. Then I'm going to define font size also font size pixel. I think 20 pixel is great for each. I'm going to sub this fi. Now the container serve as a style frame. Style frame for our animation. Now it's ready to hold the text and the orbit elements. Now, let's jump into the index ot estimate file and create this structure inside the container. Here I'm going to take total two paragraphs type P, and I'm going to assign a class, and I'm going to name it later. And I'm going to do this line. Our first paragraph hold in character, and our second paragraph hold in character. I'm going to set this file. After set this file, you can see the result. You can notice it position it top left corner. Next, I'm going to style both the letters using its class names. I copy its class ename later and back to style css file and I'm going to select dot later. Inside the calibraces, first, I'm going to define size font size, some type font, size and I'm going to make it 3.5 am, 3.5 AM. I will satisfy. After satisfle this is how it look like. Also, you can use little bit larger font, it is up to you. Next, I want to position the letters. I want to place one letter left side and another one right side. For that, we are going to use flexbox. Here I'm going to use the display property display, and I'm going to make it flex. After that, align item for vertical alignment center. Then justify content, justify content. Here I'm going to use space between space between. I'm going to subifyteri file, this is how it looks like. Now we successfully place the letter at right and left side. Next, we need to create the orbit. For that, we need to go and jump into the index file and between these two ledgers, I'm going to take a deep tag, Dev dot orbit. I assign a class name orbit to the Dep Elegant. And inside this orbit deep element, I'm going to take a P tag, paragraph and herm pass O, and I'm going to sub this file. Now you can notice the O is placed between the two letter. Basically the orbit de placed between these two letter. Now let's tile this orbit div and P element, which is inside the orbit div element. Now I'm going to jump into this style CSS five. Here I'm going to type orbit and inside the carbassF I'm going to position it position, and I'm going to make it relative. Then I'm going to define heighten to this orbit d element. So type height. Here I'm going to assign height 18 point lm five N. And I'm going to sub this file. And also, I'm going to defined with 18.18 0.7 5:00 A.M. So here will create a square box. And to make this square box circular, I'm going to use border radius property, border radius, and I'm going to make it 50%. I want to sub this file. And to understand the border, I'm good at a border, some type, border I want solid border, one pixel, solid border, solid, the border color is has tag if if F. Now you can see the orbit is the circus shape inside this continua deep. Now, let's work on the P tag, which is inside the orbit, some type, dot, orbit, P paragraph then inside the arises, first, I'm going to define position and I want to make it absolute. After that, top Ami pastp value 4.7 M. Also late nd pass, late value two EM. Then I'm going to define font size also, font size, and I'm going to make it 3.5 am. I'm going to set this file. Apres this file, this is where we place this circle. Urec this file, this is where we place the O later. Basically, I want to say the liar O now position on the orbit circle and it gives the exact look we want. Now, let's create the move. For that, we need to jump into the estal file and now below the P tag here I'm going to create another dip tag, the dart moon. I notice of this file, this element would be a smaller circle which representing a moon. Also, it going to rotate along with the orbit. Now let's style this moon element. Here inside the style file, I'm going to target wn moon inside the Clsus. At first, I'm going to define height, height, I'm going to set it height eight EM. Also, I'm going to say with EM. As we need to make our moon round, so I'm going to use border radius, border radius, I'm going to make it 50%, 50%. With that, we need to provide a color to background color. I want to see the background color, some tight background color, and here I'm going to provide hastag a five, a five, a five, I'm going to sub this file, but I want to position this moon center of this orbit deep. For that, we are going to use Flexbox probity. Inside this orbit, I'm going to type, display, I'm going to make it flex, justify content, center, also align, align items centered, and I'm going to sub this file. I sub this file, as you can see, it pays the moon element, center of this orbit. Now, let's assign little box shadow on this moon, but before I'm going to position it position, I would make it absolute here I'm going to use box shadow to provide a growing effect. Some type box shadow here I'm going to use a Vd here I use this box shadow value to create this growing effect of this moon. And the shadows are spaced equally. For the first value, here we spread it 0.6 am and for the second value, her use 1.2 am and for the third value, her use 1.8 am. In every stage, we extend this shadow up to 0.6 am and create this hello effect. Finally, we need to work on the spinning animation. We need to rotate the orbit. Now let's create the animation. Here I'm going to make the key frame at the red key frames, and I'm going to name the animation spin. And inside the less at 100% of duration, I want to apply transform property, transform, and here I'm going to use rotate value. Rotate, and I'm going to pass rotate 360 degree DAG. That's it. I'm going to satisfy. Now, we need to call this animation in our orbit. Now, let's jump into the orbit deep element, and here, I'm going to call the animation animation and our animation name is spin. And our animation duration is eight second. Animation timing function is linear. Animation iteration count infinite because I want to run this animation for infinite time, so I pass infinite and I'm going to set this value. After set this value, as you can see, it start or animation and it rotates the whole orbit element 360 de within eight second. Now, we need to hide this square box and the orbit path. For that, just we need to hide the border value. So to type, some comment out this property. So this is hide the orbit, circle, and then I'm going to hide this water value from the container, this square box. And I'm going to set this file. After set this file, here you can enjoy this beautiful moon rotating effect. So I hope now it's clear for you how we can build this beautiful animation. So thanks for watching this video Stadium for our next project.