CSS Animation Projects : 50 Hands-On Web Animation

1. Introduction : Hello and welcome put this exciting journey into the world of CSS animation. My name is Jonatha Shoko. I am Fullstac web deblooper, Python programmer, and online instructor. In this course, we will deep dive into 50 real world animation project. That will not only sharpen your skill, also help you to create visually stunning and interactive websites. We will start with some fun yet powerful projects like CSS button Transformation Projects. Here, we will design engaging and modern buttons animation. Then menueffet with transition. Here, we are going to adding smooth, creative transition to your navigation menus. Next, image effect with transition. Giving light to your images with hover and transformation based effects. After that, I'm going to cover CSS keyframe animations. Here we will unlog the true potential of CSS to build dynamic and eye catching motions. And finally, we will go a step further with JavaScript animation project, combining the power of CSS and JavaScript for advanced animation. By the end of this course, you will have 50 completed animation project in your portfolio, which you can proudly showcase to your employees and clients or even use in your own personal projects. Let's begin your web pages to life with animation projects. Let's get started. Thank you very much. 2. Creative rotating button effect using css: So this is our first project using CSS transform properties. We are not going to use keyframe to animate the element. So as you can see in this example, here we create a button. If I open my car on this button, here you can see a beautiful button transition effect. So we are going to build today in this project. So let's get to the isal Studio code editor and see how we can create this project. So as you can see, I already opened my isal Studio code editor. And I already create TML file named index dot TML. Also, we create another file style dot CSS, and I already open this website using my live server. This is our website. It's completely blank. Then let's back to the user studio code. At first, inside my body tag, I'm going to add an NCat tag, A, and HI hashtag. Inside this Anca tag, I'm going to type hover Me. Then I'm going to jump into the CSS file style CSS. I already link this file with this estemL document. Here we are going to start this styling. At first, I'm going to target the body tag. Then inside the liss I'm going to assign height, height, and I'm going to assign 100 VH. I want to place the anchor tag middle of this page, so I'm going to use the propriety. Display flakes justify content, Justify content center. Also, I'm going to use align item, align items center. I'm going to set this file. After set this file, if I back to my browser, as you can see, it centered the text, I centered the anchor tag. Now I'm going to open my browser and my code editor side by side. As you can see, here we open my browser and my code editor side by side for our convenience. Using flexbox, we centered this element middle of this page horizontally and vertically. Basically, it has nothing to do with animation. If you want to learn flexbox and greet, you can enroll my other courses. Now, let's style the leak. I want to target this link using its tag name A, and inside the calyces, first property, I'm going to use text decoration, text decoration, text decoration, none, and I'm going to set this file. If I set this file, as you can see, it going to remove this underline from the text. After that, I'm going to assign a font color. So type color, and I'm going to assign black color. I want to use black color font for this example. Then I'm going to define the font family, font family, and I want to use aerial font, aerial. After that, let's turn on the trouble Raf view and Waraph. Then after that, I'm going to assign font size font size, and I want to assign 45 pixel font size, 45 pixel. Then I want to assign Border. Border. I want solid fight pixel border, solid, and border color is black also. Black. Then I want to define padding. Adding from top and bottom, I'm going to define 30 pixel and from left and right, I'm going to assign 80 pixel. At last, I will provide the position of this element, some type position relative. I'm going to set this file. After set this file, this is how our button look like. Now, in order to create nice green background, we need to use before pseudo element. If you don't know any knowledge about pseudo elements, it is allow us to create before the estimL element, otherwise, after the estimal element using CSS. So I will select anchor tag and here I'm going to use before p zero class before d inside the alias, here I'm going to use a property called content, content, and it's a empty content. And to define the empty content, we need to use codes single cops. After that, we need to define the position position and I'm going to use absolute. Also, I need to define the starting position, so I'm going to type lab zero and from the top also zero. So now we have our before pseudo element and its position is top left corner of this link. Right now, before psudoelement is placed at top left corner of this link. Now, let's add the background color. Background color instead of using green, I would like to go with yellow color. I already copy a Higa value for this background color and I'm going to paste it here. It's going to return orange color. And then I'm going to assign height to this before positive element, height, 100%, 100%, and also next, I'm going to assign wed also 100%. And I'm going to set this file. After set this file, this is how it looked like. So now you can see the before positive element appearing as a background color of this anchor tag, and also it take full width and height of this link. But the problem is this element, height the text of this anchor tag. Here we cannot see the Hoberm word. We can easily fix it. If I pass, if I use this propriety Z index, and if I use minus one value, then set this file. Now it resolves the problem. This text will show up again in front of this orange background, and now we need to rotate this yellow background clockwise from this direction. And we need to rotate it from the bottom lip corner. So first, we need to define the transform orgin from which position I want to transform this before positive element, Sandro type transform Oisin and I'm going to provide the value bottom leg from this corner. Then I'm going to use another property called transform, transform, and I'm going to use rotate value, rotate inside the round verses, I want to rotate it up to -90 degree. After I set this file, this is how it look like if I rotate this element -90 degree from that corner and then I'm going to add it transition. Transition transform, and I want to assign once again for this transition 1 second. I want to transition this transform property for 1 second, so it's going to complete the rotation in 1 second. Next, we need to create the Huber selector. If I uber this element, then I want to rotate it up to zero degree. For that, here, I'm going to type. First, I'm going to select the anchor tag, then I'm going to use Huber selector, HoberPosito class, Hover. Then after that, I'm going to select the before posito class before. Then inside the car says, I'm going to use transform property again, transform, and again, I'm going to use rotate value. This time, I want to rotate this element up to zero degree. I want to say I want to move this element to the original osition. Now, after I set this file, if I hober over this link, you can see the result. As you can see, when I hober my car on this element, it rotate the before element zero degree. So it's working. But the problem is we need to hide this orange background outside this box outside this border area. It is very simple to hide this element. For that, you need to go jump into the anchor selector and here you need to use a property called overflow. Overflow herein, and you need to set this file. After set this file, you can see the result. Basically it hide the element outside of this border area, but if I hober my cursor on this element, you can see the result. This time, you can see this beautiful hoar effect, Huber button effect. This background is only visible only in the anctg area. Outside the anchtg area, it not visible because we hide this element. And if you want to change the position of this rotation, yes, you can. Let me show you how, but before I'm going to uncommend this line, because we need to understand how its work. Now this time I want to rotate this element from this corner bottom right corner. So instead of bottom left, I'm going to use bottom right. I'm going to set this one. And now you can see whenever I Hobe my cards are on this element, this orange color element rotate from the bottom right corner. But if I change the value of rotation, if I make it 90 degree instead of using -90 degree and then this file, you can see the different result. This time, it's going to rotate this element from anti glaucois. So if I hop my car on this element, you can see the result. And if I use the overflow property overflow hidden and save it again and hover my caror on this button, you can see the result. So here we change the position of the rotation, if I change the value of this transform origin and transform value. So this is how we can create this beautiful button hover effect without using animation, to use transition properties. Using transition and hover, we can do a lot of things. This is it for this tutorial. In our upcoming Tutorial, we are going to cover lot of animation projects. So thanks for watching this video, Stay tuned for our next Tutorial. 3. Swipe button effect using css: Hello, everyone. In this project, we are going to create this beautiful, nice swipe Heft. When I hover over this link, as you can see, a background swipe smoothly to this button and it's cover the button background. Also, it's cheesy button text color. When I remove my casa, again, it's back to its own position. Let's see how we can create this beautiful Heft. So as you can see side by side, I open my z sto code editor and my browser using Live Server extension, and I already create an TML document named index dot TML. With that, I already include style CSS file in this page. Basically, we are going to create a swipe Hoverifi button. So at first, in my body tag, I'm going to add an anchor tag, A, and hero type hover me. And I'm going to set this file. Up to set this file, as you can see in my page, by default, it place it here at laptop corner. Next, we need to place this link at the middle of this page. For that, we need to jump into the tile dot CSS file. Here, I'm going to select the body tag body then inside the Curses, I'm going to assign height to our body. Height 100 VH, 100 view foot height, and display here I'm going to use flex. Then justify, contain, justify contain center. And also, I'm going to use another property called aligns align items center. And I'm going to set this file. After I set this file, this is how it look like. Now it takes the anchor tag horizontally and vertically middle of this page. Next, we need to make this link nicer. For that, I will target this anchor tag using its tag name A. Then inside the curly recess, at first, I want to remove the underline from this anchor tag. For that, I'm going to use property called text decoration. Text decoration, none. After that, I'm going to assign a color, color, and I want to assign a hexa Value, hashtag, 35, 14 and 35 again. It is a purple colored. Then I'm going to assign font family font family, and here I'm going to assign area. Aerial font. Next, I'm going to assign font size, font size 40 pixel. After that, after that, I'm going to assign border. Border, I want three pixel solid border. I'm going to use the same border coolor as font. I copy the hexa Velo and I'm going to paste it here. Then I'm going to set this file. After I set this file, this is how it looked like. Now we need to add padding in this angle link. For that, I'm going to type padding. From top and bottom, I'm going to add 40 pixel and from left and right, I'm going to add 80 pixel. I'm going to set this file. After I set this file, this is how it looked like. Also we need to define a position. Position and position, I want to assign relative. Also, we need to assign transition because without transition, we cannot animate this button. I'm going to type transition and I'm going to add all and I'm going to run in for 1 second. I pass one and I'm going to set this file. After set this file, this is how it looked like. Now it's look very nicer and now we are going to working on Swipe Effect. So the idea behind this wife effet, we need to create a before pseudo element. That will take up the full width and height of this link. Then we will translate it outside the link. And if we hober this link, then we will remove the translition. So it's going to return to its own place. Now, let's create the pseudo element before pseudo element. At first, I'm going to type, I'm going to set the anchor tag then before. Then inside the class, first, we need to create an empty content. Contain is empty, and it is a empty content. And so we will do in this line. Then we need to define the position, position, and I'm going to assign absolute. Next, we need to place this element at top lip corner. Here I'm going to type lap t zero, top also zero, and I'm going to assign height, height, 100% Width, 100%. Then I'm going to assign the background color, background color, and I'm going to assign the same background color, so I paste this link this hexa V I'm going to set this file. After set this file, as you can see, as you can see, our pseudo element appear above the Huber Mi text and it's bar text. We need to use Z index value to resolve the problem. I'm going to assign Z index, and I'm going to pass value minus one. I'm going to set this file. After set this file, after I set this file, now it go behind the text, but it is not visible because of the text color and the background color is same. And now we are going to create this swiping effect from the late that will be easily done by the transition. So we need to move this element from the XXs direction. So I'm going to use transform property, transform, and I'm going to use translate X value, translate X, Translate x, and here I'm going to pass. -100%. And I'm going to set this file. After I set this file, this is how it looked like. Now it's go beyond the border. Now it move this element 100% lip side because we use minus width. Also, our text is visible because of white background color. Now when I hover over this link, I want the before pseudo element back to its own place. Also I want to change the text color into white. When I hover over this link, so I'm going to select this link, I'm going to create the Hober selector at the red, ATAC, colon, before selector. Then inside the class, I'm going to transform, transform, translate X, and amnopas zero. This means it going back to its own place again. Also, I want to add a smoothing effect, so at transition. With that, we need to define time, so I'm going to define 1 second. So after set this file, when I hover over this link, as you can see it back to its own place again. Now we need to change the font color of this text. Also, we need to hide the background outside the link. And it is very simple to hide the overflow element. Just we need to go and jump into the anchor tag, then we need to use the overflow property overflow hidden. And I'm going to sit this file. Upset this file, as you can see, it hide the element, the fore positive element. And if I hop my cars are on this text, as you can see, again, this slide appear, is back to its own place. So the background is invisible outside ding, and also we got the effect that we want. And finally, let's trace the text colored. So at first, I'm going to select the anchor tag, A, hover. Then inside the car ***, if I ho this link, I want to change the color, color white. I'm going to set this file. So after set this file, if I hover my cursor on this link, as you can see, it's become white and it also happened smoothly because we add transition all in our anchor tag, transition all. Now we understand the concept of swipe effect. If you want to change the direction, yes, you can. You can easily change the direction. You can appear this one, this slide from the right side, also from the top and bottom. Now let's change the direction. I want to appare this slide from the right side. For that, you need to change it on one line. I'm going to duplicate this line and comment out previous one. This one is for lip. I'm going to type in my comment lip side. If I change the value, if I make it positive, then it's going to place this one at right side. After set this file, if I back to my browser and hot this, now you can see it coming from opposite direction, right side of this box. So this is how we can change the direction. I hope now it's clear for you how we can create this effect. Thanks for watching this video, stay tuned for our next project. 4. Button hover Effect: Hello, everyone. In this video, we will be creating beautiful Haeffet. If I hover my cards on this button, you can experience this Haeffet. So let's see how we can weld this beautiful effect. So as you can see, we are in my results studio code editor. And here I already opened my previous TML document in Exot TML. In our body tag, we already create this anchor tag. Also, we link with Style Dot CSS file. And if I jump into the style CSS file, then as you can see, we already align these anchor element horizontally and vertically middle of this page over me. I re use this code because I don't want to make our projects very long. And now I'm going to target this anchor element. I'm going to type A, then inside the clivsF property, I'm going to use padding, padding, and I'm going to assign 40 pixel from top and bottom and 80 pixel from left and right. Then I'm going to use another property called font family. Font family, I'm going to use sensory. San Salk. Next, I'm going to remove the underline, so I'm going to use text decoration. Text decoration, none. After that, I'm going to define the font size. Font size, font size, and I'm going to define 45 pixel. Then I'm going to add a color to this font. Some of you use color, and as a color, I'm going to use hexa value 26, 26, 26, this color code, kind of dark gray. Then I'm going to define letter spacing between the letters. So I want to type letter spacing, and I want to add two pixel letter spacing. Next, I'm going to add border. Border I want to add five pixel and solid border, so it. Also, our border color is the same color as font, copy the color code and I'm going to put it here. After that, we need to define the position position relative, and also we need to define the transition. Transition, and I want to transition it for 1 second, one is. I'm going to set this file. After set this file, this is our button look like. Now we need to use a pseudo element, and I'm going to use before pseudo element. It is allow us to create an element before the element. I'm going to create the before posed to select I'm going to, I'm going to target the element A, colon, BF. Then inside the alivss first propity I'm going to use to create an empty content, so type content CONTENT content and here I'm going to create an empty content. Then semicolon to end this line. After that, I'm going to define the position. Position, I'm going to use absolute. Then we need to define the position where I want to put this element, this empty content element. I want to put it, I want to place it at that place at that corner. So from the top, I'm going to pass zero and from the left, I'm going to pass also zero. Then I want to define with, and I want to use 100% weight of this container. 100%. Also, I'm going to assign height, height, also 100%. Then we need to define a background color to this element. Background and background color as a background color, I want to assign the same background color, so I copy this one. I paste this one and also, I'm going to add it transition. Transition, I want to transition it for 1 second, and I'm going to set this file. After I set this file, this is how it look like our element Covert D text, and we need to use Z index value to make apirDtt again. Now you are not able to see the link anymore, the link text anymore because this before element appear in front of it and we know how to resolve the problem using Z index. Now let's talk about rotate field. Are you remember rotate x with earlier in our previous section, we already learn rotate x and rotate Y vds. Using rotate x, we can rotate our element along the Xaxis and using rotate Y, we can rotate the element along the Y axis. Let me show you that. If I open this website, this is the example of rotate X. If I Her my cursar on this rotate x element, you can see the result. This is how it rotate. I rotate this element 80 degree and if I rotate it 90 degree as you can see, and then hover my cars on it, now it sometimes it completely vanish the element. If I rotate this element to 90 degree, it will make it valish at the same way if I hober my cursor at rotate Y element this option, as you can see, this is how it sued this element. This is what rotate X and rotate Y do. Now let's back to the code. Here, I'm going to use another property called transform, transform, and I'm going to use the value rotate X, this one, I'm going to rotate this element 90 dg degree. I'm going to set this file. After this file, as you can see, it vanish the element because as I told you, if I rotate this element at Xxs from the xs 90 degree, it going to vanish the element. Suppose this is the element. If I rotate the element from the xs at 90 degree, as you can see, it vanish the element. Just you can see a single line. So this is what we apply in this element. It disappeared this before psudoelement. Now, if I hover my Kara on this element, I want to make pseudo element zero again. For that, I'm going to create a Her selector s type and categ A, then I'm going to create a Her selector hover, then I'm going to use before positoclass before. Then inside the aliases I'm going to use the same property transform, copy it and paste it here, but this time I'm going to use zero degree. I'm going to make it zero again, zero DEG after set this file, if I back to my browser and my cards are on this element, as you can see, now it's back to its own place again. It rotate the element at zero degree. Now you can see, again, it height the text. Because of once again transition, we can experience this rotation very smoothly. Also we need to change the text color when we hover over the link. We need to convert it into white. So when we target the link, otherwise, hover over the link, hot, then inside the color recess, I'm going to change the color color and I'm going to make it white. I'm going to set this five. Next, I'm going to move this pseudo element one step back. So here, I'm going to type Z index minus one. That the text show in front the element. After set this file, if I hober my cars on this element, you can see the result. You can experience this transition. If I hober my cards are on it, it rotate the element at zero degree and also it changed the text color, and I create a beautiful buttonhver effect. Now what? If I rotate this element at YXS if you create another Posido element using Uter let me show you. I'm going to duplicate this section and this time, I'm going to create another element up the element. I'm going to use Ater selector, after. Then this time, I'm going to rotate it at YX. Y, 90 degree at YXs. Also, I'm going to copy this section, Du get this section? This time, I'm going to hover it on Ater positoGlass. And also we need to change the rotation value. We need to make it rotate Y. And I'm going to set this file. After set this file, if I hober my Carter on this element, here you can experience a beautiful button effect. If I hober my car on this element, it rotate both the element. Before element also the after element from 920 degree. That's why it created a beautiful hover effect. So I hope now it's clear for you, how can we create this beautiful button hover effect. So thanks for watching this video. Stay tuned for our next project. 5. Button glowing effect: Hello, everyone. In this project, we are going to create this effect when I hover over this link. Here you can experience this effect. Now let me show you the snow demonstration. What exactly is happening here. When I hover over this link, you can experience this result. After Her over this link, as you can see, it changed the background color. Also, you can notice that there is a thick white line tilted as 45 degree and it passing the link at the same time when I hover the link and also change the background color. We are going to achieve this effect. Let's back to the user's studio code editor. As you can see, we already create TML document name index dot TML inside our body tag, here type A and CTTagHber me. Then I already connect a CSS file with that style dot CSS. And if I go jump into the style CSS file, as you can see, at first I provide height in our body section, then we use displayflakes, and justify content center and Align In center to position the anchor tag middle of this page vertically and horizontally. Now, at first, I'm going to add a dark gray background, some tight background color. And I'm going to use a hexa value has tag Has tag 22, two, and I'm going to set this file. After I set this file, as you can see, this time it changed the background color as dark gray colored. Next, I'm going to target this anchor tag. I'm going to style this button. So you type A, then inside the clivus first property, I'm going to use takes decoration, text decoration. Takes decoration, I'm going to use non property. Then a remove the underline from the text, I'm going to assign a color to this text, color, and I want to assign white color white. Next, I'm going to assign font family, font family, and I want to assign font family Sans. Then I'm going to assign font size. Font size, I want to assign nearly 40 pixel font size, 40 pixel. I think it's enough for it. I upset this. This is how it look like. Now I'm going to add a border, a solid border. Sort of type border property, and I want three pixels solid border, solid. Then also, I'm going to assign a border coolorF the border color, I'm going to add white color, white, and I'm going to set this file. Then I'm going to add padding, padding from some type, padding. From top and bottom, I'm going to assign 40 pixel and from left to right, I'm going to assign 80 pixel. And I'm going to set this file. I set this file, this is how it look like. Then I'm going to use transition property. Transition for transition, I'm going to assign transition for all of these properties so all, and then I'm going to define the transition duration, which is 0.3 second. Then I'm going to define the position position relative. And I'm going to set this file. After I set this file, this is how it looked like. Next, I want to change the background color when I hover over this link. I want to make it red color. I'm going to create a hover selector, anchor tag, colon hover. Then inside the colss, I'm going to change the background color some type, background colored, and I'm going to assign red colored RED. Now I precept this file. I I Her over this link, as you can see, now the background color change into red color. And now I want to create the thick white line. And for that, I'm going to use before pseudo element. So I'm going to create the before pseudo element. At first, I'm going to target the ka tag, then, colon, and I'm going to tie before. Then inside the calices, at first, I'm going to create an empty content, contain colon, and it's empty content. Then I want to define background color to this element. Background color, and I want to assign white color. White. After that, I'm going to define the position of the pseudo element. I'm type position and this time I want to assign absolute position. Then I want to place this element at that corner, top late corner. From the top, I'm going to assign zero and from the left, I'm going to assign zero also. Then we need to define within height to this element. For width, I'm going to assign 100%, 100% and for height, let me assign height, I'm going to assign 50 pixel and I'm going to set this file. After I set this file, this is how it look like. This is our before pseudo element. And now I want to move it to the left side outside the link area. For that we are going to use, I'm going to use transform property, some type transform transit X minus, I want to translate it up to -100%. And I'm going to set this file. After I set this file, this is how it looked like. I move this before pseudo element out of this area, out of this cat tag area. And now I want to rotate this element 45 degree. So here, I'm going to use rotate value, rotate. And I want to rotate it up to 45 deg degree, and I'm going to sub this file. After rotate it up to 45 degree, this is how our line look like. Now, if I hooper my car on this button, I want to move this line to the right side to get the effect. Also, we need to assign transition for smoothing effect. I'm going to use this propriety transition, so I copy this one and I'm going to put it here. Now, I'm going to make some changes when I hover over the link in my button. I want to move the before psudo element. For that, we need to create a selector anchor tag, then hover, then we need to use the before psudoelement, before. Then inside the car says, Hey, I'm going to use transform property, transform, translate. Translate, and I want to move it up to 100%, not minus, positive 100%. Also during the botment I want to rotate the elements use rotate 45 D EG. Now after septifive when I hobo over my cars are in this ling, now you can see this element move to the right side. And also you can feel the transition. Now we need to height the excess area, the excess area outside the Anca tag. For that, we need to use overflow property. To resolve the problem, we need to jump into the Anca tag selector and here we need to use a property called overflow, overflow hidden. After set this file, now you can notice the before pseudo element is not visible, but if I Open my casa on it, you can get the beautiful effect. This is how we can build this project. I hope now it's clear for you. Thanks for watching this video, stay tuned for our next project. 6. Text scaling button using CSS: Hello, everyone. Once again, I'm back with a new project related button Hover effect. In this lesson, we are going to create this nice Hover Effect, and we will use before Studoelein to create this Hover Effect. So let's jump into the is Studio code editor and see how we can do that. So as you can see, we are in my is Studio code editor, and as you can see, we already created TML document named index dot HTML. And in the body tag, Harry take and cut tag, and HeartypeH me. Then I already create a style CSS file and I link this file with the table document. Now, let's jump into the style CSS pile. As you can see, how we assign height, these playfiq justify content center align items center. To make this anchor element center of this page horizontally and vertically. Now, let's style this element. I'm going to select this element using its tag name A, then inside the aliases, the first property I'm going to use takes decoration. Takes decoration, I'm going to use none. Then I'm going to use another property called color, color, and I'm going to assign a text color. I'm going to use some kind of dark gray color use Haztag 26, 26, 26. Then I'm going to define font family. Font family, I'm going to assign Sansai. Then I'm going to define the font size font size 40 pixel. After that, I'm going to define border, border, and I'm going to assign three pixel solid border. Solid and our border color is Hatag and I'm going to use the same color which I use for the font color. Next, I'm going to define padding. Padding from top and bottom, I'm going to define 40 pixel from left and right, I'm going to define 80 pixel. Now I'm going to define transition. Transition, and I want to apply transition for Oop, and I'm going to define transition time 0.5 second. And also need to define the position position relating. I'm going to set this file. After I set this file, this is how our button look like. And now I'm going to use before pseudo element to create our effect. So here I'm going to type. First I'm going to select the anti tag, then I'm going to use before procedure selected, BEFORE, before. Then inside the liverss first, I'm going to add content, content, and I'm going to type O M. So inside the single course, I'm going to type over me. After that, after that, I'm going to define the position, position absolute. Next, I'm going to define the pace where I'm going to put this text. I want to put this content at that corner. I'm going to type from the top, I'm going to pass zero and also from the left, I'm going to pass zero egging. Then I'm going to define height and width, height, I'm going to assign height 100%, and also width 100%. Then I'm going to add background color to this element, the positive element. I'm going to type background color, and I want to assign the same color, this dark gray color. Next, I'm going to assign font color, color, and I'm going to assign white color because we need to make it visible white. And I'm going to set this file. After I set this file, this is how it looked like. In our previous examples, most of the time we create a empty content. But this time in this tit, we put this text over me. And now we need to place this text middle of this container, vertically and horizontally. For that, I'm going to use flex propriety, display flakes justify content, justify content center, and align align item also center, and I'm going to set this file. After set this file, this is how it look like. Now I want to scale up this dark gray background fight time. I want to make fit scale from its orrizonal size, and it will make the background element very huge. Also we are going to make its opacity zero. So it's going to make it transparent. When I hover over this link, I want to scale de again. I want to make it one again. With that, also, I'm going to change the oposity. I will make it one again. I want to make it visible again. So let's do it. At first, I'm going to apply scale, some t, transform, and I want to use skill value scale, and I want to make it five time. After I set this file, this is how it look like. I make it much larger than previous one. It scale this background elements five times of its size, but I want it to be hidden outside this link. Here here inside this anchor element, I'm going to use overflow property, overflow, overflow. Hidden, and I'm going to set this file. After save it, this is how it looked like. Now you can see outside the link area, the before pseudo part element is hidden. Also, you need to make this element, fully transparent. Inside the before selector, I'm going to apply opacity property, opacity and I'm going to apply opacity zero. If I set this file, this is how it looked like. Now the V fore background element is fully transparent. Also, it not visible in our overflow area. Now I want to apply transition. Here I'm going to try transition, and I want to apply transition all of this property, and I'm going to take 0.5 second. I'm going to set this file. Next, in hovering, I want to make this pseudo element one Eg. I want to reduce the scale of this pseudo element, and also we need to increase the transparency value. We need to make it visible. I'm going to type A, colon Heber, colon, and I'm going to use before selector, I'm going to target the force element before then inside the colorss I want to apply transform property, transform scale, and I want to make it one. Also, I'm going to make Opa City Opacity, I'm going to make it one. I want to make it fully visible when I hover around it and I'm going to set this file. Now after set this file, when I hover over this anchor tag, we achieve the desired result. This result. I hope now it's clear for you, how can we create this beautiful va button Hova eft? Thanks for watching this video. Stay tuned for our next project. See you soon. 7. Circular swapping button: Hello, everyone. Once again, I am back with a new project related button Herefit. In this lesson, we are going to create this great looking button Haefet. As you can see when I hover my cursor, you can experience this effect. When I hover over this button, a red background fill this button from the top side. So let's start the practical and see how we can create it. So as you can see side by side, I open my ist studio code editor and my browser using light server extension, and I already create an HTML document named index dot HTML. With that, I already create this style dot CSS file, and I link this CSS file with this document. Now, inside the body tag, at first, I'm going to create a button tag. So here I'm going to type button tag button, and also I'm going to assign a class class and our class name is button T in short form. Then I will just type button. I want to set this file. After I set this file, this is how it looked like. Now we need to place this button middle of this page. For that, we need to go and jump into the style CSS file. First, I'm going to select the body tag, body. Then inside the colss at first, I'm going to assign margin to this page, margin, and I want to assign margin zero, then I'm going to assign this low property. Display flakes Justify content justify content center, also align the items center t align items center. Next, I'm going to assign height to this page height and I'm to assign height 100 H. Then I'm going to assign fontonFamily, and I want to assign Sensory font, Sanserith I'm going to set this file. After I set this file, this is how it looked like it aligned this button middle of this page horizontally and vertically. Next, I'm going to target the button using its class name. For that, I'm going to type dot BTN. Then inside the colors, first property, I'm going to use border border, and hem to assign two pixel solid border, solid watercolor is tomento. I'm going to set this file. After that, I'm going to remove the background. Background, and I'm going to assign none. Then I'm going to change the text color. I'm type color and I want to assign color tomato egging. Next, I'm going to give some padding from top and bottom and right and lift. I'm type padding from top and bottom, I'm going to assign 20 pixel and from left and right, I'm going to assign 40 pixel. I'm going to set this file. After I set this file, this is how it look like. Next, I'm going to define the font size. I'm going to type font, font size. Here I'm going to assign font size 25 pixel. After that, I'm going to use a property called text transform, text transform, text transform uppercase. Next, I'm going to assign another property, which is cursor, cursor pointer. Whenever I move my cursor on this button, it's going to become a pointer. After that, I'm going to assign transition transition, and I want to apply transition for all of this property and my transition duration is 0.5 second. Then I'm going to set this file. Next, I'm going to define the position, position I'm going to use relaty. Now, let's work on the hovering effect. We will use the before pseudo element for that and we know the process. Now, let's create the before pseudo element. So type dot BTN, button, colon, B four. Then inside the alyssF probity, I'm going to use content, content, and I'm going to create empty content. Then I'm going to define the position of this content, position, and I'm use absolute value, absolute. I want to place this element at that corner. From the top top, I'm going to assign zero and also from the left, I'm going to assign zero. I want to start the element from the top left corner. Then I'm going to define within height with 100%. Also, I'm going to define height height, height, 100%. Then I'm going to define the background, background, and I want to use tomato color toma. I'm going to say this. I set this file, this is how it look like. So it takes full width and height and it's sitting top of this button. That's why it's height our text. To resolve the problem, I'm going to use Z index property, Z index, and I'm going to use minus one and it resolves the problem, but our text is not visible yet because our text color and the background color match with each other. Inside the button selected, if I change the color, color. And if I make it white white, and then set this file, this is how it looked like. You can see the text now shows up. But for now, I'm going to make it tomato again. So I'm going to comment out this line, and I'm going to save it again. And now to achieve the desired result, I'm going to use border radius in our pseudo lemate type border radius, zero, zero, and 50% and 50%. From the top left and right corner, I use zero value and for the bottom left and bottom right corner, here I use 50% and 50% border radius. Now, if I set this file, this is how it look like. Now we have the curves in our background, and now we need to work on the hovering effect. Now we will set height of this red background, zero. Then hovering over the button, we will increase the height of this red background. It's going to give you the fills in and cover the button effect. Inside this red background, I'm going to set height, height, and I'm going to make it zero. 0% instead of 100%. I'm going to set this file. After I set this file, as you can see, it disappeared the red background. It is not visible because of its height. Now we need to add HVAD effect on this before element. For that, I'm going to type dot BTN Colon Hal colon and Hemot before. Then inside the car lerss I'm going to define the height, height, 100%. And I'm going to set this file. So whenever I Her my cars on this button, as you can see, it increases the height, but it increases the height instantly. There is no transition between them. For that, I'm going to use property called transition in my Hard element, transition in my posto element. So Hemost transition here I'm going to set transition in all of this element all and I'm going to define the time 0.5 second and I'm going to set this file. This time after I set this file, if I hover over my color on this button, now you can see the smoothing effect. You can experience it. But the problem is it not covering the whole button because of border radius. So to resolve the problem, we need to increase the height. We need to increase more height more than 100%. So instead of using 100%, her I'm to use 190%, and I'm going to set this file. After set this file, if I over my cursor on this button, you can see it resolve the problem, but it creates a new problem. So you need to hike the overflow area for that in my button in this button area, I'm going to use the property called overflow, overflow heating I'm going to set this file. If I set this file and over my cursor on this element, you can see here we achieve the desiring effect. It hide the overflow element. Now, also, we need to resolve another problem. We need to change the color when I hover on this element. We need to change the text color when I hover this button. For that, here I'm going to create another selector BTN and her create a hover selector of it hover. Inside the color ss, I'm going to use the property called color. Color white. I want to set this file. After set this file, if I my cards are on this element, here you can see, we achieve the desired result. I hope now it's clear for you how we can create this beautiful button effect. So thanks for watching this video. Stay tuned for our next project. 8. Rotating 3 layers button: Hello, everyone. In this lesson, we are going to create this beautiful button Hover effect. As you can see when I Hoberm cards are on this button, here you can experience a flipping effect. At first, a green background covered the button, then a red background covered the button, and when I release my mouse from it, it back to its original position again. Let's see how we can create it. As you can see side by side, I open my Visual Studio code editor and my browser using Lifesaver extension and I already create an SML document named index dot HTML. With that, I already create the tile Dod CSS file and I link this Tyled CSS file with this TML document. Now inside my body tag, at first, I'm going to take a Gut tag, A. Here I'm going to just say button. And then I'm going to set this file. Set this file, as you can see in my browser, this is our anchor tag. Now, we need to jump into this style or CSS file. Now, first, we need to style the body tag. Here I'm going to target body using its tag name. Then I'm going to assign margin in our body tag, which is zero. After that, I'm going to assign display property, display, and here I'm going to use slick. Then I'm going to use align item property, Align item center, justify content also center. Then I'm going to assign height to our page height 100 VH, vote height. After that, here, I'm going to assign a background color. Background color, and I'm going to use a hexavalu 212121. It's a dark gray color. If I set this file, this is how it look like. Now we need to change the font style of this text. For that, I'm going to use font family, font family, and I'm going to use Sansai Sansai I'm going to set this file. After I set this file, this is how it looked like. After that, I'm going to style this anchor tag using its tag name A. Then inside the Closs, at first, I'm going to assign padding to this button, so type padding and from top and bottom, I'm going to use 20 pixel paddy and from left and right, I'm going to use 40 pixel paddy. After that, I'm going to use a property call takes decoration, text decoration, takes decoration. He I'm going to use none. Then I'm going to use another property call takes transform, text transform, takes transform, uppercase. Then I'm going to use dground color property. Background color, and here I'm going to use background color, hass tag, if one, C four, zero F, this yellow variant color, and I'm going to set this file. After I set this file, this is how our button look like. Next, I want to change the text color of this button. I want to make it white, Soon type, color, and I want to make its color white. After that, I'm going to define the font size font size, and I'm going to apply to t pixel font. Then I'm going to set this file. After I set this file, this is how it look like, but I want some letter spacing between these characters. So I'm going to use the property call spacing. Lets spacing, I want to pixel space between the characters of this word, yes, it's good. After that, I'm going to define the position position, and I'm going to declare it relative. I'm going to set this file. Next, I'm going to create the green background which will cover the button. For that, I'm going to use before Posidoeleate. Here I'm going to tie anchor tag colon before. Then inside the calivas at first, inside this before Posido element, I'm going to create a content, content, and I'm going to type button. After that, after create the content, we need to position this content, some type position property, position absolute. Next, I'm going to place this content at that corner. For that, I'm going to type from top, I'm going to assign zero and from P and from P, I'm going to assign zero again. Then I'm going to assign within height. I'm going to assign width 100%, and then I'm going to assign height, height 100%. After that, I'm going to define the background color. Background color, I'm going to assign the same background color, so I'm going to copy and hemmed assign a green background color. I'm going to use a hexa Valu has tag two CE, seven, one. This green background color, and I'm going to set this file. After I set this file, this is how it looked like. Now the green background is sitting right above the yellow background. Now we need to center these takes horizontally and vertically. For that, I'm going to use display flex propriety, display and I'm going to use flex and align align items center, justify content. Also center, also center. I'm going to set this file. After I set this file, this is how it looked like. Now to create the effect, we need to use rotate function. We are going to rotate this green element along the Xxs so here, I'm going to use the property called transform and I'm going to apply rotate X here, I'm going to pass the value 60 degree DEG. Now if I set this file, you can notice it going to rotate this green element at horizontal axis. After set this file, you can see the result and it rotated up to 60 degree. As you know, by default, it's going to rotate the element from the center line. But I want to change the position of this rotating point. I want to rotate this element from the top. For that, we need to use a property called transform as transform Aisin animal pass top. And upset this file, as you can see, now it's rotate the element from the top position. Now I want to rotate this element up to 270 degree. Instead of using 60 degree, I'm going to use 270 degree DEG and I'm going to set this file up set this file as you can see, and upset this file, as you can see, it is the element. Now it's not visible anymore. Because a rotate the element, it go behind the button. Now when I hover over this link, I want to reset it. I want to make it zero again. I'm going to create a hover selector using the anchor tag a hover before elem. Then inside the Caria says, how to use a property called transform, transform rotate X, and I'm going to pass pass zero degree zero DEG. I'm going to set this file. Whenever I Hoberm curves are on this element, this button, as you can see, it's going to rotate this green pseudo element into zero degree. You cannot experience the rotation because you do not use any transition on it. I'm going to type transition property transition. As I'm going to set the duration of this transition zero coin five second. I'm going to set this file. After I set this file, if I hover my Karza on it, now you can experience this transition. Here you can experience this sleeping effect. Now after I create the green one, I want to create the red one. For that, I'm going to copy this section, this before pseudo element here I'm going to paste it again. And instead of using before posto element, this time, I'm going to use after posito element, and this time I'm going to use red color instead of using green ED. I'm going to set this file. As I want to rotate it after the green one. For that, we need to use some transition delay. Ty transition delay, and I want to delay it up to 0.25 second. That's good. I'm going to set this file. And at the same way, we need back to the zero degree Wi on it on this button. For that, here, I'm going to create another Her selected for after elemide. A, colon hovered, colon, and Hentyp after. Then inside the Cali recess, I'm going to apply this same value and I'm going to sub this file. After set this file, Wi Hoberm cursor on this button, here you can experience this beautiful flipping button effect. Also if you want to get different result, yes, you can change the transform origin position. Instead of using T you apply bottom, if you apply butto bottom and then this file, now you can enjoy a different flipping effect. Whenever I open my color on it, this is how it cross the button. For now, I'm going to use Top. I like to go with top one to value. This is how it's animate this button. I hope now it's clear for you. Thanks for watching this video, stay tuned for our next project. 9. 3 circle to background button effect part 1: Hello, everyone. Welcome to the new project. In this lesson, we are going to create this beautiful, nice little button Ha effect. As you can see, when I hover over this link, three circle coming and cover dling then a beautiful yellow background appear and change the text color. We're going to create this in this project. Let's see how we can create this beautiful effect. So as you can see side by side, I open my Visual Studio code editor and my browser using Light server extension, and I already create an HTML document name index dot HTML. With that, I already create Styler CSS file and I link this file with this document using ink tag. Then inside the body tag, first, I'm going to take a anchor tag. I'm going to take the anchor tag using A and then I'm going to take a span tag, empty span tag inside the anchor tag span, and inside this ancha tag, I'm going to tip over me. We will see later why we need this span tag. Now, let's jump into the style CSS file. At first, I'm going to style the body type, so type, body. Then inside the Cariss first, I'm going to say margin, I'm going to say margin, zero from all of the direction. Then we need to align this cat center of this page. I'm going to take this property, display flex, Justify content, justify content center. Also, we need to pass align Iams center. After that, we need to define height to this page, height and I'm going to define height hundred V g, vote height. Then I'm going to define the font family font family area. After that, I'm going to define a background color. I'm going to use a dark background color type, background color, hashtag, I'm going to use a HixaVu 272727. It's going to retain a dark gray color. After I set this file, this is how our page look like. Also it aligned the text middle of this page. Now we need to style this Anca tag. I'm going to target the ancha tag using its tag name A, then inside the color sus first property I'm going to use weed, and here I'm going to aside we 220 pixel. Then I'm going to assign height, height, 80 pixel. Then I'm going to assign color. I'm going to assign font color, color, her to assign color, kind of yellow hue has tag, F if zero. It's going to return of yellow color, something like that. Then I'm going to define background color. Bagund color, I'm going to make it transparent. This one. Next, I'm going to define the font size. Font size. Here I'm going to use font size 26 pixel. Also going to remove this underline, so I'm going to type text decoration, text decoration. I'm going to make it none. It's going to remove the underline. Next, I'm going to convert this text into uppercase, so I'm going to type text, transform, uppercase. I'm going to set this file. After I set this file, this is how it looked like. And now we need to synta this text horizontally and vertically. For that, I'm going to use a property called text align text, Align, text align centered. Above that, also, I'm going to define some line height line height, 80, line height, 80 pix. So it's Align the text middle of this container. Here we define width 220 pixel and height 80 pixel. Finally, I'm going to add transition. Transition, I'm going to apply transition for all of the element and I'm going to set duration 0.5 second. After that, we need to define the position. Position, after that, we need to define the position, position relative. And I'm going to set this file. After I set this file. Now, let's create these circles, which are coming from the left and the right side. Who am I over this link? Who will use before and after pseudo element to create it? I want to create first circle element at that place and I want to create the second circle element at that place. I'm going to use before and after possudo element together. So type A, colon, before. A, colon after. Then inside the Carrass the first property, I'm going to create the content. I'm going to create the D content. Content is a blank content. I'm going to use Double code cell. Then we need to define the position of this content. So take position, I'm going to provide absolute. Next, we need to place those content. From the top, I'm going to place it 50% from the top, I'm going to place it 50% and then I'm going to define we, and I'm going to define with 20 pixel. Also, I'm going to define height, height, also 20 pixel. After that, I'm going to define the background color. But before I define the background color, let's define the border radius because we need to make it circle. Border radius 50%. Then I'm going to define background color. Background color, I'm going to define yellow color, the same color, hass tag, do leaf, zero, and I'm going to set this file. Now to set this file, you can see the two circle. One is the left side and another one is the right side. It is made by before positoselector, and it is made by ter positoselector. But you can notice our dots are not aligned with the text. Here we position it from the top 50%. I mean, 50% of the ca tag height, which is 40 pixel. But to make it correct, we need to use transform property. Transform, and here I'm going to use translate Y with, translate translate Y, and here I'm going to use -50%. Up to set this file, as you can see, it aligned the dots with the text, and next, I'm going to apply transition property. Transition, transition, I'm going to apply transition to all of this property. Next, I'm going to define the transition duration, which is 0.3 second. So before an upper circle perfectly centered to this text. Now you can notice the before pseudo element covering the letter H and the per pseudo element nearly touching letter E because we did not specify any horizontal position of it. To resolve the problem, I'm going to target the before pseudo element, pudo type A, colon before. Then inside the call recess, I'm going to type the property name late left, zero and I'm going to set this file. After set this file, as you can see, it's resolve the problem. Then I'm going to target the ara element A, upper. Then inside the Cali recess I'm going to place it right side to smut right, zero. I'm going to set this file. After set this file, this is how it looked like. Next, using box shadow propriety, we are going to create shadow of these circles, and we are going to create two shadow of these two circles. So I'm going to create a box shadow for before elements, so I'm going to type box shadow, and it going to except of four value. The first value is for horizontal distance between the shadow and the element. From the right side, I'm going to move move the shadow from the ten pixel. I want to move this shadow from the left side, so I'm going to use -100 pixel. Next, we need to provide the vertical distance from the element. From the element, I want to provide zero vertical distance and the third value represents the blur of this shadow. But I don't want any blurred value, I want short shadow, and the large value, we need to pass the shadow color and for now, I'm going to use red otherwise green. So after set this file, as you can see, here you can see a new circle. It's a shadow of this before pseudo element. I'm going to do the same thing for the after pseudo element. I'm going to create the same shadow just to place it right side of this element. So I'm going to copy this lin and I'm going to paste it here. I'm going to change the value of the horizontal direction. After set this file, you can see the result. Now we have tal four circle. This is the first part of this tutorial. At the next part of this tutorial, we are going to work on Haarefect. Thanks for watching this video Syuned. 10. 3 circle to background button effect part 2: Nice to see you guys, this is the second part of this tutorial, and in our previous part, we already create the shadow of this before and after Posido element. Now, let's work on the Ha effect. At first, I'm going to create Hor selected for the before elements of ti anchor tag, hover colon, F. Then inside the caliss here I'm going to call Left property, left 50%. So whenever I hover my cars on this element, as you can see, it going to move this circle 50% of this element width. Also it move this shadow with it, but I don't want to maintain the shadow distance 100% where I hover on it. Instead of using -100, I want to move it a little closer to the original element. Here I'm going to type box shadow box shadow, and I'm going to define the position of the shadow which is 30 pixel when I hover on it. And also, I'm going to pass the same values and the same color, so I'm going to copy it and I'm going to place it here. I'm going to set this fine. So whenever I hop my cursor on it, as you can see, now, the shadow came closer to this original element. Not only close, it crossed the element and go to the right side of this original element. And also, I'm going to do the same thing for the After pudo element. So I duplicate this section and I'm going to replace before with After. Next, I'm going to change this side. I'm going to make Lab two, right. Also we need to pass the negative value here because we are going to move the shadow to the left side of this circle. I'm going to set this file. After set this file, if I hobo on it, you can see the result. Now we need to do one thing. We need to move the before and upper pseudo element to the same position. User can see only three dots up hoberon it. We need to align both the circle center of this and categ element. For that, we need to use transform property here, transform, and this time I'm going to use translate X value, translate X, translate X, and here I'm going to use -50% value. I'm going to set this file. And because we say translate Y above here, we need to set the same value in our element in our V for psudoelement. Here we need to mention we need to stay on -50% at YXs direction, so I want to paste the value. Translate Y -50%, and then we need to do the same thing for upper pseudo element. I copy this line and I'm going to paste it here. And I'm going to change the values. I'm going to make it positive, not negative. I'm going to set this file. After set this file, if I hooper my cars are on it, yeah, it's working, but hoops from the YXs still we need to use minus value because we need to align it center. After set this file, when I hooper my cars are on it again, now you can see the result. Now you can see only three circuit. Before and upper positive element overlap with each other. That's why you can see only one circle here. Now I'm going to change this sado circle color. I'm going to use the same color, same yellow color for it. Instead of using green, I'm going to use this yellow color. So I replace green with this color every time, and I'm going to save it again. After I said this file, this is how it look like. And now we will work on the yellow background using this span tag. As you know, when we create our ancha tag, here we create a span tag inside it, and now we are going to use this span tag. Let's back to the style CSS file. I'm going to use this spent tag for the background purpose. So to create the background, I'm going to target this span tag using its name tag name. Span inside the clivusus at first, I'm going to define the position of its span tag, which is absolute. Then I'm going to define the place from the top, I'm going to place seed zero. And from the left, I'm going to place set zero again. Then I'm going to say within height, with 100%. And then I'm going to define height, height also 100%. Then I'm going to define the background color, background color, background color, and I'm going to use the same background color, which is HatagFF zero, this yellow color. Next, I'm going to define the border radius. Border radius, border radius, I'm going to use eight pixel. I'm going to set this file. After I set this file, this is how our button look like. Now you can see the yellow background sit top on the text, and then I'm going to use transform property, transform, and I'm going to use scale value scale, and I'm going to say scale zero. Also, I'm going to use transition transition, and I'm going to say transition to all the properties and also I'm going to say the duration of the transition which is 0.3 second. After that, I'm going to create the Hoberselector of the span tag, and our span tag is inside the nctag I'm going to type first I'm going to select nctegHver then I'm going to select the span tag, span. Inside the caliss I'm going to say transform scale value scale, and I'm going to set it this time I'm going to set it to one and transform delay, and then I'm going to use transition delay little transition delay value. Transition delay, and I'm going to set it 0.4 second. I'm going to set this file. After I set this file, as you can see, by default, it hide the yellow background. But whenever I try to move my car on it, now you can see after 0.4 second delay it appeared the background. As you can see, after finish this circle moving, the background appear. Next, I'm going to change the link color when I hobo on it. For that, I'm going to type anchor hover and inside the color races, I'm going to use color fberty colored, this time I'm going to use dark gray color, so I'm going to type has that 262626. Then I'm going to add some little transition delay, and I'm going to use the send transition delay value I'm going to copy this one and I'm going to paste it here. So if I set this file and hover it on it, you can see nothing is happening. It's look as it is because we need to move this background behind the text. For that, we need to use Z index value to type Z index, which is minus one, and I'm going to set this file. So set this file when I open my cards are on it, you can see the result. Now the text come in front of this background element. But the problem is our three rot also come in front of the text. We need to use the same zen index value two hour before and after pseudo element selector. This one. Here, I'm going to pass the same Z index value and set this file. When I ObermGara on this element, this time you can see the resin. Now, our background and three dots element also go behind the text. Then I'm going to set opacity of both the element zero. Let me show you opacity, I'm going to set it zero. I'm going to set this file. Set this file, as you can see, it hide all the pseudo elements, but I want to reappear it when I hover on it. For that, we need to set opacity in our Her selecton. Copy the value opacity and in our before upper PosidoHerselector, I'm going to use the values. I'm going to make it. This time, I'm going to make it one Opacity one. I'm going to set this file. This time I made it fully opaque. After set this slide if I hover my Karza in this link, you can see this beautiful Her effect. This is how we can create this beautiful Her effect. Thanks for watching this video, stay tuned for our next project. 11. New button hover effect: Hello, everyone. Welcome to the new lesson for this animation course. In this tutorial, we are going to create this beautiful, nice looking button Haifat. If you look at this button, you can notice we have total two background here. Lo color background and violet color background. Our Eula background shipped to the top laped corner and our violet color background shipped to the bottom right corner. And when I hover on it, you can notice both the background A and rotate in three D perspective at Xxs diction. So let's see how we can create this beautiful Hoaiff. So as you can see side by side, I open my Wiser Studio code editor and my browser using live server extension, and I already create an SML document named index dot HTML. With that, I create this tile dot Css five. Now at first inside the body tag, I'm going to create the anchor tie using A, then I'm going to tie buttonhver Effect. Button Hover effect. I'm going to set this file. After that, we need to jump into the stylar CSS file. At first, I'm going to select the body tag body. Then inside the calibraces first property, I'm going to use margin, margin zero from all of the direction. Then I'm going to use display. Display and I'm to use display flex, and align item, align IMs center. Also, I'm going to type justify content, also center. Then I'm going to assign height to this page, height, and I'm going to assign height 100 V H, viewport height. Then I'm going to assign font family, font, family, and I'm going to assign Al. That's good. I'm going to set this file. After set this file, as you can see, here you can see it align the button, middle of this page horizontally and vertically. Now I'm going to style this link. For that, we need to select it using the anchor tag A and inside the livers is the first property I'm going to use wide. And the first property I'm going to use with, and I'm going to assign 300 pixel width. Then I'm going to assign height, height, and I'm going to assign 60 pixel height. After that, I'm going to assign text decoration, text decoration, and I want to remove the underline, so here I'm going to use none. Then I'm going to make this text into uppercase, text transform, I'm going to use text transform property and I'm going to use uppercase do. After that, also, I'm going to remove the background. I'm going to make it transparent. Background color transparent. Then I'm going to assign text align text align center. Then I'm going to assign line height, line height. Here I'm going to assign line height, nearly 60 pixel. I think 60 pixel is good for each. Next, I'm going to assign font weight. I need a little bolder font, font weight, and I'm going to pass bold heir. Bold. After that, I'm going to add letter spacing, letter spacing and her to add letter spacing to pixel. Then I'm going to add position, position relative, the less property, I'm going to use transition. Transition and her to assign transition to all of this property, also, I'm going to set the duration, which is 0.2 seconds. I'm going to set this file. After I set this file, this is our button look like. Now, let's create the two background of this button. For that, I'm going to use the fore and after posito element. First, I'm going to create the before posito element, Cctag colon before. Then you set the carlivorss. First, I'm going to create a blank content. Here I'm going to type content, content, and I'm going to create a blank content, so I pass double cores. After that, then I'm going to position the content and I'm going to make it position absolute. Then I'm going to place this content at that corner at that place. From the top, I'm going to pass zero value and from the late, also, I'm going to pass zero, zero position. After that, I'm going to assign with and height. We, I'm going to assign 100%, and then I'm going to assign height, height also 100%. Then I'm going to assign background color, background color, and I would like to go with yellow color yellow. I'm going to set this file. After I set this file, this is how it look like. Now you can see our yellow background take whole within height of this element, the catag element. Now, we need to display this text. For that, we're going to use Z index. So to type Z index, I'm going to make it minus one. I want to move this yellow background color behind the text. So the sb this file, this is how it looked like. And now I'm going to shift this yellow background, something right and top. For that, I'm going to use to value minus three pixel, also the left value minus three pixel. I'm going to set this file after set this file, as you can see, it's move little bit. Now, let's create another background. I'm going to duplicate this section and here I'm going to pass after. Instead of using before I'm going to pass a TR. This time, I want to move it to the right side. Instead of using minus three pixel, I'm going to use three pixel. Also, I'm going to change color, the background color, and I'm going to make it Blue. I'm going to use this one, blue violet. I'm going to set this file. After set this file, this is how it look like. Now you can notice the blue violet background sitting on the yellow color background. But I want to brd the background with each other. For that, we can do it easily. We need to use a property called mix brain mode. Here are type mix Blain mode, and I'm going to apply multiply multiply, and I'm going to set this file. We need to apply the same mixed blend mode, multiply in after subelement. And I'm going to set this file. After I set this file, this is how it looked like. Now instead of ugly blue color, I want to change the font color. I'm going to make it white. So in our anchor tag, I'm going to use the color property color, and I'm going to make it white. And I'm going to set this file. Then you can see two background blended to each other and it creates a nice beautiful effect. Next, we are going to working on the hovering effect. Now in hovering effect, I want to rotate the element in Xxs direction in three D environment. To do that, first, I'm going to select the hover select, anchor hover, then before psudo element. Then inside the rounds, inside the calibraces, at first, I'm going to move the yellow background to the top six pixel. I'm going to use the first value top, and I'm going to make it minus six pixel. Then from the lab, I'm going to make it zero. And then I'm going to use transform property, transform, and we are going to use three D value. And as you know, we are going to use three D environment, so we need to apply perspective on it. Perspective. Here I'm going to define 1,000 pixel perspective, not 100, I'm going to make it 1,000. And then I'm going to apply rotate x, rotate X, and here I'm going to define, but before I'm going to turn on the tower af, Wrap and Hem to define the angle, which is 75 dg degree. I'm going to set this five. And for smooth transition, I'm going to apply transition property in before element. So type transition and I'm going to define the time for the transition which is 0.2 second. I'm going to set this file satisfy. If I open my cursor on it, you can notice the transition. You can notice our yellow background rotate in CD environment on the XXs direction. We need to do the same thing for upper pseudo element, but in opposite direction. But you can notice this is not the result we want. I want to rotate this element from the top position, not from the center position. So we need to change the origin. Transform origin, well let me show you. So in our beaver positive element, Imotype transform origin, and I want to rotate the element from the top position, top. I'm going to set this file. If I my cars are on this element, now you can see, now you can notice this time it rotate the yellow element from the top position in three D environment. Now I need to do the same thing for the violet color background, but before I'm going to cut this section and I'm going to paste it before procedure selector. I'm going to duplicate this section and I'm going to paste it after the after procedure element. Just I'm going to change before to after. Also to purchase the position. Instead of using six pixel heromon to use minus six pixel and instead of using rotate 75 degree Heim to use -75 degree and also use the same properties such as transition and transform origin in our upper pseudo elements. I copy this to property and value and herramoPtich. And I'm going to change the transfer origin position. Instead of using top, I'm going to use bottom do bottom and I'm going to set this file. After I set this file, if I perm curs on this button, you can see the result. Here you can see the beautiful effect, but the problem is after Hober on it, as you can see, our text color white match with the background color. We need to resolve the problem when I hober on it, we need to change the text color of this anchor tag here I'm going to create a Hbaselector of anchor a Her then in the colses I'm going to use color property, and I'm going to apply hass tag 272727. I'm going to set this file. After set this file, if I hover my cursor on it, you can enjoy this beautiful Her effect. I hope now it's clear for you how we can create this beautiful button Hover effect. Thanks for watching this video. Stay tuned for our next project. 12. Splited button effect: Hello, guys. Good to see you back. Once again, I'm back with a new project related button Hova effect, today we are going to create this beautiful button Haefet. As you can see when I hover my cars are on this element four small element COD button from four different side, from the left side from the top, from the bottom and from the right side. This is what we are going to build today in this project. Let's start the practical and see how we can build it. So as you can see side by side, I open my visual studio code iter and my browser using live server extension, and I already create an TML document name index dot HTML. Also, I create style dot css file and I link this file with this document. Then inside this body tag, at first, I'm going to take the anchor tag. Inside the body tag, I'm going to type A for anchor tag, and inside the anchor tag, I'm going to take a span tag, span. Then inside the Span tag, I'm going to type over me. Here we added this pan tag because we want to create four part of background. That will cover of the button, and then I'm going to set this file. After set this file, you can see the button in my browser. Now, first two element we are going to create using before and after psudo element. Then we are going to use this pan tag to create other two. Let's jump into the style dot CSS file. At first, I'm going to style the body tag board. Then inside the Cali, the first property I'm going to use margin and I'm going to set margin Z. After that, we need to place this anchor tag middle of this page. I'm going to use Huber, I'm going to use the property, this play, and I'm going to make it flex. After that, then I'm going to use another property called align item, align item center, justify content, justify content also centered. Then I'm going to define height, height, and I'm going to use height 100 viewport height. After that, I'm going to define font family. Font family, and I'm going to use aerial font. Next, I'm going to define a background color. I'm going to use dark background color, some type background color, hashtag, 222. It's going to return dark gray background color. And after this file, this is how it look like. Next, I'm going to target the anchor tag using its tag name A. Then inside the color recess first property, I'm going to use text decoration, text decoration, and I want to remove the underline so I'm going to use Nun property. NunVlu. After that, I'm going to make it uppercase. I'm going to tie text transformation, text, transform. I want to make it uppercase. Then I want to define the font size, font size, and I'm going to make it 25 pixel. After that, I'm going to define a color. I'm going to define color to this font, some type color, and I want to use this color code, hass tag, F six, B, 93b, this one, this yellowish color, and I'm going to set this five. Then I'm going to provide letter spacing between these characters. So type, letters, spacing, and Heundpass three pixel. After that, I'm going to define some padding. I need some padding. But before I define the padding, let's add the border. Border for border, I want three pixel solid border. Three pixel solid border, and our border color is same as the font color. I copy the color code and I'm going to put it here. After that, I'm going to add padding. Padding from top and bottom, I want to define 25 pixel and from left and right, I'm going to define 50 pixel and I'm going to set this file. After set this file, this is how our button look like. Next, I'm going to add transition because we need some smoothing effect. I'm going to type transition. I want to apply all of this property, then I'm going to set the duration 1.5 second. After that, I'm going to define position, position, I'm going to define relative, and I'm going to set this file. I set this file, I'm going to set this file. Now we are going to work on the fore part of ylow background. When we hover up this link, it's going to cover up this link. We are going to create the first background element using anchor tag. We are going to use before and actor element for that. Now I'm going to create both the before and after pseudo element together. So Ti, A, colon, B port. Then upper comma, Hemotyp A colon after. Then inside the calibrs the first property I'm going to use, I'm going to create a blank content. Content, colon is a blank content. Is a blank content. After that, I'm going to define the position. Position, I'm going to make it absolute. Then I'm going to define. We, I'm going to define 25%. Next, I'm going to define height. Height, I'm going to define height 100%. After that, I'm going to define the background color. Background color, I'm going to use the same background color which I use for text color. Next, I'm going to define the Z index to visible the text. We need to move both the background behind the text. So I'm going to type Z index, Z index, and I'm going to use minus one value. Then I'm going to use transition transition, and I'm going to define transition for all of this element. And also, I'm going to define the transition timing, which is 0.5 second. Now to set this file, this is how our elements look like. Remember, here we use 25% width of this and cut tag element because if we add four element together, then it's going to cover the whole area. That's why I use 25% for each of the element. Now we need to move this before posito element. First, I'm going to target the before Posido element alone before. Then inside the caliberss, I'm going to use top property, Tf. And here I'm going to define the position from the top, I'm going to assign zero value. Then I'm going to define left position, P and here I'm going to pass -25%. And I'm going to sub this file. After set this file, this is how it looked like now. So this is the before element initial position for this kata. And now I'm going to change the position of this after pseudo element. I'm going to place this element at that position. For that, I'm going to duplicate this section and instead of using before, I'm going to use after. A from the top, I'm going to pass -100%. Then from the left, I'm going to use positive 20%. If I set this file, this is where we want to put this element. So when I hober my cursor on this button, I want to move the before element to the right side and I want to move the after element to the bottom side. And it's going to complete the 50% of area. Now, let's walk on Hard effect. I'm going to first, I'm going to create a Hoefect for the before element type A, colon hover. Colon, I'm going to type the element name before. Then in the clirass the first property, I'm going to use top value, top, from the top, I want to put it zero when I Hvar on it. I want to place the position and from the late and from the lab, also, I'm going to make it zero. After this file, when I open my color on it, it's going to move this element inside this box. From the top, it's going to make zero and from the lab also it's going to make zero. That's why it place it inside this element. Next, we need to work on upper element hover effect. We need to move the element downward. From the top, we need to position it zero and from the lab, we need to move it 25%. 25% of the nc tag border area. I'm going to create the hover selector of it, some type A, colon, hoval. Then colon, I'm going to select the actor element. After. Then inside the class from the top, I'm going to place it zero and from the late, I'm going to place it 25%. I'm going to set this file. After set this file, if I hover my cursor on this element, this is how it look like. This is how it covered the 50% of this button area. So we are almost done our hub job. At the next part of this tutorial, we are going to create the other two parts using span tag and before positive element, and it's going to cover at the other two portion. Thanks for watching this video, stay tuned for our next part. 13. Splited button effect part 2: Hello, guys. Nice to see you back. This is the second part of this project, as you can see, we already create two element using before and upper posit selector of anger element. Our before element move to the right side and our upter element move to the downward. And now we need to create the remaining two part. Again, we are going to create this two element using before and after pseudo element. But this time we are going to be used before and after psudo element of this span tag, which you create inside this nga tag, this one. Let's get to the styler says fell again. We are going to create these two elements. Let's jump into this section and herm to add span colon befotm span colon after. And I'm going to set this file. Upset this file, this is how it look like. So we successfully create this two element. Now we need to place the two element. For that, first, I'm going to select the span before element, and here I'm going to create a selector of it. Span before. Then its the carver says, here we target the span tag before element, which is inside the anchor element. So type A, space, span, colon before. Then we need to define the position from the top, top 100%. It's going to place this element below the button, and then we need to define the right position. So tip right, 25%. I'm going to set this file. After set this file, this is where we place this element. From the right side, it shipped to the 25% and from the top, it shipped to the 100%. At the same way, we need to place the after pseudo element. I duplicate this section and this time, I'm going to target after element aer. Then at the cariras from the right, I'm going to make it -25%, and from the top, I'm going to say it zero. I'm going to set this file. This is where we place this after element. Then we need to work on Hover selector. Let me show you. First, I'm going to work on before element Hover selector. I'm going to type, anchor, dot, hover, then we need to select the Span tag span before element, span, colon before. Then inside the calices when I hover on this element, I want to move this element to the top side here I'm going to type from the top top top value zero. And also I want to say it right value, right, right value. And for the dike, I'm going to use it 25% as it is, 25%. And I'm going to set this file. A set this file, if I hop on my cursor on it, you can see the result. This is how it moved this element upside. Now we need to work on this element, the per psudo element of this pan tag. So I copy this section and paste it here. And this time, I to select the after element, after. Then here, we need to define the position. Here just we need to make the right value zero, and we need to set this file. After set this file, if I hover my cursor on it, you can see the result. This is how it complete the background with the four different element. Next, we need to change the color of the text when I hover on it. I'm going to create a Her selector of anchor tag, A, colon Her. Then inside the car process, I'm going to use color property color, and I'm going to assign this dark gray color but has tag to two. I'm going to set this file. After set this file, when I hober my car on this button, you can see the result. And our last duty is we need to hide the overflow area outside the Anca tech area. For that, we need to jump into the Anca tax selected this one, then here we need to use the property called overflow. Overflow hidden. I'm going to set this file. A set this file. This is how bit and look like. If I hover my car on this element, you can see the beautiful O effect. I hope now it's clear for you how we can create this beautiful button Heft. Thanks for watching this video. Stay tuned for our next tutorio. 14. Border swapping button hover effect part 1: Hello, guys. Good to see you back. Once again, I'm back with another tutorial relitate our project. And today, in this tutorial, we are going to create this beautiful button ha ffect. So if I Her my cars on it, you can experience this transition. You can see our button have four long border around it. Also, you can notice they don't have same height and width according to the button. It's a little longer than that. You can notice left and right border hab larger height, and top and bottom boerhb larger width. We will learn how to do that and how to make this transition. So let's jump into the visual studio code editor. As you can see side by side, I open my result studio code editor and my browser using if server extension, and I already created an HTML document named index dot TML. With that, I already create this tile CSS file and I link up this file with this document. So first, inside the body tag, I'm going to add an anchor tag, A, and hemo type hover. Me. Then I'm going jump into the style CSS file, and at first, I'm going to style the body tag, body. Then at the Calif first property, I'm going to use Marji I'm going to say margin zero from all of the direction. Then I'm going to say display. Display, I'm going to make it flix because I want to place the ancha tag middle of the speech and heterotype align items center. Also, I'm going to type, justify content, justify content also center. Then I'm going to use another property called height, height, and I'm going to assign height 100 VH with viewfd height. Then I'm going to assign a background color. I want to assign dark background color, so herm type, background color, hastag 222, this color code, dark gray color. And now I'm going to target the anchor tag using its tagnym A, and inside the aliases, the first property I'm going to use text decoration, text, decoration, first, I'm going to remove the underline, so I'm going to use none. Then I'm going to convert these text into uppercase sooty, text, transform uppercase. After that, I'm going to define the font size font size 22 pixel. I think to do two pixel is great for it, and I'm going to set this pine. Then I'm going to change the font family font family, I want to use aerial font. Aerial. After that, I'm going to define letter spacing, gap between the characters, letter spacing, and I'm going to make it three pixel. Also, I'm going to define color. Color, I'm going to make it yellow color, otherwise, white color. I think white color is good for it, white. After that, I'm going to define height and width, height, height, and I want to assign 60 pixel height. Then I'm going to define with. We. Also for weed, I'm going to use 200 pixel. I think it's good for it. Then I'm going to define line height, line height, and her assign line height, 60 pixel. Also, we need to align the text center of this page, so type text align text align center. I'm going to set this file. Now we need to define border, border, and I want to use two pixel solid border, solid, our border color is for now, I'm going to use I think blue color. I think blue is good. Blue. Then I'm going to define the position, position relative, and I'm going to set this file. After I set this file, this is how it looks like. Now we need to work on the long border we saw in the dim to figure out how to create them, we need to work step by step. First of all, to create the left and right border, I will use the before pseudo element. Let's create the before pseudo element of this Anca tag, A, colon before. And inside the calibrss first, I'm going to create the blank content. Content, colon, it's a blank, and I'm going to do in this line. After that, I'm going to define the position. Position is absolute. Next, I'm going to define with and height. Height, I'm going to make it 60 pixel, then I'm going to define with Wi I'm going to make it 200 pixel. I'm going to define top position, top. From the top, I'm going to place it zero and from the left, I'm going to place it zero also. Now you can notice here we assign same height and weight, which we assign in our anchor tag. Until now, the before pseudo element have the exact size of this encord element. It has similar height and similar width. If I set this file, it going to sitting on top of it. Now I'm going to create the left and right border with it. Let me show you some type bordered, left, and I want two pixels bottle then is a solid border also solid. Then our border color is, I'm going to assign red color. Red. Next, I'm going to create the border right. Border, right, and hemo pass two pixels, solid border, solid, and our border color is Also I want to use the same border color which I use for the text. I'm flight this one. Now if I set this file, this is how it look like. It's a white border and here you can see the red border, and it's sitting on the original blue colored border. That's why you can hardly see them. Now I want to make this two border little longer. I'm going to increase the height of this two border. I'm going to increase the before pseudo element height. I'm going to make it 90, and I'm going to set this pile. Now you can see now it's look a little longer. Now the borders are 30 pixel longer than our anctag height because here we assign 90 biixel. And now we need to align this border middle of this content. I want to equally divide the border in the top and the bottom. For that, here, I'm going to use just top value. I'm going to make it minus fif ping. So it's going to divide the border at top and bottom. So I'm going to set this file, you can see the result. So this is the first part of this tutorial. At the next part of this tutorial, we are going to create the top and the bottom border. So thanks for watching this video. Stay tuned for our next part. 15. Border swapping button hover effect part 2: Good to see you guys. This is the second part of this tutorial and here at the section, we are going to create the top and the bottom border. Let's jump into the style CSS spie. Here, I'm going to create the upper pseudo element A at the rate upper. Then inside the Caris first, I'm going to create a blank content, contain and it alan content, then I'm going to define the position. Position, I'm going to pass absolute. Then I'm going to define height, height. Here I'm going to assengn height 60 pixel. Next, I'm going to defined, with, and I'm going to ascend with 230 pixel, and then I'm going to position it. From the top for now, from the top, I'm going to make I'm going to pass zero and from the left, I'm going to pass also zero. Then I'm going to assign border. Bordered. First, I'm going to assign border top, border top, and at top, I'm going to assign two pixels, solid border, and our border color is weight. Then I'm going to define another border for the bottom border bottom. Border bottom, two pixels solid border, and our border color is white. I'm going to sub this file. After set this file, this is how it looked like. Now you can see we have the top and the bottom border, and it is a little longer than width of this button. As you can see, Hero is set with 200 pixel, but for the border, we take 230 pixel and now we need to ship the border to the left side, little bit. We need to align it center. We need to vertically align it. For that, instead of zero, her pass negative 15 pixel px I'm going to satisfy this file, this is how it looked like. And now we don't need this blue border anymore. I'm going to hide this border. I'm going to comment out this line and set this file. Are set this file, this is how it looked like. And now we need to work on the hover effect. Remember, when I hover over this line, I want to change the border to their faces. I want to shape the top red one to bottom and left red one to right side, and this can be done very easily. So let's work on the hover pseudo element. Let's create the Her selector of deferred positive element. So tie, A, colon, hover, and then colon, I'm going to tie before. Then in the calibrass I'm going to use transform Pooper transform, and I'm going to pass rotate Y value, rotate Y. Then I want to rotate this element 180 degree, 180 DG I'm going to set this file. I going to rotate the before psudoelement at Y Xs 180 degree. If I hover my cursor on it, instantly, you can see the result. Basically, it's going to flip on the YXSder to happen smoothly, we need to go inside this before pseudo element and here we need to use transition. Sumo type, transition all and our time is 1 second. Obviously this file when I hober over this link. As you can see, this is how it changed the position. Basically it flip the element. Now you can see the border change the position exactly we want. Now we need to flip the after element. For that, I'm going to duplicate this section and instead of using before, I'm going to select after. Then inside the Cls here, I'm going to use rotate x value. Instead of using rotate Y, I'm going to use rotate x and I'm going to set this file. After I set this file, if I over my car on this button, you can see the result. But also we need to add transition on this upper pseudo element. I copy this value and property, the same value and property, and I'm going to paste it here. Now, if I set this file and whoever my cars are on this link, here you can see the beautiful transition effect. But if you want to make it more attractive, you can add little transition delay on upper pseudo element, some type transition B, and I want to durate up to 0.2, otherwise, 0.2 second. If I set this file and Herm cars are on it, now you can notice after I move the left and right, it moved the top and bottom, and it creates a beautiful effect. So I hope now it's clear for you how we can create this beautiful Hover effect. So thanks for watching this video statue for our next studio. 16. Creative border growing button effect: Hello, everyone. Welcome to the new lesson in this course. In this lesson, we're going to build another cool button HaiftT one. As you can see, this button hab border at top left corner and bottom right corner. And when I Huberm cursor, it increases the border height and width, and it's sit on this beautiful button Harift. So let's see how we can build. As you can see, side by side, I open my salt Studio code editor and my browser using Live server extension and I already created an TML document to name index dot html. With that, I also link with style CSS file and it's an empty file. Now, at first index dot StimLPage I'm going to create a button. Here I'm going to type button, and inside this button, I'm going to type submit. I'm going to set file. After sets file, this is how it look like. Then I will jump into my CSS file. Style or CSS. At first, I'm going to target the body tag, body using its tag name. Then inside the aliases, first, I'm going to say margin and I'm going to say margin zero, and I'm going to say margin zero, then I'm going to define the height, height and I'm going to set it 100 H for height. Next, I'm going to define display. This play, I'm going to use display flex. After that, I'm going to align this item, align item center, justify content, justify content also center. Then I'm going to define the background color. Background color here I'm going to use hashtag 27, 2727. I'm going to set this file. Up to set this file, as you can see, this is dark gray background color. Also, we align this button middle of this page horizontally and vertically. Next, I'm going to style this button tag, Song type button, button inside the carvers, first, I'm going to define border. Border, I'm going to set it none. Then I'm going to define padding padding. From top and bottom, I'm going to assign 12 pixel, and from left to right, I'm going to assign 40 pixel. After that, I'm going to define background color. Background color. For the background color, I'm going to search for wave color. Wave color and helm open any website. So from this web color, I'm going to pick one of the color. So I would like to go with this color light salmon. So I copy the hexa value of this color, and I'm going to paste it here. I'm going to set this file. Then back to the document. After that, I'm going to define font family. Font family, I'm going to use any font you can use aerial. Then I'm going to define font size. Font size, I'm going to use 22 pixel font size. Next, I'm going to convert this text into uppercase, text, transform uppercase. Also, I'm going to make our cursor point when I hop my cursor on this button. So to type cursor, I'm going to make it pointed. Also I'm going to position it. Position, I'm going to make position relative. I'm going to set this file. After set this file, this is how it looks like. Also, I'm going to assign little font to it font. I need a little bolder font here I'm going to assign 700 and I'm going to save it again. With that, I'm going to change the color text color, smotype color, and I'm going to make it white. I'm going to set this file. We style this button successfully. Now let's create the borders. First, we are going to create the border on the top left corner using before pseudo element, then we are going to create the border at bottom right corner using after psudo element. To create it, basically, we need to create a small box. Let me show you how. Here, I'm going to type button, colon, before element. Before. Then inside the colors, the first property, I'm going to use content, content, and here I type, I'm going to create an empty content. After that, I'm going to define the position. Position, I'm going to make it absolute. Then I'm going to define wd. Width, I'm going to make it 24 pixel. Also, I'm going to define height. Height, I'm going to define it 24 pixel. Then to position the square box at that corner at the laptop corner. From the top I'm going to position it zero and on the left side, I'm going to position it zero again. Also, I'm going to define a background color, background color, and for now, I'm going to define red color, RED, that we can understand the square box very easily. Preset this file, this is how it look like. Now, if you remember, our border ware outside the area. Outside, I want to say outside the button area. I'm going to ship the square box, lept and little bit top. So I'm going to ship it negative five pixel, type minus five pixel, five pixel from the lab. Also, I'm going to use the same value for the top. I'm going to set this file. After set this file, you can see the result. Now, after ship it five pixel from the top and from the left, it go outside from this button area. Now, let's add the top and left border. So here, I'm going to use first, I'm going to use top border some type border, top. I want to use two pixels, solid border, and our bottom color is exactly the same color we use for the button. Copy the value color value, and I'm going to paste it here. Then I'm going to duplicate this line. This time, I'm going to create the border at left side, bottle late. I use the same border and I'm going to set this file. Set this file, you can see the border. On the top side and other one is the left side. Next, we need to animate this border. I want to grow when I hober on my cars on this button. We can do that very easily. We need to increase the height and the width of this square box. Let's create the hober selector of this button on the type button, colon, hole, colon, before. Then inside the civuss I'm going to define height height 100%. Also, I'm going to define width, width 100%. And I'm going to set this file. After set this file, if I hover my cousin on it, you can see the result. But we need to add little transition on it when I hover it on it because instantly it increased the height and width of this bar. Here I'm going to use transition property. Transition all. With that, also, I'm going to define the time for this transition which is 0.25 second. I think it's enough. I'm going to set this file. After set this file, if I hop my cars are on it, you can see the result. After add the transition, after set this file, if I hop my cars are on it, you can experience this transformation. Now, we need to remove this red background. We need just only the border. For that, I'm going to comment out this line and I'm going to set this file. If I set this file, you can see the result. Now we need to do the same thing for the border right corner. For that, we are going to use up Posido element. I'm going to copy this section and I'm going to paste it after the Her selector. Then I'm going to first, I'm going to change before after. After that, I'm going to change the position. First, I'm going to change top to bottom, and then I'm going to change left to right. After that, also, we need to change border top to border bottom and border, left to border, right. I'm going to set this file, and here you can see the result. And at the same way, we need to create the hover selected for this after element. I copy this section again and I'm going to paste it here, and here I'm going to replace the four with after. I'm going to set this file. Now after set this file, if I bar my cards are on this element, we achieve this desired result. Harry achieved this beautiful button Hover effect. I hope now it's clear for you how we can create it. Thanks for watching this video. Stay tuned for our next project. 17. Creative first letter rotating button effect: Hello, guys, nice to see you back. Once again, I'm back with a new project related button Haift in this project, we are going to create this beautiful button Haift. As you can see, when I Hoberm cards are on this button, you can notice a background rotate a little bit. Also, it increased the size of this first letter, B, and also it rotate the B letter, 360 degree. Let's see how we can create this beautiful button Hari fit. 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 SML document named index dot HTML. With that I link this document styler CSS file. We are going to start adding a Anca tag A and inside the ncatag I'm going to take a span tag span and inside the span tag, I'm going to type capital letter B that we can animate this letter separately. Then outside the span tag, I'm going to type the rest of the word. Button. Then I'm going to reroad my browser. Now we need to align this button middle of this page horizontally and vertically. For that, we need to go jump into the style dot CSS file. At first, I'm going to target the body tag, body the inside the cali vis first, I'm going to define height, and I'm going to set height 100 viewport height. Then I'm going to display display I'm going to make it flakes. Ap that I'm going to apply, justify contain centered. Then I'm going to type align items also centered. Up that, I'm going to define the font family font family, and I'm going to use Aerial font, aerial. And at last, I'm going to hidden the overflow area. Overflow hidden. Then I'm going to use background color. For background color, I'm going to type Hashtag 22, this dark gray background. I'm going to set this file. Next, I'm going to style this catch some type A and inside the CarissF property, I'm going to use text decoration. Text decoration, I'm going to make it none because I want to remove the underline. After that, I'm going to define wet. What, hed set weed, 160 pixel. Then I'm going to assign height. Height for height, I'm going to assign 60 pixel. And I'm going to define color colored, and I want to assign text color white. After that, I'm going to define border. Border, and I want to use, and I want to use two pixel solid color border, solid two pixel solid color border, solid, and our border color is white, Hastag if if A. I'm going to sub this file. After I set this file, this is how it look like. Then I'm going to align the text middle of this container. So to type text align, text align center. After that, I'm going to define line height, line height, and I want to assign line height, nearly 60 weixel I think 60 pixel is good. After that, I'm going to define font size font size, and I'm going to make it 25 pixel. And I'm going to sub this file. After sub this file, this is how orbit and look like. Then I'm going to make the position relative, and also I'm going to add transition. Transition, all of this element and our transition time is zero point something two second. I think it's good for it. I'm going to sub this file. Now let's create the white background. When you hover over this link, it going to rotate this background and we will use before psudoelement for that. Here I'm going to type ancha tag before psudoelement. Before inside the caliber says, first, I'm going to create a blank content. Content and I want to create a blank content. After that, I want to position it, position, I want to make it absolute. Also, you need to place it from the top, I'm going to pass zero and from the late, also, I'm going to pass zero. Then I'm going to define with height to this element. I'm going to use 100% and height. As I'm going to use 100% percent. Then I'm going to define background color. Background color, and I want to use white color, this color code. I'm going to satisfy. After satisfle as you can see, it covered the whole button and order to appear text above it, we need to use Z index. Z index minus one minus one, and I'm going to satisfy. Now, it should be invisible and when I hover over this link, it should appear and fade it. Also it rotated. I'm going to say opacity zero and I'm going to transition transition, and I'm going to define t 0.8 second. Next, I'm going to create a hover selector of this differ element. So here, I'm going to tie. So here I'm going to tie nga tag, colon, Hal. Over selector. Then I'm going to target the before element before. Then inside the caliber says, Here, when I hover on it, I want to set opacity. I'm going to make opacity one. I want to make it fully opaque, not the transparent. And then I'm going to apply transform property, transform and I want to rotate this element. Soon to type rotate. Transform rotate and I want to rotate it, I want to rotate this 15 degree DEG I'm going to set this file. After I set this file, when I over my cursul you can notice first, it's going to make the white background, the transparent background opaque, then it's going to rotate the element. Then it's going to rotate the background element 15 degree. Now after that, I want to change the text color when I over this link. I want to make this text color black. For that, I'm going to create a hover selector here I'm going to type Anca tag hover. Then inside the colors, first property, I'm going to use color. Color, I'm going to make it white, and I'm going to set this file. After set this file, if I hbar my cursor, sorry, we need to make it black because we already use white text color. I'm going to make it has tag to do this color code. I'm going to set this file. After set this file, if I hover my cursor on it, you can see the result. Now let's focus on the first letter B. If you remember, when I hover my cursor on this button, it increased the first letter size, and as you can see, Harry put the B letter inside the span tag. I'm going to target this span tag. Here, I'm going to type A, inside this A tag, anchor tag, I'm going to target span tag, span. Then inside the livers, first property, I'm going to use color, color, and I'm going to make it transparent. Then I'm going to provide the position position and I want to make it relative. Now you can see the first letter is now invisible because we said the color transparent. That's why it is invisible. Next, I'm going to create the before pseudo element of the span tag. Here I'm type A, span, a span, the before pseudo element. Then inside the Class, I'm going to create content, content, and put the tal letter B. Then I'm going to position it position, I'm going to make it absolute. Next, I'm going to provide color, color, and I want color this dark gray color. Sorry, I use white color, white. And then we need to use transition property. Transition. And here, I'm going to make transition on. And also need to define the transition time, which is 0.2 second. I'm going to set this file. Now, let's work on the Hard effect of this pen tag, Sandfoelement, some type anchor tag, Hal, span, colon, BFO. Then inside the color resis first, I'm going to change the color when I Hobar it. So type color, I'm going to make it dark colored 222. Then I want to increase the font size, some type font size, and I'm going to make it 80 pixel. Finally, we need to rotate type, transform, rotate, and I want to rotate it 360 degree D EG, and I'm going to set this file. So set this file if I hober over my cursor on this button, as you can see, the first letter B, rotate 360 degree. But the problem is, it's covered up the other letters. I need to move it little that it doesn't hide the other letters. With that, I'm going to use translate propriety, some type, translate. I'm going to ship to the negative 65% from the XXs and negative 10% from the YXs. After set this file, if I ho my cursor on this button, you can experience this beautiful button hover effect. Now it's shipped to the XXs -65% and and it's shipped to the YXS -10%. That's why it creates this beautiful effect, but what 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. 18. Four border growing bottom effect: Hello, guys. Nice to see you back. Once again, I'm back with a new project. Today in this project, we are going to create this beautiful button hover effect. As you can see when I hop my cars on this button, four different border covered this button. Let's see how we can bid. As you can see side by side, I open my user Studio code editor and my browser using fserEtension, and I already create an SML document to name index dot HTML. With that, I already create Stylod CSS file and I link this Styload CSS file with this TML document. Now, at first inside the body tag here I'm going to create a button tag. Button. Then also, I'm going to take a span tag, span, and I'm going to set this file. After set this file, this is how it looked like. Now, we need to jump into the stylo CSS file. Let's jump into this stylo CSS file and start styling. At first, I'm going to select body tag, body. Then inside the body tag, the first property I'm going to use margin. Margin, I'm going to assign zero. Then I'm going to assign display. Display, I'm going to make it flex. Next, I'm going to assign align item, align items centered. Also moti justify content center. Then I'm going to assign height, height 100 VH viewport height. Then I'm going to assign font family, font family area. Next, I'm going to assign background color, subtype background color. For that, I'm going to use dark grey color, hass tag 222, and I'm going to set this file. After set this file, you can see the result. Now you can notice it aligned the button middle of this page horizontally and vertically. Now let's target the button. Then I'm going to select the button. So to tie button inside the color resist. Inside the color resist, the first property I'm going to use background color, background color, I'm going to say background color red. The next property, I'm going to use border, Border, and I'm going to remove all the border from it, so I'm going to use Nan Velu. After that, I'm going to position it. Position, I'm going to make it relative. Then I'm going to define Wieden height. For weed, here I'm going to use 400 pixel and for the height, I'm going to use 120 pixel. Then I'm going to convert this takes, the button text into uppercase. Type takes, transform, takes transform, uppercase. Then I'm going to set this file. After I set this file, we need to increase the font size. I'm going to make font size font size, and I'm going to make it 45 pixel. And I'm going to save it again to order the text inside the button vertically and horizontally, I'm going to use line height. Line height, 120 pixel. Also also going to type text line center. Next, I'm going to add color to this spot color and color, I'm going to make it white. With that, I'm going to add letter spacing. Letter spacing, I'm going to add 15 pixel, and I'm going to set this file. After set this file, this is how our button look like. Now, let's create the top border, which comes in lept right side. For that, I'm going to use before pseudo elements. I'm going to type button button, colon, and here I'm going to type before. Then in the curses, first, I'm going to create a blank content. Content, it's a blank content. After that, we need to position it, position, and I'm going to make it absolute. Then I'm going to define where I'm going to place. From the top, for now, I'm going to place it zero from the left for now, I'm going to place it zero also. Next, I'm going to define width. Width, I'm going to use 100 person. After that, I'm going to define height. Height, but for height, I'm going to use four pixel, four pixel. And also I'm going to define the background color, background color, and I'm going to make it white. I'm going to sub this file. After set this file, this is how our border look like. Basically, it's not a border, it's a deep element. Now I'm going to move this element, before pseudo element lap side. Let me show you how. Here instead of using b value zero, I'm going to use -100%. I'm going to set this file. After I set this file, you can see the result. Now the line shipped to the left side. Next, I'm going to add transition, transition all, and I'm going to add zero point 0.5 second. I'm going to set this file. Now, when we heard about this button, I want to back the border to its original position. So to type, button, colon hover, colon, before element, before. Then I want to move this element ep to right side, some type, left value, zero is going to back to its original position. After set this file, if I hop my cursor on this button, you can see the result. At the same way, I want to create the bottom border. I'm going to ubicate the whole section and instead of using before, I'm going to use Ara. Then I'm going to change the position. Instead of using top, here I'm going to type bottom. Also, I'm going to move this element right side. Here I'm going to pass right -100% and I'm going to set this one. Also, we need to make some changes in over selector instead of using before, I'm going to use after instead of using led value, I'm going to use right. I'm going to set this file. I set this file, if I hold my Custer on it, you can see the result. Now at the same way, I'm going to create the left side and right side border. For that, again, I'm going to select this section and I copy it and I'm going to paste it here. This time, instead of using button, I'm going to use span. At the same way, I'm going to create the empty content just to change the position and we then height. This time, I'm going to use four pixel week four pixel and height 100%. Then I'm going to change the top value. Instead of using zero, I'm going to use -100%. And then I'm going to change let to right value, let to right. I'm going to make this value zero, and I'm going to set this file. After set this file, this is where we put this element. Now you can see it is sitting above the button, the line sitting above the button. Also, you can notice. Also you can notice it plays it right side of this button because we use right position zero. Now when you hover this button, I want to back to its original position. I want to say, from the top, I want to make it zero. So I'm going to create the Her selector of this button, so to tie button, colon hover, space, span, colon before. Then inside the Carlss then inside the car recess, I'm going to use top top value, I'm going to make zero. From the top, I want to place it zero position. I'm going to set this file. After I set this file, here you can see the result. When I open my car on this element, you can notice the result, how the before pseudo element in right side down to its own place. Now at the same way, we need to create the other element for the left side. I'm going to duplicate this section, the whole section, and instead of using before, I'm going to use after. To create the final border, instead of using top 100%, I'm going to make bottom. Bottom, 100%. -100%, instead of using right, I'm going to use left and I'm going to set this file. After I set this file, here you guys see the result. This is how we create it. Now, we need to move it upside when my cards are on it. For that, instead of using before, I want to use after element with Hover Effect. Instead of using top, I'm going to use bottom. I'm going to set the file. After I set this file, you can see the result. If I open my cursor on this button, you can see all the borders come to its original place when you hover on it. The last thing we need to do, we need to hide the overflow area. We need to hide these borders so we need to use overflow hidden. Inside the button head, I'm going to use over perverting. Overflow hidden. Also, I'm going to make the background transparent. And I'm going to set this file. Now after set this file, if I hop on my cutter on this button, you can see the result. This is how we can move and extend all the borders from the four different side and we create a beautiful button Hover effect. Thanks for watching this video. Stay tuned for our next project. 19. 2 cuts button effects : Hello, guys, nice to see you back. Once again, I am back with a new project tate CSS button hover effect. And today in this project, we are going to create this beautiful cutting button hover animation. Here you can see two cards on top botter and bottom botter. And when I hover it on it, as you can see, it covered with black background color. Also, it changed with the text color. So let's see how we can build this beautiful button hover effect. 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 index dot HTML. With that, I already create a style file namestyle dot CSS. I link this file with this document. Then inside this body tag. At first, inside my body tag, I'm going to take an anchor tag. Then inside this anchor tag, I'm going to take a span tag. Span and inside my anchor tag hemo type button. Not bottom tag, just button. I'm going to set this file. After set this file, this is how it looked like. Now we need to jump into the style CSS file, and at first, we need to align this button middle of this page. Also, I'm going to change the background color. Here, first, I'm going to style the body section body. Then in the calibrses first probity, I'm going to use height. I'm going to assign height 100 viewport height. Then I'm going to assign this probability. Display flakes. Justify content, justify contain center. Also align items center. Then I'm going to say font family. Font family, I'm going to use Aerial font. After that, I'm going to hid in the overflow. Overflow hidden. I'm going to set this file. A to set this file, as you can see, we successfully align these, but in middle of this page. Next, I'm going to style the anchor tag. A, then inside the calibraces, the first property I'm going to use text decoration. Text decoration, I want to remove the underline, so I want to say none. That I'm going to set with 160 pixel. Then I'm going to set height, height only 60 pixel. Next, I'm going to use color. Color and here, I'm going to set color black. After that, I'm going to say line height. Line, height, I'm going to set it 60 pixel. Then I'm going to align the text center of this button type text align text align center. After that, I'm going to make it capitalize. The text capitalize some tip text transform, text transform, I'm going to make it capitalize. Next, I'm going to define the font size. Font size, I'm going to make it 25 pixel. After that, I'm going to define the position of it, position, I'm going to make it relative, and for the smoothness, I'm going to use transition property. Transition, all of the element and our transition timing is 0.2 second. I'm going to set this file. After set this file, this is how our button look like. Next, I'm going to target the span tag which is inside the anchor tag, sub type A, span. Then inside the car avases I'm going to define the position. Position, I'm going to make it absolute. After that, I'm going to define the width width 100%. Then I'm going to define height, height also 100%. After that, I'm going to define position. I want to place it top top left corner, some type for top value, I'm going to pass zero. For late, I'm going to pass also zero. Then I'm going to define a background color. Background color. For now, I'm going to use red color. I think for example, then I'm going to define the border. Border, and I want to use two pixel, two pixel, and our border is solid boder Solid. Solid border. Solid, and our border color is black. I'm going to set this file. After set this file, this is how it looked like. Basically, I don't want this red background, I just want the border, so I'm going to comment out this lion, don't need it. I'm going to set this file. Next, we need to create the cuttings that exist top and the bottom border, and we are going to use before pseudo lamin to create that. Here I'm going to tie span colon before before pseudo element. Then inside the lorss the first property, I'm going to use content. Content is a blank content. There I'm going to define the position. Position, I'm going to make it absolute. After that, I'm going to define width, Width, here, I'm going to use eight person width. 8% of this button. Next, I'm going to define height, height, and I'm going to increase the height, so I'm going to use 500%. 500% of this button height. Next, I'm going to define a background color. Background color, I'm going to use red color red. And I'm going to set this file. After set this file, this is how it look like. Now I'm going to center this element metror of this button. For that, I'm going to pass to value, top, and I'm going to pass 50%. Next, I'm going to define lip position, p also 50%. Then I'm going to use transform property, transforme I'm to pass translate value, translate and -50%. For XX and for xs -50%. I'm going to set this file. I accept this file. This is how it looked like. We successfully align this element in the middle of this button. Now the red dground is centered inside the button. But the problem is, it is in front of text and I want to make the text appear in front of it. I'm going to jump into the span selector and here, I'm going to use Z index, Z index, I'm going to pass minus negative one, and I'm going to set this file. This file, as you can see it solves the problem. Then to achieve the cutting effect, I'm going to rotate this element. Here I'm going to type, rotate, and I'm going to rotate it up to 60 DEG, I'm going to sub this file. I think I'm going to rotate it and I'm going to rotate it at opposite directions, so I'm going to make it -60 degree and after set this file, you can see the result. We rotate this element counter clockwise. Now, let's work on the hovering effect. When I hover over this link, I want to extend the width of this red element. I want to make it 100% instead of 8%, that we will cover up the link completely. But before in my span tag, I'm going to add transition all transition all and I'm going to add 0.22 second. After that, I'm going to create a hover selector up before spentag. A colon hover. Space, span, then I'm going to tie colon, colon before. Then inside the calibraces. First, I'm going to extend the weed, if I hover my cars on it. We, some set with 100 perse. After that, I'm going to change the background color. Background color, I'm going to make it black. Now, after I set this file, if I hover over this link, you can see the result. It extended up to 100%, also, make it black when I hover on it. Because of this black color, we are not able to see the text anymore. When I hover about this link, I want to make it white. I'm going to tie anchor hover. Then inside the color ress I'm going to make the color white. I'm going to set this file. After I set this file, if I hover my color on it, you can see the result. With that, on hovering, I want to rotate this red background. I want to make it 60 degree when I hover on it. Positive 60 degrees. I'm going to copy this line and I'm going to paste it here. I'm going to change negative 60 degree to 60, positive 60 degree and I'm going to set this five. Whenever I hover about this link, as you can notice, the red background root at 60 degree. And the only thing is late, we need to change the red background and we need to make it white. Because of it, we are going to achieve these two cutting. I'm going to jump into the before elements section and I'm going to make it red to white. I'm going to set this file. After set this file, here you can notice the cuttings. Also, I'm going to jump into the anctag selector, and here. I'm going to say it overflow, overflow heat. Atomic overflow hidden, if I set this file, as you can see, I think there is a problem with it because I think, yes, we need to use box sizing. We do not use box sizing for that. I'm to use the universal selector star and inside the square inside the Calibra here, I'm going to type box sizing. Box sizing boerbx. If I set this file, you can see the result. Now we have these two cutting my inner button. If I hold my curs on it, you can see the result. This is how it animate this button. Basically it increases the width of this before element. Instead of 8%, it increases it up to 100% and provide this beautiful button hover effect. I hope not slur for you. Thanks for watching this video, stay tuned for our next project. 20. CSS 3D Flip on Hover Pure CSS3 3D Button Hover Effects: Hello, guys. Good to see you back. Once again, I am back with another project. And today in this project, we are going to create this beautiful button hover effect. We are going to build this three D button hover effect. As you can see, there is a button. If I Her my cursor on it, you can see the result. Here you can see the opposite part of this button. It flip the button and return a new taste. Click Here. It's a Her effect animation button, but it is pretty advanced. So without wasting your time, let's start the practical and see how it's work. As you can see, side by side, I open my Visual Studio Creator and my browser using lp server extension. And also, you can see I already create a TML document named index dot TML. With that, I create a CSS file, style dot CSS, and as you can see, I link this style file with this TML document. So first, I'm going to create a NCat tag inside the body tag, S type A. By default, I don't want to redirect it, so I want to use has tag. Now inside this anchor tag, I'm going to create three new span tag, span class, front. Then I'm going to duplicate this span tag to time. Our first span class name is front and our second span class name is center, sum type, center. Our last span class name is suntype B. Then in our front side, I'm going to type click and in our backside, I'm going to type hair. For our center span tag, I want to leave it blank. If I set this file, as you can see, as you can see in my browser, here it print, click here, top left corner of this browser. I successfully done our stable part. Let's move to the CSS file and style this page. At first, I'm going to style our body tag, some type body. Inside the class, I'm going to set marine zero, Barzin zero, and also I want to set padding zero padding zero. Then I'm going to use font family propity SotypeFont family, Sansa. A I'm going to set a dark background color to our body. Background. And I'm going to use hexa VH, 26, 26, 26. If I set this file, you can see the result. As you can see in my browser, now our background color is dark gray, and now we need to style this anchor tag. Inside the anchor tag, we have total this pan tag. So let's style the anchor tag. So slate, A, inside the Cali recess. At first, I'm going to use position property position. Position absolute. Now I want to align this anchor tag middle of this page. For that, I'm going to use top property, top 50%. Then I'm going to use P property. P 50%. If I set this file, you can see the result. As you can see, it align our anchor tag middle of this webpage. Next, I'm going to use transform property. So type, transform here, transform. Transform translate. As you know, using translate method, we can move an element from its current position according to XXs and YX. For XXs I'm going to pass -50% for YXs also I'm going to pass -50%. Then I'm going to say heightened weed to this encer tag. At first, I'm going to tie weed. With 200 pixel. And then I'm going to say it height property, height, height, 60 pixel. If I set this file, you can see the result. And then I'm going to say text align center. Text align center. As you know, we are going to create a three D uber button. For that, we need to use another property, which is transform style, Sumo type, transform style. Transform style here I'm going to use preserve three D value. This properties specify how nested elements are rendered in three D space. As you know, we need to use this property with transform property. Without transform property, we cannot use this property. We learned about it in our tutorial series. Then I'm going to use another property which is prospective Prospective 1,000 pixel. As I'm going to say transform or in position, transform or Z center center. If I set this file, as you can see, now it perfectly align our content middle of this web page. We cannot understand this prospective and three D transformation because we do not style our span object. Now we need to style our spare object. As you can see, we have total three span object. Let's style all the object at once. For that, I'm going to select span tag. Span. Is that the Kalis is, at first, I'm going to type position property. Position absolute. Next, we need to align this span tag, so top zero, it zero. And also, I'm going to say height and weight, height, 100%. Weight, 100%. And then I'm going to use did Display block. And also, I'm going to align the text inside the span tag. So I'm going to type text align text align center. And then I'm going to set line height, line height, 60 pixel. If I set this file, here you can see it overlap our text. Next, I'm going to set font size font size, 24 pixel. And also, I'm going to set a background color to the span tag. Background. I'm going to use RGVA value RGB. As you know, first, we need to pass red value, then we need to pass green value at last blue Value. With that, we need to pass Alpha Val. We can control the transparency using Alpha Val. That's why we need to use this elm. So here, I'm going to pass 255 for red, 255. And then I'm going to pass once again, 255 for green and also 255 for blue. And for our Alpha Valu, I'm going to pass 0.10. And now we need to change the transform style. So I'm going to tie transform style transform style, preserve three D. Now I don't want to show the backside of our span tag. When it rotate, we don't want to show the backside. For that, we need to use Apoparty and you know that, which is backspace visibility. Back Backspace visibility, and I'm going to set hidden value because I don't want to show the backside. Then I'm going to set the border radius of the span tag, border radius, 30 pixel or next properties takes transform. Next, I want to transform the text into a uppercase. For that, I'm going to use Tex transform property, takes transform, uppercase. Next, I'm going to set a color to our text. Color White. If I set this file, you can see the result. With that, I want to say it transition property. Transition. 1 second. As you know, we have total three span object inside the cat tag. I'm going to transform all the span tag differently. At first, I'm going to transform the front one and then I'm going to transform the back one. At last, I'm going to transform the center one, and we are going to run the transformation using Her selected. Let's back to the CSS file and start with our first span tag. I'm going to type span dot front. Then inside the alias, I'm going to use transform property, Transform, transform, rotate, X, and I want to rotate it zero DT. With that, I want to move it at Zdx's direction. So I'm going to type translate ZT pixel. If I set this file, you cannot see the result because I want to make this transformation when I hober my cursor on this button. Now I want to rotate this button when I hoar on it. For that, we need to create a Her selector. So I'm going to duplicate this line and I'm going to tie cut tag, colon hover. So when I hober my cursor, I want to rotate our front span tag minus 18d. If I set this file and hober my cursor on it, you can see the result. You can see our first span tag rotate minus 180 degree. Same thing we need to do for our back span tag. So I'm going to select this code and we get this line. So here I'm going to type span dot B. By default, I want to rotate it 180 degree, and I'm going to use same value transit pixel. In our Hober selector, I want to rotate it zero DD, back, and I want to rotate it zero. If I set this file and Hobermcas are on it, now you can see the rotating three D effect. Now I want to set a background color for our center span tag. This one. For that, I'm going to type span dot center. Inside the aliras I'm going to use background property. Background, and I'm going to use gradient color, and I'm going to use linear gradient. And I'm going to use lip direction. So I want to pass to it. Oma and now I'm going to use hexa Color Val has tag, C 30 1a5b. It's a pink color and our next color is has tag 7129 BD. It's a purple color. If I sit this file, you can see the result. Now for our center span object, I want to turn on backspace visibility. I'm going to type Backpace visibility and I'm going to use visual Value. Then I'm going to create Over selector for our center span tag. I'm going to remove front keyword, and I'm going to type center. For rotates, I'm going to use minus 180. But for translate st, I'm going to use zero pixel. If I set this file and Huber Mikaza on this button, you can see the three D effect. So we successfully create three D flip Huber button. I hope you like this project. Thanks for watching this VD. Stay tuned for our next exercise. 21. Fade in hover animation on image: Hello, everyone. Once again, I'm back with a new project related image hover effect. Today we are going to peel this beautiful fading Her effect on image. So when I hover my cars are on it, as you can see, it scale up the image, also it rotate the image. And also you can notice a fading effect about the image. It adds a semi transparent background, and also you can notice the text above it. It zoom the image, also it rotate the image. Let's see how it can create this beautiful image hover effect. Basically, it's a fading effect. Let's jump into the studio code editor. So as you can see side by side, I open my Visual Studio code editor and my browser using Light server extension and I already created an TML document named index dot TM. As you can see in my current working directory, we have an image, Image dot JPG, and we are going to use this image for our project. So let's get to the index dot TML five. At first, I'm going to link some type ink and I want to link this file with style CSS file, style dot CSS, and I'm going to submit. Then inside this body tag, I'm going to take a coninerp some type, container. Then inside this continent DV element, I'm going to import an image. So type ING, image tag, and here, I'm going to place the image, and our image name is image dot JPG, and I'm going to set this file. After set this file, this is how it look like. After that, inside this contina deep, I'm going to create a caption Dev element. So to tag deep dot caption. And inside this caption D, here, I'm going to take a H one tag, heading one, and mo type hello world. Then after that, I'm going to take a dummy paragraph, P tag, and Imtype loading, and Hemo type loading, and I'm going to take total five word, otherwise, six word, and I'm going to set this file. After set this file, this is how it look like in my browser. Now we need to style this section. Into style the continuat d element, the caption, the image, and the paragraph and the heading. For that, let's jump into the style or CSS five. At first, I'm going to start styling the body tag, ODI body. Then inside the Carlss the first property, I'm going to use height, height, I'm going to assign height 100 VH put height. Then I'm going assign display. Display, I'm going to use display flex. After that, I'm going to assign justify content property. Justify content center. Also align items center. Then I'm going to assign font family, font family, and here I'm going to assign font family area. You can take any font it's upper U area and then I'm going to style the continent element from here, I'm going to copy its class nine container, and I'm going to put it here. I select the continaT using its class name, then inside the calis then inside the calibs here, at first, I'm going to assign with, and I'm going to assign 500 pixel wet. Also, I'm going to assign height. Height 500 pixel is a square box. Then I'm going to define the position, position, I'm going to make it related. I'm going to set this file. Now you can notice still the image is too big for this container. We can easily fix it we can easily fix it using styling. Let me show you some targetimge tag ING. Then inside the Carli verses, I'm going to define with and here I'm going to define with 100%. I'm going to set this file. After set this file, this is how it look like. Now we have the caption sitting below it. Now we need to put the heading and the paragraph above this image. For that, we need to style the caption tag. So to copy, its class name caption and back to style your CSS file here, I'm going to select that caption. Then inside the calices, first, I'm going to define the position, and I'm going to make it absolute. Then I'm going to define top top value, I'm going to make it. I'm going to position zero. Also on the left, I'm going to place it zero again. Now we need to define height and weight to the caption element. So tie with I'm going to make it 100%, also height, 100%. I'm going to set this file. After set this file, now you can see we successfully place the text content above the image. Now we need to center the content inside this caption and to align it, we are going to use display flake type display and I'm going to make it flak flakes direction is also to use column do column. Then I'm going to use justify content, justify content center because we need to horizontally and vertically centered these elements and align items also center. I'm going to sub this file. After set this file, this is how we place the content middle of the image vertically and horizontally. Next, I'm going to change the text color of this caption. I'm going to make it some type color, and I'll make it white. Now it's fully visible because our background image is dark. And now we need to style this heading one tag and the paragraph. For that, we need to select it. Type dot caption and inside this caption, I want to target the H one tag. Then inside the class, I'm going to use text transform property, text transform, and I'm going to make it uppercase. Also, I'm going to add Marcin, Marcin from all of the direction, I want to remove the margin, so I'm going to pass zero. Then I'm going to duplicate this section and this time, I'm going to select the paragraph tag which is inside this caption. And also I'm going to use Text transform property, but this time I'm going to use capitalized value, capitalize, and I'm going to remove margin and I'm going to define font size. Font size, I'm going to use 18 pixel font size. I'm going to set this file. After I set this file, this is how it looked like. Next, we need to focus on the fading hover effect. By default, we need to invisible the text and when I hover my cursor on this image, we need to visible this text. First of all, we need to make the caption invisible. For that, we are going to use opacity property. Inside this caption, I'm going to use opacity and I want to make it zero. I'm going to set this file. After sub this file, as you can see, it the text from this image. It is not visible anymore, and I want them visible again when I hover over this image. For that, I'm going to use Hoberselector, type, dot, caption, colon hober space, container. This time, I'm going to set the container element here I use Ober psudoselector. Then caption. If I hover over this caption, which is inside this container, then inside the clirass I want to set the opacity one again. But the problem is when I Hobermk curther on this image, instantly you can see the text. There is no transition on it. For that, we can use transition property. We can use this transition property inside the caption. Here I'm going to type transition, transition, I want to apply in all the properties and here, I'm going to define transition time, which is 0.5 second. Now to satisfy if I Hobermi cars are on this image, here you can experience this transition. Also I'm going to add background to this caption. For that, I'm going to use background property inside the caption selector background and I'm to use RGV value RG RGBA. For red, I'm going to use zero for green, also, I'm going to zero for blue, I'm going to use zero and for the Alpha value here I'm going to use for now, I'm going to use zero. Now it's fully transparent. Upper this file, you can notice there is no black color background behind on the caption because we make it transparent, but it's a black colored. Now I'm going to copy this property and the value and going jump into the Her selector, and I'm going to paste it here and I will increase the opacity of it. I'm going to make it 0.3, otherwise, four. I think three is good for it because we have already dark background image. So I'm going to set this file and if I over my cars are on it, now you can notice the little dark background over the image. But if I increase it little bit, if I make it five, I think now it's look much better. Now the background fades in with the caption. Next, we need to make the image zoom in and rotate when I hoberon it. For that, I'm going to create the Hoberselector for the image so I duplicate this section and replace caption with image tag IMG and inside inside this Hoberselector. Here, first, I'm going to use transform property, transform and I'm going to apply rotate value, rotate. I want to rotate it up to 15 degree DEG when I hover on it, and I'm going to set this file. So when I hover in it, as you can see, it rotate the element 15 degree. Also, also, we need to scale it up little weight, sometimes scale value scale, and I want to make it 1.3. I'm going to set this file. I set this file, if I hobo my curves on it, you can see the result. Now, now the problem is instantly it scaled the element the image element, so we need to resolve the problem. For that, we need to use the transition property in our image. Here, in our image selector, I'm going to use transition property, transition, and I want to make transition all and the transition duration is 0.5 second. And I want to sub this file. After sub this file, after I set this file, if I hover my casar on it, you can experience this transition. But the problem is it's go outside this image box. I want to see the caption area, so we need to use overall property. Inside my container, I don't want to move it outside the container area. I want to say the 500 by 500 pixel container area. Here I'm going to use overflow property, overflow headen. So satisfy if I open my cars on this element, we achieve this desired result. This is how we create this beautiful image hover effect using transition property. We do not use any keyframe CSS keyframe for that. I hope now it's clear for you, thanks for watching this video stay tuned for our next project. 22. Image hover effect: Hello, everyone. In this project, we are going to build a interesting sliding Her effect. When I hover over this image, the caption swepe to the left to right side, and when I hover out my cursor, it's back to its place again. This is what we are going to build today in this project. Basically here, we are going to extend our previous project. We are going to use all the codes from the previous projects. Let's start the practicum. 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 open my previous TML document. And here you can see in my stylo CSS file, we are going to just working on container Hoover caption section and container Hoover image section. We keep this project in our previous liston and I extend it in our next project. Now, take a look at the browser. We have everything on its place. We need to visual the text for now. I'm going to remove this property, Opacity and I'm going to set this file again. Now our text is visible. Now, let's start working on the sliding effect. Now I'm going to jump into the caption, caption Hobart selector, and here I'm type background color. I'm going to use background color property and I'm going to use RGV value RGBA. For red, I'm going to pass for red, I'm going to pass zero for green or I'm going to pass zero for blue, I'm going to pass zero, so it's a black color for the Alpha value, hem to use 0.5, it's semi transparent. Now to set this file, if I hover my cursor on this element, you can experience this transparent background. Now we need to translate this transparent background from the lap side. You need to position it lap side of this container. I'm going to jump into the caption section and here I'm going to use transform property, transform and I'm going to use translate X value, translate X, translate X -100%. It's going to move the caption element 100% at lap site. If I set this file, here you can see the result, it's moved to the let side. But if I hover my car on it, then I want to back to its own place again. For that, again, we need to use transform property, transform, Transform, translate, translate X here I'm going to pass value zero, it's back to its own place when I hover on it. If I hover my card on this element, you can see the result. Nearly we just achieve our desired result, one thing led. We need to scale up this image and rotate this image when I hover on it. For that, inside this image hover selector. Here I'm going to use transform property again, transform and first of all, I'm going to use scale. And I want to scale it 1.3 time. Also, I'm going to rotate the element, rotate her to pass -15 degree. I'm going to set this file. After I set this file, if I hover my cards on this image, here we achieve the desired result. I hope now it's clear for you how we can build this image ho effect. Thanks for watching this video of Stune for our next project. 23. Slide up image transition project part 1: Hello, everyone. Welcome to another project related image transition using Hover effect. In this lesson, we are going to learn this interesting image hover effect. When I hover on this image, as you can see, a semi transparent background appear from the bottom. And it covered the whole image. Then after that, a caption appeared from the top. And if I move out my Kazar from this image area, again, it disappeared the background image and the caption area. Now, if you look at closely, if I over my cursor on this image, the caption appear after the background appear, it takes a little time to appear it. He use little delay between them. And the same way, if I hover out my Kazar, you can notice the caption disappear first, then it going to disappear the background. This is what we are going to create today. So let's start the practical. So as you can see, side by side, I open my is Studio code editor and my browser using ipsaverEtension, and I already create an STML document, named indexOtTML. With that, I create style or CSS file and I link this file with this document. So let's start with DML. So inside the body tag here, I'm going to take a deep tag, Dev and here, I'm going to set a class to this DV element, which is figure if I G P. Above that, inside this deep element, I'm going to take a image tag, IMG image. And as a source, I'm going to use this image ocean dot JPG, so tie Ocean dot JPG. After that, I'm going to take another deve element. So to type Dev dot, and I'm going to set a class to this DVelement type caption. Deep dot caption. Inside this Dev Element, here I'm going to take a H three tag, H three, heading three, and I'm going to type. Hello word. Here you can type anything, it's up to you. And then I'm going to take another heading tag, which is H five. And here I'm going to tie. You can type anything here, so I'm going to type Lin, and I'm going to use total five word. And then I'm going to set this file. After I set this file, as you can see, this image covered the whole page, and definitely it's looking very ugly. Now, let's jump into the CSS file and make it look a little nicer. So here, first, I'm going to target the body tag, BODY body inside the class, the first property I'm going to use margin. Margin, the first property, I'm going to use margin, and here, I'm going to use set margin zero from all the direction and display this play, I'm going to make it flex, align item center, and justify content, justify content also center. After that, I'm going to define height, height. I'm going to define height 100 viewport height, VH at last, I'm going to define background color. Background color. For background color, you can use any color, and I'm going to use dark gray colors. I pass 222. I'm going to set this file. Next, I'm going to style this fi dip element, FIG. I copy its class name and back to style dot CSS file, and I'm going to target it using dot. Dot F inside the calibras the first property I'm going to use with, and I'm going to make it. I'm going to assign with 500 pixel. After that, I'm going to define color, color, and I'm going to make the color white. Also, I'm going to define font family, font, family, and here I'm going to use aerial font. Next, I'm going to define border radius, border radius. Here I'm going to use border radius ten pixel at last, I'm going to define position, position, and I want to make it relative. I'm going to set this file. After I set this file, this is how now it's look like. Now we need to style the image which is inside this fig give elemi. Here I'm type dot FIG space image ING Image tag. Then inside the Cariss here I'm going to define with with, and I'm going to make it 100%, 100% and I'm going to set this file. After set this file, this is how our image look like. And if you want to reduce it, you can use 400 also. I think 400 is good for it. Yes. And now it's looking much better. We have the image and the caption is below it. Now let's work on the semi transparent background, which lights in from the bottom and cover the whole image. For that, we are going to use before pseudo element. He I'm to use before psudo elements or type dot FIG, fake and colon before. Then inside the car liver says, first, I'm going to create a blank content, content, and here I'm going to create a blank content. After that, I'm going to define position of this content, position, and I'm going to make it absolute. Then we need to define from where we are going to start the content. So from the top, I'm going to pass zero and from the left, I'm going to pass zero. I'm going to start the element from the top lip corner. After that, I'm going to define within height with, and I'm going to define with same as this container. The fi container. Somebody use 100%. Also height, 100%. Same as the fi container area. After that, I'm going to define background color. Background color, hair, I'm going to use greenish color. Hemotpe has tag 006266, this color cope. As I'm going to set opacity because our background is transparent, semi transparent, type, sumo type opacity and I'm going to set it 0.5. I'm going to set this file. After set this file, this is how it looked like. Next, we need to work on the caption. We need to center horizontally and vertically inside this fig element. Let's target the element. Sm type dot FIG fig space, dot, I want to target the caption element type caption. Then inside the CarissF property, I'm going to use position. Position, I'm going to make it absolute. Then I want to start from the top. I'm going to pass Z and also I'm going to assign W W and I want to assign with 100%, 100%. Then I'm going to assign height. Height, I want to assign height, 100%. After that, I want to assign display probility display, and I want to make it flex and flex direction, flex direction, I want to make it column because here I want to put the H three element below the edge five element. That's why I use column here. If we do not use column, then you're going to put both the element side by side in a single row. That's why we use column here. And in order to center them, I'm going to type align items center. Also justify content center. I'm going to set this file. After I set this file, this is where we put the element. Now, the caption section is centered horizontally and vertically. But the problem is H five and H three element not looking so good. You need to style these elements. First, I'm going to target H three elements, type dot FIG P. Inside this fig di I want to target H three and inside the Carias the first property, I'm going to use margin. I'm going to set margin zero. Then basically here, I'm going to remove the default mooch and then I'm going to set letter spacing, letter spacing, and I'm going to set it one pixel pH. After that, I'm going to define text transform property. Text, transform. Text transform, I'm going to make it percase. Also, I'm going to define font to it. I think I don't need to define font to it for that and also I'm going to use margin bottom property. Margin bottom. Margin bottom, I'm going to use five pixel, five pixel, pixel, and I'm going to sub this file. I set this file now T element look like that. Now we need to work on H five element. 24. Slide up image transition project part 2: For that, I'm going to duplicate this section and I'm going to replace H three with H five. Then nearly, I'm going to use the same properties. But for the H five element, here, I'm going to use background color, Bground color, and I want to use this color code, Has tag, A e895d. This colored code. Also, I'm going to define padding to this element. So type padding. From top and bottom, I'm going to use three pixel and from left and right, I'm going to use ten pixel. And I'm going to set this file. After set this file, this is how our element look like. Next, we need to work on the Her effect. We need to move this background from the bottom. For that, we need to jump into the before pseudo element at that element and from here, we need to move this element, this before pseudo element below this container. We I move my causar on it, then it's going to rise up from the bottom. So I'm going to use transform property for that transform, and I'm going to use trust Y value, trust Y, and I'm going to use 100 person, 100 person. And I'm going to set this file. After I set this file, as you can see, it moved the elimi it moved downward by 100%. Now it's right below the fig element, and we need to make it invisible outside the fig element. For that, inside this fig element, I'm going to use another property, which is overflow. Overflow hidden, I'm going to set this file. After I set this file, now you can see it hide the element. Now this element is not visible anymore. Now on hovering over the p, I want to gram element slide up again and I want it back its original position. For that, we need to set the Hober selector. After the before pseudo element, Amro type dot FIG p, colon hover. Colon, I want to target the before element before. Then inside the culivra says, I want to transform the element, some type transform translate X, transform translate X, and I'm going to pass zero value. So set this file, if I Her my cars are on this element, you can see the background element when I hover my cars are on it, but you cannot experience the transformation because here, we need to use the property. We need to use transition property here. So in this before element, I'm going to type transition transition, and our transition duration is 0.25 second to five. I want to set this file. After set this file, if I hover my cursor on this element, now you can notice the transformation. As you can see when I hover my cursor on this element, from the bottom, it appeared the background and covered the area. Now we need to work on the caption. But before I'm going to add transition delay to this pseudo element, sudo type transition delay, transition delay, and I'm going to pass 0.25 second. I'm going to say a bit. Whenever I hover my cars on this element, after 0.25 second, it appeared the background. Also, if I move out my casa from this area, it's going to wait for 0.25 seconds. After 0.25 seconds, it's going to move down this element. But I don't want it. I don't want 0.25 seconds delay when I hover my cursor on this element. I want to rise up this element instantly when I hover on it. But when I hover out my cursor, I want this delay, 0.25 second delay. For that, I'm going to type transition delay. Transition delay, I'm going to make it 00 second. If I set this file and hover my cursor on this element, as you can see, it's not going to wait for 0.25 seconds. Instantly, it move up the element. But if I remove my cursor from this area, it's going to wait for 0.25 second. Background is moving immediately when I hover on it, but if I hoot my cursor, it's going to wait for 0.25 seconds. Also, we need to remove the caption from this image. When I hover my cursor after the background, we need to appear the caption AA. For that, we need to jump into the cap transector and the property I'm going to use transform, transform and here I'm going to use translate Y value, translate Y. And here, I'm going to move this element from -20 pixel. I'm going to set this file. After set this file, as you can see, we move up this element, little bit. Then I'm going to set opacity, opacity, and I'm going to make it zero. Now, it is not visual anymore. Also, I'm going to set transition on it. Transition all our transition time is 0.25 second. I want to set this file. Now, let's create the hover selector of this caption button. I'm going to type dot FIG Polon Hover. And then I want to target the caption element, caption. Then inside the Cariss if I hover my casa on fig element, then I want to move this caption element. First, I'm going to make the opacity visible again. Opacity, I'm going to make it an. Then I'm going to use transform property, transform, transform and here, I'm going to use translate white value. Translate Y. Translate Y, and I'm going to pass zero hair. So it's going to back to its original pace again. Is this file, if I her my casa on this image, as you can see, instantly it appeared the element, the caption element, but I want little deal. So here I'm t transition D. Transition delay, I'm going to use 0.3 second. I'm going to set this file. After set this file, if I hover my cars on it, now you can see up the background element, it's going to wait for 0.3 second, then it appeared the caption Dev element. Finally, we achieve our desired result. This is how we create this beautiful hovering effect on image. Thanks for watching this video, stay tuned for our next project. 25. Split image hover effect: Hello, everyone. Welcome to the new project in this course. In this lesson, we are going to create a split image hover effect. As you can see, we have an image center on the screen, and when I hover over my Kazar on it, split into two part and also each of the part rotating in different direction. Also we have a heading and the paragraph below the image, it's a very cool and beautiful effect. By the end of this video, you will know how to build it. Let's start the practical and see how we can beat it. As you can see side by side, I open my Wisult studio code editor and my browser using live server extension and I already create an ML document to name index dot HTML. I already create style or CSS file and I link this file with this document. So let's start with TM. Inside the body tag, I'm going to take a deep tag, the IV DB and I'm going to assign a class and our class name is box. It's like a continent deep. Then inside this box element, I'm going to take another deve element. Dev, dot, and Hemo assign a class about inside this deep element, I'm going to take a H two tag, two, and I'm going to type spit image over. Then I'm going to take a paragraph using PTAG here I'm going to type some Danny text. Lim, and here, I'm going to use nearly 20 word. I think 20 word is good for it. Yes. I'm going to set this file. After set this file, here you can see the result in my browser. This is how it look like. And now we need to destate center of this box. For that, I'm going to jump into the style or CSS five. Here, first, I'm going to use universal select or star and inside the Cali ress I'm going to define margin. Margin from all of the direction, I'm going to use zero. Basically, I remove the margin. Also you need to remove the padding, padding, also zero. After that, I'm going to set box sizing, border box. Then I'm going to select the body tag, body. Inside the curses, first, I'm going to define font family, font family, and I'm going to use aerial font. After that, I'm going to define background. Background. Here, I'm going to use dark gray background of type Hashtag 222. After that, I'm going to make display this flix justify content center and also align IAM center. It's basically horizontally and vertically align the IM center of this page, and I'm going to set this pile. After I set this file, are set this file, as you can see, it's not working. It's not centered the element middle of this page because we do not provide the height. Subtype height and helm assign height 100 H 100 VH'm going to sub this file. Upset this file, as you can see now, it aligned the content middle of this page, vertically and horizontally. And now I'm going to style the box Dev element. For that here, I'm going to select the box Dev using its class name dot box. Then inside the car lever says, first, I'm going to define position. Position, I'm going to make it relative and also I'm going to define within height. As I'm going to define within height with I'm going to make it 600 pixel. Then I'm going to define height, height, I'm going to make it 400 pixel. Next, I'm going to define background, background. I'm going to set background, Hatack 000, fully black color. Next, I'm going to align the content vertically and horizontally middle of this box. For that, I'm going to use this topology. Display flakes justify content, justify contain center, align item, A center, and I'm going to set this file. Now you can notice this box have width of 600 pixel and height of 400 pixel and it aligned middle of this page and the content inside it perfectly aligned in this middle. Next, I'm going to style about section which hold the text content. For that, I'm going to type dot about. Then inside the Carrass the first property, I'm going to use padding, padding, and I'm going to use padding 40 pixel from all of the direction. Then I'm going to define color. Color and I want to use white color for visibility. Why, because our background color is black. After that, I'm going to use text align property, text align, and I'm going to use center. Up this file, this is how it look like. Then I'm going to target the H to tag. I'm going to type thought about inside about, I want to target H to lemate. Then inside the color recess, first, I'm going to set margin. I want to remove margin unnecessary margin. I want to remove the default margin from this text, so I'm going to pass Zi also, I'm going to set padding and I'm going to make it padding zero. With that, I'm going to define font size font size. Here I'm going to set font size 30 pixel and text transformation, text, transformation, text transform upper ks and I'm going to set this file. After set this file, this is how it looks like. Now it's clean and professional. Now, let's back to the estimate page and add the figure Div element. Figure De going to hold the image and split the image and rotate the image when I hover over on it. I'm going to type Dev dot figure. And this is the DV where the magic happens. I'm going to set this file and back to the first, I'm going to copy the class name and back to the style CSS file, and I'm going to target the figured DVTatFgure then inside the car ss, the first property, I'm going to use the position and I'm going to make it absolute. After that, I'm going to define within height, width, and I'm going to use 100% width of this container box. Then I'm going to define height. Also, it's going to use the 100% height of container box, and I'm going to set this file. After set this file, you can see nothing because we don't have any content inside this box. Now I'm going to create a pseudo element. I'm going to create a before pseudo element, which going to create a lept hub of this image. For that, hemo type dot figure Colon before. Then in the caress. Basically, we use this before element to split part of an image. Then inside this before element, I'm going to create a blank content because it's necessary to render content black. After that, I'm going to define the position, position, I'm going to make it absolute. Then I'm going to define how we are going to place the element from the top, I'm pass zero from the lt, I'm pass zero again. With that, I'm going to defined with her I would use with 50% because it is the left part of this image. That's why I use 50% and height, height, 100%, 100%. Then I'm going to define a background image, some type background background. Here I'm going to pass the URL, URL, and I'm going to use this image. As you can see my current working directory, we have an image called ocean dot JPG, some type Ocean dot JPG, and I'm going to set this file. After set this file, this is how it look like. But before I'm going to reduce the resolution of this image because we need to make it according to its ordinary resolution, 600 by 400. So I'm to pause this video and first forward the process. I make the resolution exact to the continent deep. That's why it look great. And then I'm going to use the next propriety transition. So type, transition, and here I'm going to use transition, 0.5 second. This will animate the effect when we hover over the button. Now you can see the lay of the image is inside the box and it is ready for the split effect, but we are not done yet. We still need to add the transform origin property. Also the hover effet. Now, let's create the hover effet when I hover over the box, I want to rotate the image and move to the downwards. So type dot box colon hover, and I want to select the default pseudo element. So type dot, figured colon before. Is the coolers, and here I'm going to use transform property, transform, and I'm going to use rotate X value, rotate X rotate X, I'm going to pass m to pass 90 degree angle. I want to rotate the element at s is 90 degree DG. With that, I'm going to move this element at VC's direction. Somebody use translate Y. Translate Y, translate Y, 50%, 50%. I'm going to set this file. Now after set this file, if I hover my cursor on this image, now you can see it rotate the image 90 degree and move the image downward 50% at Vic's direction. Is going to create the image speeding effect and folding away from the user. Now the problem is by default, this image rotation center of this position. Now, we need to use transform origin property to control the Aisin. We want to rotate this element from the boto big. For that, I'm going to use transform or sin property, transform Aisin. Here I'm going to say transform origin property, bottom and I'm going to set this file. Now if I over my cursor, you can see this result. Now it's rotate the image, bottom of its position. Now it create very naturing and appealing spitting effect. Let's work on the right part of this image. For that, we are going to use after pseudo element to handle the right part and spit is similar with before psudo element. I copy this section, basically duplicate this section and instead of using before, I'm going to use after. Now when to position this after element correctly. Instead of using left, I'm going to use right right position, right, zero. Next, I'm going to define the background position. Background position, I'm going to use 300 pixel, 300 pixel, and I'm going to set this file. After set this file, now you can see the complete image because our image resolution is 600. Here we align the write up of this image using background position 300 pixel. Also, you need to change the transform origin position. Instead of using bottom, I'm going to use top. And now we need to rotate this element upward. I'm going to remove the before element and I'm going to use after then I'm going to use -50% at transit Y. Instead of downward, it's going to rotate the element upward. I'm going to set this file. After set this file, if I hover my cursor on it, you can see this beautiful splitting hover effect. Combine the before and after so element, here we create the beautiful splitting hover effect on image. I hope now it's clear for you how we can create this beautiful project. Thanks for watching this video. Stay tuned for our next project. 26. CSS 3d Layered Image Hover Effects: Hello, guys, good to see you back. Once again, I'm back with another project related CSS animation. Today in this project, we are going to learn how we can create this beautiful three D layer Hoberimage. As you can see when I Hober my cars are on this image, you can notice multiple layers with different opacity. This is what we are going to create in this project. It is very useful for UI design. This design concept is very popular in UI designs. You may see this kind of animation in various websites. Let's see how we can create this beautiful three Hober layer. So finally, I am in my Visual Studio codtor as you can see, I already create a SML document named index dot HTML. I already link CSS file with our TML document, style dot CSS. And as you can see, in my current working directory, there is an image, screenshot dot JPG. Let me show you the image. For this example, I already take a screenshot of CSFleEplorer. You can choose your own layout. It's up to you. So let's start the practical and see how we can create this project. At first, I'm going to create a container inside my body tag. So here, I'm going to tie the and our dip class is class container. Then inside this container class, I'm going to use image tag to insert image. Here I'm going to type image ING. As you can see, our image name is screenshot dot and JPG. Here I type, screenshot JPG. I'm going to dugate this image tag three time. I successfully done our DML part for this example. Now I'm going to turn on my b server and see how it's look. Without styling, it's look like this. Now we need to jump into this style file to create the perfect design. Now you can see side by side I open my style file and my browser. At first, I'm going to start with body tag. Here I'm going to type body. Then inside the Kalib says, I'm going to use our first proboty which is margin. Margin, zero. Our next propriety is padding, padding zero. Now I'm going to use another property which is width, Width, 100% height, 100 VH. And then I'm going to use this play propriety, display flex. And I want to align our items center. I'm going to use align item property, align items center. Our last property is justify content. Justify content center. Hey, if you are not familiar with textbook and Read, you can check out my course. If I set this file, as you can see, nothing is happening here. Now we need to style the container section. Here I'm going to type container dot container. Then inside the Calibra says, at first, I'm going to use position propertinPosition related. And then I want to say weak wet 360 pixel. And our next property is height, height, 480 pixel. If I set this file, you can see the result. It scaled down our container size little bit. And then I want to set some margin in my top section. So here I'm going to use margin top property, margin top 150 pixel. And next, I'm going to set a background to this container. So Hemotype background and for background, I'm going to use RGV Vo, R gene BA. Then inside the parentheses, we need to pass total four probability. For red low I'm going to pass zero. For green Vu also I'm going to pass zero, and for our blue Value, once again, I'm going to pass zero. But for our Alpha value, I'm going to pass four and one. I want a transparent background color for this container. Our next property is transform probility. So here I'm going to type transform transform, and I'm going to use total six Ville. First, I'm going to use rotate Val rotate. -30 degree. With that, I want to use skew and scale will do. Skew 25 degree. And skill 0.8 time. If I set this file, you can see the result. And now we need to position the image tag inside the container tag. For that, I'm going to select container with image tag, container space image. Then inside the Kalevss our first property is position, position absolute. Image with 100%. If I set this file and show you my browser, now you can see it perfecty in position as you want, and then come the most important part. Now we need to play with opacity and transformation with Hover effect. Let me show you how. As you can see in my estimate document, we have to tall four image. Now we need to select all the image one by one. For that, I'm going to use child selector. Let me show you dot container, colon hover. Then space, image, colon, nth child, there's child. Inside the round resis, four. First, I select fourth child from the image group. Then inside the aliases, I'm going to use transform property, Transform, translate 160 pixel in X's direction, and minus 160 pixel at it's direction. With that, I'm going to use opacity pprity. Opacity one, I want to show the full opacity. That's why I select one. Next, I'm going to select our 30 page. I'm going to select this line and do begin. N child three. And also I'm going to change transform value and oposity value opacity, 0.8 and translate for X six is, I'm going to pass 120 pixel. And for YXs also I'm going to pass minus 120 pixel. And now, once again, I'm going to slate towards second em. I want to date this line, and here I'm going to type two in child two. And for x66, I'm going to pass ET and for YXs I'm going to pass minus e T. And here I'm going to say opacity 0.6. And once again, I'm going to duplicate this line to select our first image child one. In our transformation, I'm going to select 40 pixel and -40 pixel four, y is. And opacity I'm going to type 0.4. If I set this file and back to my Chrome browser and Ober my cursor on this image, you can see the effect. But there is no transition in this image. And now we need to set a transition to give a smoothness effect. So once again, I'm back to my codator and here I'm going to call our transition propriety. Transition 0.5 second. Also, we need to call the same property in our container section. Transition 0.5 second. If I set this file and back to my Chrome browser, if I Ober my curor on this image, you can see this move this transition. I hope now it's clear for you, how we can create three layered image hover effects. Thanks for watching this video, stay tuned for our next project. 27. Growing Border menu: Hello, everyone. In this project, we are going to create this beautiful menu hover effect. When I hover over any link of this menu, as you can see, two line scale, top line, scale from the late and bottom line, scale from the right side. And the idea behind to create this effect is simple. We need to work on before after psudo element. We need to create both the element before the ancha tag and up and the ancha tag. Then we need to scale it. In our first element, we need to scale from the lap side, and in our second element, we need to scale it from the right side. To make the lines disappear, we need to set scale value zero. When I open my C on the elements, we need to make scale value one, so it will reappear it. Let's start the practical and start creating structure using UL and LI tag. As you can see, side by side, I open my studio code editor and my browser using live server extension and I already create an ML document named index dot DAL. With that, I already create a style file named Stylo CSS file and I link this file with this document. Up at that inside this body tag, here we need to take UL tag. Then we're going to start with UL tag. I want to say the list items, Unwdal list. Now inside the body tag, first, I'm going to take UL tag, UL UL stands for unwordalList. Then inside this UL tag, I'm going to take some LI tag for our menus item such as home about services, portfolio, contact, et cetera. So I'm type AI. Then inside the LI tag, I'm going to take an Categ also. Here, our first menu item is who, so you type H. Then I duplicate this line, then our second menu item is about, and our third menu item is services. And our fourth menu item is portfolio and our last menu item is contact. I replace portfolio with contact. I'm going to set this file. After I set this file, this is how our menus items look like. Next, we need to add background color to this body tag. Also, we need to vertically and horizontally centered the menu item elements. For that, we need to jump into this style section. So inside the CSS file, first, I'm going to select the body tag, body. Then inside the carvi the first property I'm going to use height. I'm going to define a height, height of 100 VH. After that, I'm going to make display, I'm going to make it flex, then justify content centered. Align IAM center. Basically, it's going to vertically and horizontally align the main middle of this page. I'm going to set this file. After this file, you can see the result, it vertically and horizontally align the items, middle of this page. Then I'm going to use a font family, font family, and here I'm going to use Sansari Sansarf I'm going to su this file. After that, also, we need to provide a background color and I want to use dark gray background color. Background color, hastag 222, I want to satisfy. After that, we need to slate the unorder list. We style the unorder list. For that, I'm going to type UL. Then inside the Carrass here, first, I'm going to define padding, adding zero, also margin zero. Basically IU default padding and margin from it. Next, I'm going to use dispaperperty. Display here, I'm going to make it flex and flex Rf, flax, f, I'm going to make it rare and I'm going to set this file. After set this file, as you can see, using display flex propriety, we place the elements side by side. And then we use flex wrap. So when they have no space to expand, then it's going to break down and ship to the next line. Next, we need to remove the bullet points. For that, I am going to target the LI tag, which is inside the UL tag, ULI then inside the colors, the property I'm going to use style, is style, and I'm going to make it nun. After that, after that, I'm going to style the anchor tag. Multi UL I and I want to target all the anchtx Then inside the covers the first property I'm going to use text decoration and I'm going to make it none. So I remove the underline from the ancha text. Then I'm going to define a color to the text. So type color. I'm going to make it white. Next, I'm going to define the font size, font size, and here I'm going to make it 22 pixel. After that, I'm going to use this property. Display and I'm going to make it block. Padding, I'm going to make it ten pixel from top and bottom, ten pixel from top and bottom and 20 pixel from left and right. The next property, I'm going to use position, position, and I want to make it relative. I'm going to set this file. After set this file, this is how our nctags and list antens look like. Now our menu look like exactly we want. And next, we need to work on the hover effect. We need to create a line. We need to create a line above the ancha tags. For that, we are going to use before pseudo element. Here, I'm going to type UL and anchor tag, and here I'm going to use before pseudo element, lean, colon, before. Then inside the carnivals, first, I'm going to create a blank content because we need to render it. That's why we need to create the blank content, content, it's a blank, empty string. After that, we need to define the position of this content, position, and here I'm going to make it absolute. I want to start the content from the top, I want to place it from the top zero and also from the late also zero. Next, I'm going to define weed to this element, some type weed, and I'm going to make it 100%. After that, we need to define height, height, I'm going to make it to pixels it look like a single line. After that, also, we need to provide the background color to this element to this line, some type background color, I'm going to make it white. I'm going to set this one. After set this one, you can see the result. Here will create this before element for each of the anchor tag. Next, I want to say scale value zero. So here, I'm going to type transform property, transform scale, and here I'm going to make it zero. After that, after that, I want to assign transition for smoothness, some type, transition, transition. I want to assign the transition all of this element, and I want to define the duration 0.5 second. Also for our before element, we need to define the transition origin. Transitions, transition origin, I want to expand this element from the lap side. I want to expand the before pseudo element from the lap side, so I'm going to set transition arising late. Then I'm going to set this file. After set this file, as you can see, it vanish the element because here set scale value zero. That's why it vans the element, and I want to reapair it when I hover my cousin on this element. For that, we need to use Her selector before Her selector. I'm going to tie UL AI, and I want to target the anchor element. Then colon Hobart, colon, before element, before. Then inside the caliber says, here, I'm going to set transform, transform scale, scale property, and I'm going to make it one again. As you can see when I hover my casa on this element, it expanded line within 0.5 second from the lap origin. Now we need to do the same thing for the bottom. So I duplicate this line, I'm going to duplicate this line and here, I'm going to replace before with after and also we need to change the transform origin position. Here, we need to change the transform origin let to right. And if you want to make it visible, then just use scale one. Now you can see the line. You can see the line at the top position, but we need to ship the line to the below of these elements. For that, we need to use bottom value. Instead of using top, I'm going to use bottom, bottom zero, and I'm going to set this file. After set this file, as you can see, it ship the elements below the list items. Again, I'm going to make scale zero to make it invisible and with the before element, I want to select the after element. I copy this section. After copy this section, I'm going to put a comma and then I paste it and replace before with after. I'm going to set this file. Now to set this file when I open my cars on the menu items, you can see the beautiful transition effect. Our before element starts from the left side and grow to the right side, and our after element starts from the right side and grow to the left side and complete the shape. I hook now it's clear for you how we can create this beautiful menu animation effect. Thanks for watching this video, stay tuned for our next project. 28. Menu hover effect with transition delay: Hello, everyone. Welcome to the new lesson in this course. And in this tutorial, we are going to create this nice menu hover effect. When I hover over my car or any of this link, this link move to the top and the second span tag, take the position. After that, a red color background covered the whole span area. And if I remove it, it is back to its own position again. This is what we are going to build today in this project. Let's start the practical and see how we can build it. 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 HTML document to name index dot TML. With that, I already create styler css file and I link this file with this document. Then inside the body tag to create the menu, I'm going to take UL tag and order list. After that, inside it, I'm going to take a LI tag. Then inside the LI tag, here, I'm going to take a Anca tag, A. Then inside the Anca tag, I'm going to take span tag, span, and here I'm going to tip home. And there I'm going to take another span tag which contain the same text home. The first pair is the one which is going to move to the top and the second one move from the bottom and take the first place. Then I'm going to copy the LI tag multiple time and replace the text. I'm going to fast forward this process. So I fast forward this process and add about services portfolio and contact. After I create the menu items, let's jump into the CSS file and start styling. So I'm going to jump into the style CSS file. At first, I'm going to select body tag. Bd There inside the cars the first property, I'm going to use background color. Background color, and here I'm going to use dark gray background, Hastag 222. Next, I'm going to define height to this body. Height and Heund use height 100 H, and display, I'm going to make it flex. After that, justify content, justify content. I'm going to content all the elements middle of this page, sometimes center, and also align item align items center. I'm going to vertically and horizontally align the content center of this page. So to satisfy this is how it looked like. Up at that, I'm going to change the font. Type font family, I'm going to use Aerial font. You can use any font, it's up to you. I'm going to set this file. And next, I'm going to target the mean. I'm going to type UL inside the css, the first property, I'm going to use display. Display Heun use flex vue then I want to list item one above the another. For that, for that, her use another property called flex direction and flex direction, I'm going to make it column, and I'm going to set this file. Also, I'm going to make justify content center. Center. Align items align items also center. I'm going to sub this file. Next, I'm going to target the list items which is inside the UL tag. I'm going to type ULI inside the Clses at first, I'm going to define position. Position and here, I'm going to use relative position. After that define position, next probity, I'm going to use style, least style, and I'm going to make it none because I want to remove the dots. After that, I'm going to add a little margin. Margin, helmed add margin from all of the direction five picks, then I'm going to select a tag, A. Then inside the carlver the first probity, I'm going to use position again, position real display, and I'm going to make it block. Also, I'm going to assign, height, 40 pixel. Then I'm going to use text decoration, text decoration, Taste decoration, I'm going to make it none because I want to remove the underline and I'm going to set the file. After stifle, this is how they'll look like. Also, I want to change the font color. So say color, and I want to make them white and it's going to make it fully visible. Also, I'm going to define font sizes. After I add the color, also, I'm going to add padding. Padding. From top and bottom, I'm going to add five pixel from left to right, I'm going to add ten pixel. Next, I'm going to add font to eight, font weight, and here I'm going to make it font to 8300. I want little lighter font. Letter spacing, letter spacing. Here add two pixel. And overflow, and I'm going to make it overflow hidden. After this file, this is how it look like. After that, if you want to increase the font size, yes, you can, but for now, I'm not going to increase the font size, and then I'm going to target the span tag, which is inside the anchor tag. For that, heraldie UL AI, anchor tag, and then I target span. Then inside the calibre says, I'm going to define position. Position, I'm going to make it relative. Then I'm going to define with and height. W, I'm going to assign 100 person width and height. Here I'm going to define 100. He I'm going to define 100 person height and display, this play I'm going to make it flex now the question is why I mean this flax? Because we need to change the order of the second span, we need to move it below the first span. That's why I use flax. Now it go bottom of the first span tag. I do not have space beside it. That's why it's moved to the bottom. Next, I'm going to add align items center, and justify content, justify content also center. So it's going to horizontally and vertically center this element. I'm going to set this file. After set this file, as you can see, it hide the text. Now the second span shifted below the first one. Also, you do not have enough space, as you can see, herro use overflow hidden property. That's why it not visible. If I uncomment the overflow hidden property, let me show you then set this file again. Now it visible again. That's why we need to use the property overflow dn and save it A. Next, I'm going to add little transition on it. Transition, and here, I'm going to make transition 0.5 second, 0.5 second. After that, you can add color, but I already add the colored property in our ancx'm copy. I'm going to cut that color from this anchor tag and I'm going to place it here. Then I'm going to add font size. Font size, I'm going to make it 20 pixel. Also, text transform, text transform, I'm going to make it uppercase and text transform, I'm going to make it capitalize. I'm going to set this file. After set this file, this is how it looked like. Now this tan element look much better. Now if I hovering over this anchor tag, I want to change the position. I want to first span move from its position. I want to move it to the upward to the top and second span mood from the bottom and take its place. When I hover over this anchor tag, some type A, colon hover. Then I want to target the span tag child. So t span colon nth child, nth child, and I want to target the first child. One. Then inside the liss I'm going to use transform property, transform, translate Y, translate Y, and here I'm going to pass -100%. I want to set this file. I set this file, if I going jump into the index dot estimate file, from here, we are going to target the first spans tag, the first span tag. So after set this file, if I sit this file and Hover over my cars are on the span tag, you can see it moved the first span tag upward. Basically, it move up to the top and then disappear. Now we need to move this second span tag, which is going to take its place. For that, I'm going to duplicate this section and this time, I'm going to target nth child and we don't need to change too much. Just if I set this file and whoever my cars are on this element, you can see the result. Now the second one, take the first one place. First one move upward and second one come from the bottom. This is the exact effect we want. Now, we need to work on the background and to create the background we are going to use before pseudo element. Some to create a pseudo element of ncatax on type A, colon before. Then inside the car leia says, here, I'm going to type, I'm going to take a blank content. Content is a blank content. After that, I'm going to position it position, and here I'm going to set position obsolte. Then I'm going to place it from the top, I'm going to position it zero and from the left, I'm going to place it zero, zero. After that, I'm going to provide within height. Here I'm going to use 100% wide of spantagt Width, 100% height, also 100%. Then I'm going to say background color. Background color, and here I'm going to use red background color. Red. I'm going to set this file. After set this file, this is how it looked like. Now I want this background color when I hover over this link. For that, I'm going to use transform property. So type, transform. Transform scale X, scale X, I'm going to pass zero, and I want to go it from the left set right side, so I'm going to change the origin position. Transformsin, I'm going to pass lift here, left, and I'm going to set the transition. Transition, I'm going to set 0.5 second. I'm going to set this file. After set this file, as you can see it height the red background. Now when I hover over this link, I want to grow the background from the left side and shrink to the right side. For that, we need to create the hover selectron. Anchor, hover, colon, I'm going to target the before element, before. Inside the calices first, I'm going to use transform probability, transform, transform, and I'm going to say scale V scale, scale, sorry, scale X. This time, I'm going to make it scale X value one. It's going to completely fill the background and it's going to start from the lip side. If I over my cursor, you can see the result. But the problem is when I move my mouse from this span tag, this background back to the lip side again, but I don't want it. I want to end this background to the right side. For that, we need to use transform or zing again. Transform or Z. This time, I'm going to change the side, which is right, right side, and I'm going to set this file. After set this file, if I hover my c on it, it's not working according to our desired result, don't worry. I'm going to comment out this line and I'm going to add some transition Dlay. Transition D. And I'm going to delay it up to 0.5 second. I'm going to set this file. After I set this file, if I hover my cars are on this element, this span element, as you can see, after 0.5 second delay, our background appear. If I move my cars out of it, instantly it back to the old position. I don't need this line, so I'm going to move this line, and this is what we create in our project. I'm going to set this file. I hope now it's clear for you how we can build this beautiful MnuHover effect. So thanks for watching this video, Stay tuned for our next project. 29. Border menu effect with background: Hello, guys. Nice to see you back. Once again, I'm back with a new project related menu Hova effet. Today in this tutorial, we are going to create this beautiful menu. When I hover my caster on these menu items, as you can see, we have a background fade scene, and we had total to border. And it is bordered moving out from this link. One border, move to the top right and another border move to the bottom left. So let's see how we can create this beautiful MnuHaefet. 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 HTML document name index dot HTML. With that, I create style dot css file and I link this file with this document. Now, at first, inside the body tag, here I'm going to take ULAULEL stands for nowada List. Then inside this UL tag, I'm going to take list item I inside the LI tag, I'm going to take Anca tag A. And here, I'm going to type our first menu item is home. Then I duplicate this line, and I'm going to make this one about. Then I duplicate this line again. This one is for services. Also, I want to duplicate this line, and this one is for portfolio. And the last one is for contact. I'm going to set this file, and now into place the menu items in the middle of this page. For that, we need to go jump into the CSS file style CSS, first, I'm going to target the body tag, body. Inside the arises, first, I'm going to assign margin. Margin, I want to remove default margin from every of the eleate. I use zero. After that, I'm going to make display. Display, I'm going to make it flex. Justify contained, justify contained center, also align items center. Then I'm going to assign height, height, here I'm going to assign height 100 H. After that, I'm going to assign font family. Font family. Font family, here I'm going to assign aerial font. I'm going to set this file. After I set this file, as you can see, it aligned the items middle of this page vertically and horizontally. Next, I'm going to target the Nowata list. For that, I'm going to select UL. Then inside the aliases. First property, I'm going to use margin and I'm going to make margin zero. Next property, I'm going to use padding, padding also zero. After that, I'm going to make display display, I'm going to make it flex. Next, I want to remove the dots, these icons. I'm type is tile. I'm going to make it none, and I'm going to set this file. After I set this file, as you can see, it removed the dots and it plays the items side by side because of displayflx property. Next, we need to provide space between them. We need to remove the underline, also we also need to work on the fonts. But before, I'm going to assign a background color to this body tag. Background here, I'm going to use background hashtag 222, dark gray. I'm going to set this file. After I set this file, I'm going to target the anchor tag sot UL I, then I'm going to target the ancha tag inside it. Then inside the Css, then inside the Calviss first, I'm going to assign a color to this font. So use color property, color, and I'm going to make it, and I'm going to make it white fully visible. After that, I'm going to define font size, font size, and I'm going to make it 20 pixel. Then I want to remove the underline. For that, we need to use text decoration property. Takes decoration, none. We need to make it none to remove the underline. Next, we need to convert these takes into uppercase. For that, I'm going to use text transform property, takes transform, I'm going to make it uppercase. I'm going to set this file. After set this file, this is how it look like. Now we need to provide little padding between them. Also, we need to assign little margin. I'm type padding. From top and bottom, I want to assign five pixel padding and from left and right, I'm going to assign ten pixel padding. Then I'm going to add little margin, margin. From top and bottom, I'm going to assign zero pixel margin and from left and right, I'm going to assign ten pixel margin. I have to set this file. This is how it look like. After that, I'm going to assign position. Position, I'm going to make it relative. Then I want to assign transition. I want to assign transition to all of this element, transition all and our transition duration is 0.5 second, now our menu is looking pretty nice. Next, we need to work on the hover effect. Next, we need to work on the bottom lip corner border at that position. So for that to create the bottom lip corner border, we are going to use before pseudo element. So do type catch and I want to select before. I'm going to use before psudoelement. Then inside the carirass first, we want to create a blank content. Content is a empty content. After that after that, here, I'm going to define the position of this content. Position, I'm going to make it absolute. Next, I'm going to position it bottom side, so I'm going to type bottom zero and lept also zero. Next, I'm going to define within height, W I want to define width for now 12 pixel and height also 12 pixel. Then I'm going to define a background color. Background, for background, I'm going to use Ylo color. I use this background color for temporary purpose. After set this file, here you can see the result. At that position, we create a box, a square box. Now, we need to add a border, border to the left side and bottom side. But at first, I'm going to define border to all of the direction. So I'm going to type border property, border, and I'm going to assign C pixel border, and our border color and our border style is solid. And our border color is, I'm going to use white color white if if if fully visible. I'm going to set this file. After set this file, if you notice carefully, you can see the border around this square box. But as I told you, I want the border at bottom and lip side. For that, we need to use border with property. Type border with border with for the top, I'm going to pass zero for the right, also to pass zero from the bottom, I'm going to pass three pixel and for the lay also going to pass three pixel. I'm going to sub this file. Up sub this file now you can notice the border at left side and the bottom. If I change the background color, if I make it red, I think now it's more visible. So to create the border, now I don't need this background, so I'm going to comment out this slide and save it again. Now we need to do the same thing for the top right corner. For that, just we need to duplicate this line and here instead of using before, I'm going to use After possible element after, and we need to change the position. Instead of bottom, here I'm going to use to and instead of late, here I'm going to use right, right from the right, I'm going to pass zero. And I'm going to set this file. This time we need to assign the border at top right side. I'm going to remove this to value. Now for the top here I use three pixel for the right, also use three pixel for the bottom, I'm going to use zero and for the left, also I'm going to use zero. If I set this file, you can see the result. Next, we need to work on the over. But before, I am going to ship this border little inward, and also I'm going to invisible it. For that, I'm going to change their position. So for the before element here, instead of using zero position, I'm going to use el pixel from the bottom and from the lept quel pixel. I'm going to set this file. Now it's shipped to the little inward and I'm going to set opacity and I'm going to make it zero. Now it's become invisible. After set this file, as you can see, the border become invisible. Now, when I hover over this link, I want to move the border outward. I want to move the border outward again. For that, for that, I'm going to type A and when I hover over this link, and then I want to target the before pseudo element before. Then I said the aliases, first, I'm going to make opacity one A. And this time, I want to move the border outward. For that, I'm going to change the bottom value, bottom and I'm going to make it minus five pixel and leath value, also minus five pixel. I want this movement smoothly. For that, we need to use transition property, transition, and I'm going to use type, and I'm going to define 0.0 0.33 second. I want to set this file. After set this file, if I hober my cars on element, you can notice the result. This is how it moved the border. All right, we need to do the same thing for the top right border. I'm going to change that position. Instead of zero, I'm going to make it to pixel, 12 pixel, and I'm going to set opacity zero. Also, I'm going to use transition propriety. Transition all and transition duration is 0.3 second. Then I'm going to set this file. After I set this file, as you can see, it vanish the border. Now we need to work on the Hvar fate. I select this section. Basically copy this section and I'm going to paste it here. After that, instead of using before, I'm going to stargt after element. And I'm going to set this file. Also, you need to change their position, we need to make bottom to top and left to right. I'm going to set this file. After I set this file, as you can see, it vanish both the element, both the borders, and when I hover my color above the ancha tags, here, it reappear it again. It moves inward to outwards. Now just one thing we have left. We need to change the background color when I hover over this link. For that, we need to create the hover selector of ancha tag. So here, after that, I'm going to type A, colon hover. Inside the Carras at first, I'm going to define the background color, background color, and I'm going to make it background color white. Also, I want to change the text color because if we do not change the text color, then our font color match with the background color and our text and our text become invisible. I'm going to say color. Font color, I want to make it 222, dark gray. I'm going to set this file. After I set this file, if I hover my cars on this anchor tag, here you can see the beautiful hover effect. So this is how we create this beautiful menu Hova effect. I hope now it's clear for you how you can beat it. So thanks for watching this video, stay tuned for our next project. 30. Full screen animated menu: Hello, everyone. Once again, I am back with a new project related menu hover animation using CS's transition and transform properties. And in this project, we are going to create this nice menu hover effect. So when I hover my cursor in these items, as you can see, at first, the color of this link becomes semi transparent and after that, small text came together and create this glowing effect. So this is what we are going to build today. So let's start the practical and see how we can create it. So as you can see, side by side, I open my Visual Studio code editor and my browser using Light server extension, and I already create an ML document name index dot HTML. With that, I create Style D CSS file and I link this file with this document. Now inside the body tag, first, I'm going to take a section tag. Section. Now inside this section tag, I'm going to take nodal list U. Then I'm going to take a list item i. Next, inside the LI tag, here I'm going to take a anchor tag, and I'm going to assign data text attribute data text data text equal to M type home. And inside it, I'm going to type inside the Anchte I'm going to type home also. After that, I'm going to set this file. After I set this file at the same way, I'm going to create another menu items, so I duplicate this line multiple time. This is for about. Also, I'm going to change the data text about, and this one is for services. Also, we need to make changes in data text, and the last one is for portfolio. Then next, I'm going to duplicate this session again and this one is for contact, and I'm going to sub this file. After that, let's jump into the CSS file and start styling style your CSS. First, I'm going to import a text. Here I'm going to use popping text from Google Fonts. I want to set this file. After that, I'm going to use universal selector star. Then inside the alia says, first, I'm going to assign Margin, Margin, and I'm going to use zero. I want to remove margin from all of the direction and padding also zero, then box sizing, box sizing border box, and fun family font family, I'm going to use Poppins and it's come from sensory font family. We need to move it inside the double codes, and I'm going to set this file. After set this file, this is how our text look like. Next, I'm going to style section text. I'm going to type section, Section inside the cases. First, I'm going to define position, position, and I'm going to make it relative. After that, I'm going to define Eden height with hemmed Assn with 100 per same. Height. Here I'm going to assign height, 100 VH. After that, I'm going to assign display, display and I'm going to make it flex, justify content center, also align item center. Basically, it's going to align the items middle of this page vertically and horizontally. After that, I'm going to make overflow, overflow, I'm going to make it hidden. Then I'm going to set a background color, background. Background. I want to use the gray background, this color code, and I'm going to set this file. After I set this file, this is where we place the element and our background look like that. After that, I'm going to remove the dots from this list item. I'm going to target the LI tag, AI, then inside the liss the property I'm going to use at least style, and I'm going to make it none. I'm going to satisfy. After stifle, as you can see it remove the list item dots. Then I'm going to target the anchor tag. I'm going to style the anchor tag. Here, first, I'm going to define the position. Position, I'm going to make it relative. Then I'm going to make it this doc. This way, I'm going to make it block. After that, text decoration, text decoration. I'm going to make it none, so it's going to remove the underline. Text line, text line, helm make it centered. Also, I'm going to convert these takes into uppercase, some type text transform uppercase. After that, I'm going to define font size, font size, here, I'm going to use four EM, four EM. Then I'm going to define colored. Color and hair, I'm going to use white color. So use has tag if if A, fully visible, white. After that, I want to use a little bolder font, to type font weight, font to 8700. Next, transition, transition. I'm going to make it 0.5 second. And I'm going to sub this file. After I set this file, this is how our menu items look like. Now it's look much better. Now, when I how this link, I want to make it semi transparent. I hover over this link, so I'm going to create the Ha selector A, cool and Hover then inside the calices, I'm going to define the color and here I'm going to use RGBA color, RG BA. RGBA color for red, I'm going to use 255 for green, also, I'm going to use 255. Basically, I want to use white colors, so I use 255 will for all the colors. For the Alpha value here, I want to use transparent so I'm going to pass 0.1. It's going to make it transparent and I'm going to set this file. After set this file, when I hop my car on this text, you can see the result. Basically, when I hover on it, it's going to reduce the opacity. Now, let's work on the small text. When I hover my cursor, I want to appear the small text. I want to appare it above the large text. For that, we need to use before pseudo element. Let's use the before psudo element, subtype nga tag before. Then inside the carira says, here, we need to pass the content. Content here we need to use attribute, and I'm going to pass the data text data text. Basically, here we retrieve the data text from the data text attribute which I use in our anchor tag, this one, and it could work for each of the link. Now we need to position it exact above the text. For that, I'm going to use position property position, and I'm going to make it absolute. After that, for the top value, here, I'm going to use 50%. 50% from the late, also, I'm going to use 50%. Then I'm going to use transform property, transform, transform, here, I'm going to use translate value, translate, translate inside the round resis, here, I'm going to pass -50% from the Xxs and from the YXs -50%. Next, I'm going to assign a color, color here, I'm going to assign greenish color SmtiHtag three B F if a seven, this color code. I'm going to set this file. After I set this file, this is how its look like. Now the green text is covering the links, and now I'm going to reduce the font size. So type font size. Here I'm going to use 0.4 EM. I'm going to set this five. Then I'm going to add some letter spacing. Hete later, letter spacing, I'm going to pass nearly 40 pixel. I think it's enough for it. It's enough for now. Let me show. Now, all the character separate from each other. We have 40 pixel gap between them and the next property I'm going to use text shadow. Take shadow here, I'm going to use this way. This is the position of this take shadow, and this is the blurriness of this take shadow. This is a spread value of this take shadow, and this is the color of this shadow. I want to set this file. This is how it growing the text. Next, I'm going to reduce the font weight. He type, font weight, fontut hem to use 500 value, 500. Little lighter font. Next, I'm going to use opacity, opacity here I'm going to set the opacity zero. By default, it going to hide this text and then I'm going to use transition property. Transition, I'm going to make it 0.5 second, and I'm going to set this five. Basically, here I increase the blur value every time. First I make it ten pixel, then I make it 30 and last I make it 80. Next, when I hover over this list items, so LI col and hover, then I want to target the before pseudo element, A, before. Then again, I want to visually text. I'm going to set opacity I'm going to set opacity one and also I'm going to reduce the letter spacing. Later spacing, I'm going to make it six pixel and I'm going to set this file. After I set this file when I hover my cars on this text, now you can see the beautiful effect. Now you can see all the letters come together. It reduce the distance between the letters when I hover on it and create a beautiful effect. At first, the big text fade away and then the small text come together. Now the problem is Jen Hoberm cars are on that link. At the same time it fade away and the small text come together. But I don't want that. I want little delay between them. For that, we need to jump into the anche tag, and here we need to use transition delay, transition delay, and I want 0.5 second delay. I want to set this fine. Also, when I hover over on it, then I want transition delay, transition delay. This time I want Z. Also, we need to add transition delay in our before lemate. Here, I'm going to type transition delay transition delay, I'm going to use 0.5 second. Now to set this file when I hover my cars are on these elemins, this is the result we are going to looking for. Now I create this beautiful many hover transition effect. I hope now it's clear for you how we can create it. Thanks for watching this video, stay tuned for our next project. 31. Vertical menu hover effect: Hello, everyone. Welcome to another new lesson in this course. And in this lesson, we are going to create another menu hovering effect. Here you can see a beautiful vertical menu with transparent text and one pixel stroke. And also, we have a lab to border all of this link. And when I hover over to this link, as you can see the lab to border move to the right side and it fill the text with color. The link stroke fill with the color and create a very beautiful effect. So today, the sutial we are going to create that. So let's jump into this studio code editor and start our coding. So finally, I'm in my visual studio codtor and inside the body tag, I'm going to take UL tag and order list. Then inside this UL tag, I'm going to take a LI tag for list item, and inside it, I'm going to take a anchor tag, A. After that, I'm going to use a attribute called data text. Data text. Data text equal to Hera Mu type home. It's a home nusmtype home data text, and also inside the ncatag I'm type form. Then I'm going to duplicate this section and I'm going to duplicate it up to four time. For each of the link, I'm going to change the text. It's about. Then it's for contact. Then come services. At last we have team. I'm going to set this pile. We are home about contact services and team. Next, I'm going to jump into the CSS file and I'm going to start siding. At first, I'm going to import a font. I'm going to use popping fonts. After that, I'm going to use Universal select or start and inside the calices, I'm going to set margin and padding, margin, zero, also padding, also zero. Then I'm going to use box sizing, box sizing, box sizing, water box. After that, font family, font family. Here I'm going to use pop ins font. Since the door goes, I'm going to type Poppins. And it's come from SansercFon family. And I'm going to set this file. After I set this file, if I show you my browser, this is how it looked like. Now let's back to the code editor again. But you can notice here I did the spelling mistake, pop ins, not pop ins, pop ins, and I'm going to sub it again. Next, I'm going to stay body tag. Body inside the col verses. At first, I'm going to use dist property display and here, I'm going to use display flex and justify content, justify content center. Also align items center. Now it's going to horizontally and vertically centered the lens middle of this page. Then we need to assign the minimum height. Mm height, minimum height herm to use 100 VH 100 viewport height. After that, I'm going to set a background color, background, and I'm going to use background color, Hastag 222, dray background, and I'm going to set the file. After set this file, if I show you my browser, and this is how it look live. Next, we need to provide gap between these links. Also, we need to change the direction. Let's back to the code again. Here, this time I'm going to target the UL tag, UL, UL inside the carirasF time you define the position, position, I'm going to make it relative. After that, I'm going to define display, display here I'm going to use flax. Then I'm going to use flex direction, flakes direction I want to use column. After that, I want little gap between them type, gap, nearly 35 pixel. I think 35 pixel is good for it. I'm to satisfy. Satisfle if I back to my browser, this is how it look like. Next, we need to remove the dots from these links. For that, for that, we need to select the list items on type LI inside the calibraces. I'm to use first I'm to use position property, position, I'm going to make it relative. Next, I'm going to use list style. List style. Here I'm going to use nun value. None. I'm going to set this file. After I set this file, you can show you my browser, as you can see it remove the dots. Then I'm going to target the anchor text. Type A, then inside the calibraces. Also in to define the position and position, I'm going to make it relative again. Then I'm going to define the font size font size, and I'm going to make it four EM. After that, I'm going to use text decoration. We need to remove the underline Sotype text decoration. We need to use the underline type, text decoration, here I'm going to use none. And letter spacing, letter spacing herm to use letter spacing nearly two pixel, otherwise, three pixel is a few to pixel and line height line height and hem assign line height nearly one. After that, we need to convert the text into uppercase. Here I'm going to use text transform property, text transform, text transform, I'm going to make it uppercase. They went to acantic color, and as you know, we need to make it transparent. So type color. Color and hair, I'm going to make it transparent. And I'm going to set this file. If I set this file and show you my browser, you can see nothing because I make it transparent. So let's back to the quote eater, and let's try to add some. Now, we need to add some stroke in this text. For that, I'm going to use this property, webkit texts stroke, and I want to add here I want to add one pixel stroke, and I'm going to make stroke color a little transparent, somebody use give value, RGBA. Here, I want to use full white colored, somebody use 255 for red, 255 for green and 255 for blue. For the Alpha value, I'm going to use 0.5 semitransparent. I'm going to set this file. After set this file, if I back to my browser, this is how it looked like. It already looked nice. Next, we'll need to use the before pseudo element. Let's decorate code iter again. Here, I'm going to type A, colon Bf then inside the caia says, here, I'm going to use content property, content, and this time we don't need to use dan content because we have already content. So use attribute, and here I'm going to pass the data text, TATA text. I'm going to sub this file. After I set this file, here you can see the content before the link home, it is the exact same content because in our data text attribute, we assign the same content. Next, we need to position the before element. But before for understand it, what's going to happen here, I'm going to open this browser and my codeaor side by side. Next, we need to position the before text. We need to position it above the exact text. I'm going to type position and I'm going to make it absolute, and I'm going to set the file. Next, I'm going to assign color font colors. I'm going to type color property, and here, I'm going to paste the color code. This one, this kind of reddish orange color. Also you can notice the stroke, the one pixel stroke behind it because in our anchor tag hair we assign stroke one pixel. Next, I'm going to add border at right side, some type, border, border right. I want eight pixel, otherwise, ten pixel, it's up to you, eight pixel, solid border, and my border color is exactly the same color as font. This color code. I'm going to set this fine. Here you can notice the border. Then I'm going to add the same take stroke. I'm going to copy this propriety with this value, and I'm going to paste it here. But this time, I'm going to assign the orange color and semble to endline. A sep this file, you can see the result. Here it at the one pixel stroke. Next, I want to hide the before psudo element. I want to show the orange text when I hover over on it. So I'm going to assign with helmed assign with 0% and overflow, overflow hidden. I'm going to set this file. Set this file, as you can see, it hike the before psudo text. And finally, I'm going to add transition. Transition, and I want to add transition for 1 second. The before pseudo element have a width of zero, and also it's hidden and you can see the original text. Next, I'm going to create the Hover selector of this before pseudo element, some type, for some type, anchtg then hover. Hover, and I want to select the before pseudo element, before. Then inside it, then inside the cariversT time, I'm going to increase the weed. We, I'm going to make it 100%. When I hover over this link, it going to increase the width of this before text and it's going to show the text again. So please set this file. If I hover my car on this home link, you can see the result. If I remove my car again, it's back to its original position. When I hover my cursor on this element, it covered up the link with this color. But the problem is this border is very close to this link. It would be nicer if I add a little distance to this border. I want to move this border a little bit farther than the original text. We can do it easily if we provide dittle space on our text, also in our data text. As you know, to add spaces in TML, we need to use this special character at the rate and person sign NBSP and going to do it in our link also. I'm going to copy I'm going to paste this space before the te start, also before the services and also before the team, and I'm going to set this file. After set this file, you can see the result. Now it look much better. Also, when I hover over this link, also it add little space at right side. Sorry, if you want to add little space at right side, also, you need to use it, upc the link text. Act the text, let me show you. Again, I'm going to pass the DML code. This time, I'm going to paste it up the text and save it again. Up Satisfle if I hover my cursor again, now you can see at right side also it provides a gap and this look awesome. I hope now it's clear for you how we can create this beautiful menu design with the help of transform property. 32. Rotationg loading effect using css animation esv2 90p bg 10p: 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 Dground 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. 33. 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. 34. 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. 35. 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. 36. 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. 37. 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. 38. 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. 39. 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. 40. 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. 41. 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. 42. 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 VH. 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. 43. 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 rain clas. 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 dots 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. 44. 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. 45. JavaScript text animation with glowing effect part 1: Hello, everyone, once again, I'm back with a new project related JavaScript animation. In this particular lesson, we are going to build this beautiful hovering effect. You can see when we hover over this text, these effects happen. As you can notice, the text shine to left to right. Also you can notice all letters had different colors. When I hover it away, this light effect fade away. We will create this effect using DML, CSS, and little bit of JavaScript. Let's start create how we can build this one. As you can see, side by side, I open my Wizard studio code aer and my browser using b server extension and I already create an TML document name indexdt TM. With that, I already create the styled CSS file and I link this file with this document. Then I also create script doot Js file. For now, our style CSS file and script and Script DJs file is completely empty. At first, inside the body tag, I'm going to take a H two tag, H two. Inside this H two tag, Amuotype JavaScript, animation, this one, and then I'm going to set this file. After I set this file, this is how it's oblige. Next, I'm going to assign a class to the H two tag, so to type class, and our class name is text. And I'm going to set this file. Is this file, now let's jump into the style or CSS file. First, I'm going to use a universal selector, star. Then inside the ali versus first, I'm going to define margin, margin and padding. Margin, I'm going to say margin zero for all of the direction. Then I'm going to say padding. Padding also zero. Then I'm going to define box sizing. Box sizing, I'm going to make it border box. Then I'm going to define the font family, font, family, and I'm going to use Aerial font, area I'm going to set this file. After set this file, this is how it look like. Next, I'm going to target the body tag. Body, then the calissF property, I'm going to use display. This play, I'm going to make it flakes. Then justify content center. Also align item center. The next property I'm going to use minimum height, minimum height, and here I'm going to define minimum height, 100 v Vote height. Then I'm going to define background color. Background color, and here I'm going to use background color, Has tag 222, it's a dark gray color. If I set this file, this is how it looked like. Next, I'm going to target the H two tag, the heading to tag, H two inside the calyces, first, I'm going to define the position position, I'm going to make it relative. Then I'm going to define the font size font, font size, and I'm going to make it three M value EM and next I'm going to next, I'm going to transform these takes into uppercase to type text, transform uppercase. After that, I'm going to add little letter spacing. For that, I'm going to type later spacing, and I'm going to use 0.05 EM value. Next, I'm going to use cursor property, cursor, and I'm going to make curs default. After that, I'm going to define font to eight. I'm going to type font to eight and I want to use minimum fondwd so I'm going to use 500 and I'm going to set this file. After set this file, this is how it looked like. If I increase the fondd little bit, if I make it 700, let's see how it looked like, I think 700 is good for it. Now let's go to the JavaScript file. Now what to do. At first, we need to separate all the text from these words and we need to put it in a span tag. Every character of this word, we need to put it in a span tag. So later J, we need to act it in a span tag. And the same way, we need to wrap it A in a span tag, then, then a, then, then C. This is how we are going to wrap every character of this text into a span tag. After that, we are going to style this character, and we are going to do that using JavaScript. At first, I'm going to select the H two element and I'm going to store it in a variable. First I'm going to define a variable AET Late and our variable n is text. Text equival to here I'm going to use a dom method called document Quis lector. Ciector then inside the rounds is here, I'm going to target the class name. Here I'm going to target the class name, our class name is dot text, and semiroun in this line. Basically, here I target this H two tag, this H two element using its class name with the help of Javascript Dom. Now we need to wrap each of the letter in a span tag. So here, I'm going to define another variable ALT and our variable name is spans. Spans equal to text, taught in our text, in our text method. Now, what basically in a text do? Basically, it's going to extract the text from this variable. If I print this variable in my console, let me show you some type console dot log, console dot log inside the Run Brass, I'm going to pass the variable name spans. After set this file, if I show you my Console in my browser Ispatle Console. Here you can see the text, JavaScript animation. You extract the text using inner text method. Now we need to retrieve each of the character, otherwise later individual because we need to grab it inside a span tag, and we can easily do that using speed function. Here I type dot split. This method. Then inside the round dresses and inside the roundress I want to split the text by every character. That's why I use this regular expression. Basically, here we pass an empty string, and it's a written array. Who going to store every sp character in it. If I set this file, as you can see, it's written and array. Which store every character separately, JavaScript animation. It is a regular expression technique, and if I pass a space, then it's going to store only array two array item, JavaScript and animation. Let me show you. A provides space if I set this file, as you can see, this time it's stored in this array total two index, JavaScript and animation. We're going to spit this text using empty string, not by space. So we set this file, we are back to the previous position. These are all array elements. Now I want to run a loop over this Ay. For that, you are going to use map method. After split function, I'm going to type dot map Mthood here, we need to pass value and the index. For the value as a first parameter, I'm going to save the letter. I'm going to pass letter. Then I'm going to pass, then I'm going to pass I I for index. Basically this method looks through the array and creates a new array. Remember, here I represent the index number. If we pass zero, then it's going to represent J. If we pass one, if we pass one index, it's going to represent A. If we pass two, it's going to represent. This is how it works. Next inside this map method, I want to call a function. I want to create a function let me show you here I'm going to use arrow function equal to arrow sign inside the alia says, I'm going to return. Return, and here I'm going to use template literal. Here I'm going to use backticks. Inside this backticks, I want to return a span tag. I want to return a span tag, span. Inside the span tag, I'm going to use dollar sign and inside the carvers here, I'm going to pass the letter, these variables. This variable. I copy the letter variable and I'm going to paste it here. So we set this file, as you can see, this map method loop through every character and here we put every character inside this span tag. Here you can see every span tag hold a character. And now we need to convert this array into a normal estimle. We need to inject it in our TML document. For that, we are going to use Join method. So utter around races here I'm going to use dot join. Join method. I going to join all the separated array vdus now if I set this file, you can see the different result. Now you can see in my console, it's a single text. It's not an array anymore. Basically, it's a string, and we need to put this string inside the TML document. Basically, we need to put it inside the heading tag. For that, as you can see, we already target the heading tag using its class name and we store it in a variable called text. Here I'm going to type text, dot text dot inner ML and equal to her to provide the variable name called spans. Now, if I set this file and back to the elements section, now you can see inside the tag HT element, we have multiple span tag for each of the character. So here we successfully put every character in a span tag with the help of JaScript. But there is a problem. It provide comma between all the characters. We need to resolve this problem. If I show you my console, here you can see the comma. For that, inside my joint function, I'm going to join it with empty stream, and then I'm going to set this file again. After set this file, as you can see it resolves the problem. 46. JavaScript text animation with glowing effect part 2: Now let's jump into the style CSS file again. Then I'm going to select this pen tag which is inside the H two tag, H two space pen. Then I said the clivussF property, I'm going to use colored. Colored, and I want to use this color, Hastag 555, this light gray color, and I'm going to set this file. After I set this file, as you can see, it changed the color. It changed all the character colors at once. Also, I'm going to add little transition on it, transition and hound at 0.25 seconds, this amount of time. Then below it, when I hover over this, H two tag, H two, colon hover, then I want to carry the span spans the calis again, I'm going to use color property. Color and I'm going to use this Hashtag 00 FF two A, this colour code, this light green color. I'm going to set this file set this file, if I hover my cle on it, you can see the result, how it's just the color. Then order to give shining effect, I'm going to use text shadow. Type text shadow, this one. Here I use this drop shadow dow and I'm going to set this file. After set this file, at this drop shadow, if I hover over this link, you can see this beautiful lighting effect because of this shadow. And then I'm going to add detail transition delay in our span text. For that, we need to go and jump into the scripted Js file, and here inside the span tag, I'm going to use style tag. It's a inline styling method, equal to inside the double quotes, I'm going to use the property called transition. Transition delay. Transition delay, then I'm going to add double quotation N quotation and inside it, here I'm going to use again here, again, I'm going to use dollar sign. Then inside the CarlssF I'm going to pass the index number, which is I. Then I'm going to multiply index number with 14 and I'm going to set this five. After I set this file, this is how it look like. Oops also need to define the unit. Here in pass me second MH. I'm going to set this file. After set this file, if I hover my cars on this text, here you can see the beautiful transition effect because of this transition delay. For this transition delay, here we use index value. With index, we multiply with 40. Every time for the first index, it's going to multiply with zero. Then it's going to multiply with one. Then it's going to multiply. For, it's going to multiply with two. F A, it's going to multiply with, three times 40. So it's going to return different is result. Mi second result. Because of this delay, it's created this beautiful transition. You can notice our letters shine one after another. Next, we are going to change the color of each letter using CSS filter property. If the same way inside the double codes, I'm going to add another property called filter, filter, colon and I'm going to use Huotd Value Hu the rotate. You rotate. Inside the rounds, inside then I'm going to use dollar sign. Then inside the civses then inside the caris, I'm going to pass, index, multiply with 30, 30 degree. Outside the Cl versus Amil type, unit the EG. After I set this file, if I hover my cursor on this element, you can see different result. You can see this beautiful colorful text. As you can see, each of the character represent different color. It made with different color. This is how we can create this beautiful Java strip text animation effect. Thanks for watching this video, stay tuned for our next project. I hope you enjoy this project. 47. Website parallax Effect: Today, I'm going to build this beautiful Paralex animation effect. As you can see, when I scrolled on my page, it moved the mountains and the leaves from the sea. So let's see how we can create this beautiful Parlex animation effect with the help of JavaScript CSS and HTML. So finally, I am in my vis studio code editor. As you can see, I already create index dot tMLFle, style dot css file and scrip dot JS five. Also you can see in my current working directory, we have a folder called images inside this folder, we have all the images such as hell Image, Hill two, L four, Hill five, leaf, and plant. Also, the coconut tree, this one. These are all PNG images, and I'm going to use all these images to create this paralytic effect. So let's to the index dot five. At first, inside the body tag, I'm going to take another tag called headed headtag. Then inside this head attack, first, I'm going to take a heading to tag H two, and here I'm going to type Logo. Also, I'm going to assign a class to the H two tag, some type class, and also our class name is logo. Then inside this head attack, here, I'm going to take a nap tag, navigation tag nerve and I'm going to add a class to this nap tag, class, and I'm going to type navigation. Then inside this nap tag here, I'm going to take anchor tag A. Then I'm going to add our first anchor element, our neighbor element home. Then I duplicate this section and I'm going to name it about. Also, I'm going to duplicate this section and this time I'm going to name it services at last, I'm going to add contact. I'm going to set this file. After set this file, if I back to my browser, let me show you this is how it looked like. Now we have the logo and the navigation bar. Now, let's jump into the CSS file and style the body section. I am in my CSS file. At first, inside my style CSS file, I'm going to import a font. I'm going to import Google font, which is pop ins. I'm going to use this one. After that, here, I'm going to select the universal selector, start. Then inside the clrass here, I'm going to add some sty. First, I'm going to add margin. Margin, and I'm going to set margin by default, I'm going to set margin zero. Then I'm going to use padding. Padding, by default, I'm going to say padding zero. After that, I'm going to use box sizing. Box. Sizing, box sizing border box. Then I'm going to use font family property, font family, and here, I'm going to use Poppins P O double PINs, Poppins, this one, and apacoma here and I'm going ultrapas the family, which is sensoric. San si, this one, and I'm going to set this file. After set this file, if I back to my browser, now you can see it remove the default padding margin from it, also it changed the font, default font to pop ins font. Now, let's back to the Visal studio code. Then after that, inside the style CSS file, I'm going to select the body tag, body. Then inside the calices first property, I'm going to use background. Background, and I'm going to set this color. HatagFF nine, if nines a light gray color. Then I'm going to say minimum height. Man height, minimum height, I'm going to say it 100 viewport height. Then I'm going to target the header tag, this one, this header section. So I'm copy the tag name header, and here I'm going to type header. Then inside the calibraces. And first I'm going to define the position position, and I want to make it absolute. After that, from the top, I want to place it zero and from the left, also, I'm going to place it zero position. Then I'm going to define width. I'm going to define with 100%. I'm going to use 100% width of this screen size. Then I'm going to define padding. Padding from top and bottom, I'm going to use 30 pixel and for left and right, I'm going to use 100 pixel. Next, I'm going to use this property, display flex and justify content, justify content. I'm going to use flex start, flex start and align IAM, align, IAM center. Also I'm going to set the Za index and I'm going to say Za index 100, I'm going to set this one. Here we use flick Start because I want the logo and the navigation war left side of our screen. That's why we use flix Start and to make sure the header will be visible no matter what element we add. I say Z index 100. Now after set this file, if I back to my browser, let me show you this is how it look like. Now you can notice we have padding from top side, 30 pixel and from the bottom 30 pixel and from the late, here we have padding 100 pixel also from the right, hundred pixel. Next, I'm going to style this logo, so I'm going to target this logo. Now I'm going to target the logo. I'm going to type dot LOGO logo. Then inside the colss Here, first, I'm going to define the font size font size, and I'm going to make it to EM. After that, I'm going to define color. Color and here I'm going to use this red variant color code, this one, and I'm going to set this file. Also, we need to define some margin at the right, some type, margin, right, herd pass 270 pixel because I need gap between the logo and the neb elements. I preset this file. If I back to my browser, this is how it look like. Now let's target the navigation menu. Let's back to the code and first, I'm going to use its class name navigation, so I copy the class name and back to stylo css file. So type, dot, navigation and inside this navigation, I want to target all the anchor text inside the calices. Inside the colors is the first property I'm going to use text decoration, text decoration, and I'm going to make it none. I don't want any text decoration. I want to remove the underline. Then we need to define the color. Color here, I'm going to use the exact the same color, this one, which we use for the logo, dark red. Then I'm going to define padding. Padding from top and bottom, I'm going to use six pixel padding and from left and right, I'm going to use 15 pixel padding. After that, I'm going to define border radius, border radius. Border radius, I'm going to make 20 pixel. Also, I'm going to add little margin. I'm going to type margin. From top and bottom, I'm going to assign Margin zero and from left and right, I'm going to assign Marin ten pixel. After that, I'm going to add little font to it, font weight, here I'm going to assign font to it 600. I want little boulder font, and at last, I'm going to add little transition on it, transition, and here I'm going to add transition duration 0.5 second. I'm going to set this file. After set this file if I back to my browser, let me show you this is how it looked like. Now I want to add Hi it when I hover my cursor on the anchor emits. I want to change the font color and the background color when I hover on it. So let it back to the code, and this time, I'm going to create a Huber selectod using Ancag A Huber. Then inside the clirass here, first, I'm going to change the background, background. I'm going to make background this color. And our font. For the font, I'm going to type color and I'm going to make it white. I'm going to satisfy. After satisfy if I back to my browser and Huber my cars are on these neb elements, you can see the result. This is how it look like when I Hoberm cars are on it. It said background color red and font color white. Now let's work on the images that we use to create the parallax effect. Let's jump into the studio code. As you can see in my current working character, we have the folder name images. First, I'm going to jump into the index dot H file. Then a header section, I'm going to create a section. I'm going to use a section tag section, and here, I'm going to assign a class, and our class name is parallax. Then inside this section tag, first, I'm going to take a image. I G. And here, I'm going to pass the image source. Inside the double codes, I'm going to type the folder name images, and from this images folder, first, I'm going to add this image, hill dot PNG. Then I'm going to assign an ID ID is a Hill one, and I'm going to duplicate this section. One by one, I add all the hill images. And at the same way, I add three leap and plant images. And I'm going to set this file. So we have to tall eight images, five hill image, one tree image, one leaf image, and last one is plant image. So to set this file, if I back to my browser and you can see this is our first hill image. This is our second hill image, this is third one, this is fourth one, this is fifth one, this is the tree. This is the leaf, and this is the and this one is for plants. We need to put all the images together. But before, also I'm going to add another tag, which is H two for the text. Here I'm going to type H two and inside this h2d I'm going to type paralyxParalyx, if. Then I'm going to assign ID to this H two tag, ID, I'm going to make it text, and I'm going to set this file. Now, let's jump into the tile your CSS file and target the parallax D. Here, I'm going to target the parallex D dot, paralx and inside this, then inside the calibraces. The first property, I'm going to use position. Position, I'm going to make it relative. Then I'm going to use display property. Display, I'm going to use flix. After that, I'm going to justify content center and align item align items also center. Then I'm going to assign height, height and here I'm going to use height 100 VH. After set this file. If I back to my browser, you can see it put all the images next to each other. Now let's get to the studio code again. Next, I'm going to hide the overflow area. Overflow, it's a hidden. After that, to order to give the exact shape we want, we need to select the images which is inside the parallax deep. Here I'm going to type dot parallax, image ING, then inside the Carlss here, I'm going to pass position, position, first, I'm going to type absolute. Then I'm going to add top value, top, and I'm going to pass zero. Next, I'm going to use bed value. As I'm going to pass zero. After that, I'm going to defy wet with, and here I'm going to set 100% weed. Then I'm going to define the pointer event. Pointer events, here, I'm going to use Nun Valu. None. I'm going to set this file. After set this file, if I back to my browser, this is how our images looks like. Together, they form this beautiful background. Reason this is happening because image, all of the image are designed only for this purpose. Their resolution is same. This is one view split into multiple images. This is it for this tutorial. At the next part of this tutorial, we are going to complete this animation. Thanks for watching this video, stay tuned for our next part. 48. Website parallax Effect part 2: Hello, it's nice to see you back. This is the second part of this tutorial. As you can see in our previous part, we arrange all the images at right place and create this dautiful view. This is one view that split in a multiple images. Now, let's work on the H two tag. I'll jump into the visual studio code editor, and if I show you my index estimated file, here you can see the two tag, two ID text. I'm going to use its ID name text, and let's jump into this style CSS file. Here at first, I'm going to target, I'm going to target the text using its ID name. So inside the ibas here first, I'm going to define the position, some type position, I'm going to make it absolute position absolute. After that, I'm going to define the font size font size, and here I'm going to say font size five EM. Then I'm going to define the color, the text color, color and I'm going to use the white color, Has tag if if A. After that, I'm going to use little text shadow. But before I use this text shadow, let's back to the browser. Suppose this file if I back to my browser, this is how it look like Perlix effect. Now, let's add little take shadow to give it little depth. Let's back to the Studo code and Hem type text shadow. Take shadow, and I'm going to use this shadow, and I'm going to satisfle to satisfy if I back to my browser, this is how it looked like. Now it provides little death in this text. Now, let's add the content section. Let's jump into the Studio code and jump into the index dot estimate file. Then after this section, here, here, I'm going to add a new section, Section, then inside this section, but before I'm going to add a class, and I'm going to name it content. Then inside this section tag, first, I'm going to take a H two tag, H two. Then inside this H two tag, hemo type, paralex scrolling website. Then I'm going to take a paragraph tag. Inside this paragraph tag, I'm going to take some dummy text for scrolling. I need content to scroll. Type m, I'm going to add nearly 750 word, and I'm going to set this file. After set this file, let's back to the browser, and this is how it looks like. Now, we need to style this content section. So let's add some study. I'm going to jump into the studio coordinator and I'm going to open style or CSS five. I'm going to start the styling. At first, I'm going to see the content section using its class name dot content. There inside the class, first, I'm going to define the position and position, I'm going to make it relative. After that, I'm going to define background color, background, and for this background, I'm going to use the same exact same red color, this one. Copy the color code and I'm going to put it here. After that, I'm going to add some padding from all of the direction, padding 100 pixel from all of the directions. Then after satisfy if I back to my browser, this is how it looked like. I think this red color is very vibrating, so I'm going to try to match with this color. Let's change the color code and this time I'm going to use this color. Something match with this background and back to my browser again. Now, it is quite match with this background color. And then we need to change the text. We need to arrange the text. At first, I'm going to target this heading tag, so Hemo type dot content H two, heading to tag. After that, inside the col ressF I'm going to define the font size, font size, I'm going to use three EM font size. Then I'm going to define colored. Color and hemotype color white. Hastag if if if. Then I'm going to define margin, margin at bottom. Margin bottom, I'm going to pass ten pixel. And I'm going to satisfy satisfy, if I back to my browser, this is how it look like. After that, we need to style this content section. For that, again, I'm going to jump into the CSS file and this time, I'm going to target the content dot content, and I want to target the paragraph. Then inside the colorss first, I'm going to define the font size, font size, I'm going to use font size one EM after that, I'm going to define the color of the text, color, Hen to set it, white, has tag, has tag, if if if. At at last, I want to use little lighter phone so I'm tri font, weight 300. I'm going to set this file. After set this one if I back to my browser. Now this is how it looked like. Now it's look better and we have enough content to scroll. So we successfully complete our styling part, and now we need to work on the paralxeffect. For that, we need to jump into the JavaScript file. Let's jump into the JavaScript file, script dot js. At first, we need to target those elements. I want to say those images, I want to move when I scroll down my page. For that, I'm going to declare a variable late and our first variable name is text, THT. First, I want to target the text using its ID name text equal to document that get element by ID. Here I'm going to pass the ID name. Then inside the round resses I'm going to pass the ID name text and semicon in this line. Then then at the same way, I'm going to target Hill four, Hill five and Hill one. Also, I'm going to target the leaf. I'm going to copy its ID name leaf and back to script JS file. I'm going to duplicate this line and this time, I'm going to target leaf and I stored it in this leaf variable and I pass the ID name leaf. Then I'm going to target Hill one, Hill four and Hill five. So from here, I'm going to target Hill one. Copy its ID name and that to the Scribb Js file and I duplicate this line total two time. This time, I'm going to target Hill one. Then I'm going to target Hill four, hell four, and also I'm going to change the ID name Hill four and at last, I'm going to target Hill five, H five. It's not leaf five, it's a Hill five, so I copy hell, not leaf and replace leaf with Hill. So I successfully target those elements which I want to move when I scroll down my page, such as this text, the first hill and the fourth hill and the fifth hill, also the leaf. I don't want to select this coconut tree and this and these plants. I don't want to select them. I want to move only the background hill. I want to see the first hill, the fourth hill and the fifth hill, also the leaf and the text. That's why I select all of them and store it in a variable in different variables. These are the elements that I want to animate. Now let's work on the effect. So type, Window, dot, and even listener. Then inside the rounder says, first, I want to scroll. If I scroll, then I want to run a call that function. Here I'm to use arrow function. Then inside the crass, it's basically mean whatever code we write inside this called function, when I scroll it, it's going to run this code. Inside this function, I will create a new variable late and our variable is well. T value equal to henotype and I want to extract the value of scroll Y, Su type window, and here we need to extract the value of scrollY type window, dot, scroll, Y, and sub end this line because we need only Y xs scrolling, not Xs strolling to execute the parallax effect. Basically, it's going to excess the vertical distance. Now let's work on the elements, which I want to change. Now to get the value, at first I want to change the text position when I scroll down my page. I want to add a little margin. I want to add margin at top of this text, so it's going to move downward. For that, we are going to use style method, let me show you how. So hero type, first, I'm going to type the variable name. Which stored this text, W is text, text, dot, style, dot, I want to add margin top value. Margin, top. Then equal to margin toque, then I'm going to assign a value. Equal to here, I'm going to pass. Basically, I'm going to use template literals. I'm going to use back ticks. Then inside the back ticks, I'm going to use dollar sign, then inside the Carlss, then inside the crass, first, I'm going to provide the value, the value we get from this scroll, some type value, and I'm going to multiti it multiply and I want to multiply with 2.5. Every time when I scroll down my page, it's going to change the value and it's going to multiply with 2.5 pixel, then provide the unit PX. That's it. After set this file, if I back to my browser, and try to scroll down this page, here you can see the result. Whenever I scroll down this page, as you can see, this text add a new margin at top. At the same way, we are going to move other elements at left side and right side. Let me show you how. Let's get to the studio code, and this time I'm going to duplicate this line, and I'm going to target the leaf Leaf style, and this time, I want to move this leaf from the top. Hemo type style dot, top. Above that, here I want to multiply with -1.5 minus 115 pixel. Here, I want to provide negative value. So when I scroll down my page, it's going to provide the negative value, dynamic negative value to this top property. At the same way, I'm going to do this line, and this time, I want to move this leaf element at lip side, PT and here, I'm going to pass value, I am going to pass the positive value. I'm going to set this file. After set this file, let's back to the browser. But before I'm going to add something cools, it's necessary. Otherwise, it can throw error. So back to the browser, if I scroll on my page, here you can see, you can notice the leaf. Whenever I scroll down my page, it provide little move away effect. As you can notice, it move away from this seam because here we use minus top value and positive left value. That's why it move upside and left side. At the same way, we need to handle the hill five, hill four and Hill one. Let me show you how. I'm going to duplicate this line and this time, I'm going to target Hill five. I want to move this hill five element left side and to provide the same way too. It's going to move it lip site. Then I duplicate this line, and this time I'm going to target Hill four, and I want to move this hill four at opposite direction. So here I'm going to use negative do, negative lift do at last, we have another element which is hill five and I want to move this element top side. It is the background hill. That's why I want to move it top. So I'm going to pass top property, top and here, I'm going to change the value. I'm going to use only one pixel. Every time, according to the dynamic value, it multiply with one. Oops, our background hill is not hill five, it's a hill one, not five. It is the main dground hell. So after satisfy, if I back to the browser again and scroll this page, now you can notice this beautiful parallax effect. I hope now it's clear for you how we can create it. Thanks for watching this video. Stay tuned for our next project. 49. Animated Eyes Follow Mouse Cursor: Hello guys. Nice to see you back. Once again, I'm back with a new project related Javascript animation. Today in this project, we are going to create this beautiful animated eyes. As you can see when I Huber my cars are on this body element, this body tag, it follow the cars are pointed. If I move the cars upside, it follow the upside if I move the cars at p, it follow the lap side, also from the down and also from the right. If I uber my color on the face of this Imoge, you can see it changed the facial reaction. Also it follow the mouse cursor. So today in this project, we are going to create this beautiful animated eyes, which is going to follow our mouse cursor. So let's see how we can create it. Let's jump in the visor Studio code editor. As you can see, side by side, I open my visual studio code iter and my browser using lip server extension, and I already create a TML document named index dot TML. I already link this TML document with the CSS file, style dot CSS. At first, inside the body tag, I'm going to create a De Dev class and our class name is phase. At first, I want to create the phase. Then inside this deep tag, I'm going to create another D D class. In this section, we are going to create Is of our pace. Then inside this section, we are going to create two Is DV Class I. I'm going to duplicate this line. So we successfully done our estable part. First, we create a tag for phase. Then inside this past tag, we create a block for Is, and then we take to another deep tag for two Is. Now, let's jump into the style section. At first, I'm going to take a universal selector star. Inside the alorss at first, I'm going to use margin property. Margin zero. And then I'm going to use padding property padding zero and box sizing border box. Next, I'm going to starle the body tag, body inside the Caliss display flex, Justify content center. I use flex container to align our face center of this page. Next, I'm going to use align item property. Align items center. Minimum height, mean height. Hundred VH. I want to use whole webpage. That's why I use 100 VH. And our last property is background. Background. For background color, I'm going to use RGV Value RGV for red, I'm going to use eight. And for green, I'm going to use 84 value. And for blue, I'm going to use 139. If I set this file, you can see the background color. For this project, I'm going to use dark blue background color. And now I want to style the pace part. So I want to style dot, face inside the Cali recess, at first, I'm going to use position property, position relative, and our next property is Width, 300 pixel. Also I want to say height, height, 300 pixel also. Our next property is background. Background. And once again, I'm going to use RGV value. RGV for red Value, I'm going to use 255. For green value, I'm going to use 198. And for blue Value, I'm going to use 54. If I set this file, you can see the square box on your screen. And now we need to convert this square shape into a round shape. For that, I'm going to use border radius property. Border radius 50%. If I set this file, you can see the result. And also, I'm going to use display property. Display flex. Justify content center. Also I'm going to use Align item property center. Hey, if you are not familiar with CSS Flexbox and greed, you can check out my responsive CSS course. So we successfully shape our face. Now we need to put mouth in this phase. For that, I'm going to create dot Pasol colon, before selector, before. Then insert the cariss as you already know, first, we need to take a blank property, and our property name is contained. Contained blank, then our next property is position. Position absolute. And then I'm going to say it height and width, Width, 150 pixel, height, 70 pixel. And now I'm going to take background color. Background chocolate. If I set this file, you can see a rectangular shape middle of this face. And now we need to move this phase little bit down. For that, I'm going to use top value. Top 180 pixel. If I set this file, you can see the result. Here you can see our mouth look like a square box, and to create a perfect mouth shape, we need to use border radius property. At first, I want to set a border radius in this corner. For that, I'm going to use border bottom lift radius. Border bottom lift radius, and I'm going to use 70 pixel. If I set this file, you can see the result. Then I'm going to duplicate this line and replace left with. If I set this file, here you can see it create a smile shape, and now I want to change the mouth motion when I open my cursor on it. For that, we need to create another selector. Let me show you. Dot, face, colon hover, Colon before. Inside the calices, I'm going to re use this value and property. I'm going to copy the property and Value. And paste it here. Now, one by one, I'm going to replace these values. First, I'm going to change top value 210 pixel. If I set this file and Ober my cars are on it, you can see the difference. It's change the position of mouth, and next, I'm going to change this boer radius. Bottom bottom lip radius zero. Also, bottle bottom right radius zero. If I set this file and Ober my cursor on it, you can see the difference, but there is no transition in this transformation. For that, we need to use transition property. So here, I'm going to type transition. Transition 0.5 second. If I set this file and over my cars are on it, you can see the transition effect. It takes 0.5 seconds to complete the transformation. So we successfully complete our mouth section. Let's jump into the I section. As you can see, inside the I container, we have to I. So let's create the Is of this pace. At first, I'm going to style I section dot Is then inside the livers is position relative, and I want to position it top -40 pixel. I'm going to use display property, display flex. Using this property and values, we successfully move our I section in that place, not the middle of this phase. And then we need to create the I. I'm going to select Is class. Also, I'm going to select I class. Then inside the calibrassO first property is position. Position relative. And also I'm going to say height and width for this I Width, e ty pixel, heightetipixl. After width and height, I'm going to say background color. Background. Why? If I set this file, you can see the result. Basically, side by side, it creates two square box with a typical Width and height. And then I'm going to use this play property, display block. Next, I'm going to use border radius property. Border radius, 50%. If I set this file, you can see the difference. Here you can see side by side, it creates two eyeballs, but there is no gap between two eyeballs. So for that, I'm going to use margin Bobbet Margin, zero and 15 pixel. If I set this file, you can see the difference. Overall, this margin value provide 30 pixel space between these two eyes, and now we need to create the eyeballs for this eyes. At first, I'm going to copy this line. And I'm going to paste it here. With I, I'm going to use before selector, Cl and colon before. Then insert the Cardiorss as you know, first, we need to create a blank content. Contain blank. Our next property is position. Position absolute. And also, we need to place it. I'm going to use top value, top 50%. Let 25 pixel and for our eyeballs, I'm going to set with 40 pixel. Also height 40 pixel. Next, I'm going to use diground color for our eyeball, background, and I'm going to use RGV value. Argv, for green, I'm going to pass 42. Then for red, I'm going to pass 42 once again. Also for blue, I'm going to pass 42. Set this file, you can see the result. As you can see, it creates two dark gray square box, but we need to make it round shape. So I'm going to use border radius Border radius 50%. If I set this file, you can see the result. Here you can see our eyes look down in that angle, but I want to change the eyes looking angle, something in that position. For that, I'm going to use transform property, transform, translate -50% for XX is also -50% for Y xs. If I set this file, you can see the result. Now it's loop in that angle. If I ber my curar in this emotive phase, you can see the reaction. But the eiceball do not follow the curar position. For that, we need to use JavaScript. So we successfully complete our styling part. In the next part of this video, we are going to work with JavaScript. So thanks for watching this video. Stay tuned for the next part. 50. Animated Eyes Follow Mouse Cursor adding javascript: Hello, guys, good to see you back. This is the second part of this tutorial, and at that section, we are going to start JavaScript. So inside the body tag, here, I'm going to type script tag. Script. And inside the script tag here, at first, I'm going to select the whole body using Qi selector. So to type document dot Qui selector. Selected method. Then inside the round dresses, I want to select the body. So inside the single code, I'm type BO BY body. And then I want to run an evet. So to run an event, we need to use add event listener method, some type dot at event listener. And inside the round dresses, here, I want to run mouse move Evet. Inside the single code, I'm type mouse move. Then after comma, here, I'm going to call a function and our function name is eyeball. I eyeball and semicon to N line. Now, we need to create this eval function. But the question is, what I just basically do? Basically, here we said mouse move event in whole page. I want to say the body. It's mean, whenever I move my Karsar inside this body tag, it going to return carsR exact location, such as XXs YXs, top position, right position, et cetera. And every time if we move the mouse inside the body tag, it's going to call this function, this eyeball function. Now we need to create the function. Here, I'm going to declare the function name function Ker using function Q function, and our function name is eyeball. As you can see, it already suggests me because I call this function, so type I ball. Function and our function name is eyeball. This function going to handle the I movement logic. Then inside the cariors then inside the carliras I'm going to declare a variable where and our variable n is I EYE I equal to here, I'm going to type document dot is elector. Then inside the round verses, inside the single course, I'm going to target, these two Is Som type is class name. I'm going to target it using its class then song type dot EYE, and semicroon two in this line. Basically, it's going to select those element who have class I and as you can see, and as you can see, we have to two deep element with class I. This line basically select all elements with class I and return in nodes like an array, we store the array in I variable. Now we need to run a loop. We need to run a loop through each of the I element. So here, I'm going to run for each loop. I dot for each for each. Then inside the roundress again, I'm going to call a function. Function and inside the round reress I'm going to pass I here we run a loop for each of the Is. Next, inside the calices, we need to calculate the center position of the I element. In terms of XXs and YXs, XX stands for horizontal and YX stands for vertical coordinates on the screen. So here, I'm going to declare a variable. First, I'm going to declare a Tlate X. This is for Xxsvdu Xs position of I equal to heterotype inside the round ress motype I dot, and I'm going to use a method call get bounding client react. Type get bounding client react. Then I want to extract the lift dot lit with that, I want to concatenate with inside the round verses, I dot client width, client width, divided by, and I want to divide it by two. Now the quotien is what that mean? Let me explain to you what does that mean? What I basically do here. As I told you, here, we are going to calculate the center position of I element. First, we extract the X xs. Here we declare a variable called X and inside the round brass, at first, here we extract I dot, gate bounding client react, dot lit. Now the question is, what basically this method gate bounding client react do? It is give you the position and the size of the element, related to the viewport. I want to say the browser window. It's written object like this, 100 top position 200 with 50, height, 50, et cetera. Here we extract, basically here we extract the late edge of an I element, this edge. Then we continate with I dot client width divided by two. Now, what does that mean? It client width returns the inner width of the element. This method return the inner width of this element. Suppose if the I is 50 pixels wide, then it going to return client with 50. Then I divide this 50 pixel width by two. I going to return 25. I mean it going to give you the horizontal center position. Hap up I width, give you the horizontal center position of this I, this point. If you contatenate both the values, lept H and the half width, it's going to return the horizontal center of the IT line. At the same way, we need to extract the vertical center. I duplicate this section this time, I want to change the variable, I'm going to make it Y. It is for YXs for vertical direction. And instead of using lab value, I'm going to use top value, top and and now we have the top value and half of the width and it's going to return the vertical center of the I. The main conclusion is X and the Y together give you the client x and client to I of the I element. And these two coordinates are used to calculate the angle from the I to the mouse, so we can rotate the I in the carret direction. So now we have the center position of this I. Next, we need to calculate. We need to calculate the angle between the mouse and the I. For that, we need to use math method. So here, I'm going to declare a variable LET late and our variable is radian because we are going to extract the radiant value. Radian equal to heart. He I'm going to use a method called math dot, and amotyp at an two. Then inside the rounderses amotpevent pageY position. Event, page Y, Y position, minus YXs and comma. At the same way, we need to extract the X xs. Event, dot, page x, page x minus Xs. Now let me explain this line. What we basically do here. As I told you, this line calculate the angle between the center of the I and the mouse pointer. Now the question is, what is math atan two? It is an inviel JavaScript function. It's written the angle between the positive Xs and the point, such as XY, and it returned the angle in radiant value. It's help to find the direction from one point to another, handling all adin correctly. In this case, we are finding the angle from the center of the I to the mouse pointer. So this is our mouse pointer and this is the center of the I. So we need to extract the angle, this angle. And here we did a elemistic. First, we need to work on the X xs vdu. Then we need to work on the YX d y. Here, we need to pass this two parameter. Now, what does that mean? What is event pH minus X? It's mean how far the mouse is from the I horizontal at horizontal direction, and this one is represent how far the mouse is from the I vertical. It's going to represent vertical direction. Basically, this one return Delta X value and this one return Delta Y value. I know it sounds very technical, but this calculation give us the result. Now the question is why we calculate this? We use the angle to rotate the I so it points toward the mouse cursor. Now we need to convert this radiant value into degree value because in our style, we need to apply degree value, not the radiant. Here, I'm going to declare another variable AET late and our variable name is root T. Late root means rotation. Inside the rounds, first, I'm going to pass the radian. Radian multiply with inside the rounds, 180 divided by math dot Pi. Dot Pi. Then I'm going to close the round brass and here I'm going to type, I want to multiply with, I want to multiply with minus one. Then I'm going to close the round brass. Then outside then outside the round process, I'm going to add plus I'm going to conggnate with 270 and semicon to end this line. This line convert the angle from radiant to degree value. After that, it adjusts the rotation to make the I point correctly at the moms. Basically, here we use a formula. Degree equal to radiance, multiply with 180 by Pi. So this is what we do here. After that, we multiply with minus one. Multiply the angle by minus one to flip the direction. Here we flip the direction. This is needed because the screen coordinate system is sweeped vertically compared to the standard mathematical coordinates store. Without this, the I could rotate in the wrong direction, and then we add to 70, add to 70 degree to align the starting point of rotation with the top. Now the question is why we use 270? Why we use this vedo? We can use anything, but why? Because in CSS, zero degree is facing right, 90 degree is facing down, 180 degree is facing lift, and 270 degree is facing. It will ensure that the I directions start from the top and rotate correctly. First, we convert the radiance in degree. Then we flip the direction using multiply minus one. Then we flip the direction for cark visual rotation. At at last, we align the rotation with the default facing up of the I. I know it sounds very technical. Now we have the I rotation value. If you want to print this value in your console, you can, but I'm not going to print it here. Next, I'm going to apply this rotation value to our I element using style method. Let me show you how. Here our type variable I, dot, style, dot, and I want to apply transform property. Transform, equal to here, I'm type. Inside the double codes, I'm going to pass a string. Inside the double code, I'm going to type rotate, rotate. Then inside the round grass, again, I'm going to use double codes and inside the double cos I'm to type space, concatenate with here I'm going to pass degree value. EG and semicoront in this line. And I'm going to set this file. Now I press set this file. If I hober my cursor on this body section, now you can see it follow the cursor, the eyeballs follow the cursor pointer. So this is how we can achieve animated eyes follow mouse cursor if it this animation. So I hope now it's clear for you, thanks for watching this video SaduneFw next project. 51. Colorful text animation: Hello, guys, good to see you back. Once again, I'm back with a new JavaScript animation project. And in this tutorial, we're going to create a beautiful, really cool text color effect with CSS animation and Javascript. Here you can notice the color of the letters change randomly, and it's blinking also randomly. We will generate a random animation duration. Also animation delay to create this effect. So let's jump into the results stdio code editor and see how we can do that. As you can see, side by side, I open my Visual Studio code editor and my browser using if server extension, and I already created an HTML document named index dot HTML. Then at first, inside the body tag, here, I'm going to take Htag HT Element, this one, heading two, and I'm going to assign a class, and I'm going to assign text. After that, inside this H two tag, I'm going to type colorful text. And I'm going to set this file. After set this file, you can see the taste in my document. Next, I'm going to jump into the style CSS file. At first, I'm going to use Universal selector star, and then inside the aliases, first, I'm going to assign merging to this page, margin from all of the direction, I'm going to use zero. Then I'm going to assign padding, padding, and I'm going to set padding value also zero from all of the direction. Then I'm going to use box sizing box sizing. I'm going to use bottle box value. After that, I'm going to use font famiy. Font. Family here I'm going to use aerial font, area I'm going to set this file. After set this file, you can see the result. Then I'm going to style the body section, body. Then inside the Cali re says, first, I'm going to define display, display and I want to make it flex. After that, I'm going to assign justify content, justify content center align item center. We use it because we need to align this element vertically and horizontally center. After set this file, you can see the result. Now it's horizontally center, but if we provide if we provide minimum height, mean height, then if I set it 100 viewport height, then set this file, you can see the result. Now you can see it horizontally and vertically center of this page. Then I'm going to select H two tat using its tag name H two. Then inside the Kali versus first property, I'm going to use position and I want to use position relative. After that, I'm going to use font size font size, and here I'm going to use font size three EM. Then I'm going to use Ppertico later letter spacing, and I want to use letter spacing, 0.2 5:00 A.M. And then I'm going to use text, transform property, text transform, I want to make it uppercase. After that, I want to define fontut. I want to use little bolder font type font weight. I want to define 500. Next, I'm going to define color, color to this text, color to this text, some type color. And here I want to use kind of dark gray color. So I'm going to use hass tag F if if two. I'm going to set this file. After set this file, it's barely visible because of my background color because how do not set any background color. If I use dark background color, let me show you background I'm going to set it hashtag 222, dark gray background. If I set this for, you can see the result. We done our CSS styling part. Now we need to jump into the script dot js five. Now we need to put all the text character inside this Pantag. At first, I'm going to declare a variable, who's going to select the H two element using class name, some type t, and our variable name is text. Late text equal to document, CID selector, CID selector, inside the round brasses, inside the single codes, I want to select the H two tag using its class name dot TXT, text and sinag in this line. Next, I'm going to select the inner text of this variable. Here, I'm going to type another variable. I'm going to declare LET late and our variable is HTML HTML, span spans, TML spans equal to text, dot, inner ML inner DML, and semi going to this line. Now, if I set this file and print in my console, some type console, dot log inside the round process, if I print this TML span variable HTML span and then set this file and if I show you my Console, inspect, Console, here you can see it print colorful text. Now we have the inert text of this T eliminate. And now I want to select all the letters. So here I'm going to use dot speak method. Spit. And inside the round roses here, I'm going to use empty string. I want to spit it using empty string and Semgrodon to end this line. After set this file, here you can see in my console, now we have to tell 13 character, including a space. Now it's create an array, and these are all array elements. And then I want to create a new array, which can wrap each letter inside a span tag. And to create it, we are going to use method. So to type dot map. Then inside this map method, we need to pass to parameter. The first parameter I want to pass later. The second parameter, I want to pass index and I stands for index. After that, here, I'm going to use arrow function equal to arrow. Then I'm going to use Ciss. Then inside the Cali verses, I want to return, return. Then I'm going to use that tick is a template string method. Then inside the backticks here, I'm going to use span tag, span, then closing span tag. And here, I'm going to use dollar sign. Then inside the aliases, I'm going to pass the letter variable. I'm going to call this letter variable letter. So I'm going to put all the letter one by one inside this pen tag with the help of this function, and map method. Now, I'm close this line, if I set this file, you can see in my Console, Harry, create a new area. But you can notice now we put all the character inside a span tag. Next, we need to convert this array into regular string because we need to insert it in our Eval page, and we will do that using join method. So here t dot join. Then inside the roundresses, you need to pass empty string as separator. Now after set this file, as you can see, now it converts to a string. And it is ready to insert to our estimate page. Now I want to put these estimL spans inside this text. For that, here I'm going to type text, and I want to set the inner estimL some type dot inner DML equal to here I'm going to pass the variable name HTML span and subcon to this line. Now if I save this file and back to elements section and if I open this two tag, now you can see we have span tags and I put all the characters inside the span tags. He will basically insect this span tag using JavaScript. We do not use any estiML work. Now let's go to the CSS to work on the animation. To set this file, I'm going to jump into this tile or CSS file. At first, here, I'm going to create the keyframe. I'm going to type at the rate keyframe. This is animation keyframe and our animation name is animate text. Then at the Class at 0% duration, 0%. And comma 20% duration of animation. I want to say color, color, I want to say colored. I want to say the same colored, this one, this dark grey color. After that, I'm going to duplicate this section, then at 21% duration and and 79% duration. I want to use green color. I'm going to use has tag zero F zero. And then I do get this section and at 80% duration, 80%, and 100% duration of animation, again, I want to use this dark background color. This one, and I'm going to sub this file. Next, I got to slate this span tag, which is inside the two tag of type two span. Then inside the caribrass first, I'm going to define position and I want to make it position relative. After that, after that, I want to define animation, animation and animation name is animation text, this one. I copy the animation name and put it here. After that, we need to define the duration and I'm going to set it 1 second, and then we need to define the animation direction linear and Animation count inflight. Now to set this file, you can see the green color animation. And now I want to add different animation duration for each of the letters, and I want random values. So if I reload my page each time you going to return different result. For that, we need to go jump into the script dot Jas pile, and here inside this Pantag I'm going to apply style property. Style. Style equal to and here inside the double course, I want to set animation duration property. Animation, duration. Animation duration. Here, I'm going to use inside the calibrases. I'm going to use random values, so I'm going to use math function. Math math, math dot random. This one. After that, after I use math dot random, I want to multiply with. I'm going to use multiplication sign with five do. Every time it's going to return a different result, different different duration value. After that, we need to use for second because we need to provide duration value in seconds. After set this file, now after set this file, you can see randomly growing the characters one by one. We don't know which one going to do. Now let's change the color of the text. For that, I'm going to use filter property. After llicolin I'm going to use filter property feeder, colon, and here I want to use Hu value, HUE, Hu, cache, rotate. Hotate inside the round bruss here, I'm going to use dollar sign and inside the curses, I want to multiply index means I multiply with 50. I'm going to subi file 50 and also to pass and also in the pass unit BEG degree, 50 degree. I'm going to set this file. After I set this file, you can see the result. After chase the U lod value, this is how our colors look like. Now the text are blinking with random different colors. I hope now it's le for you how blinking text animation works. So thanks for watching this video, stay tuned for our next JavaScript animation project. 52. Clip Path animation using JavaScript Part 1: Hello, guys. Good to see you back. Once again, I'm back with a new project related JavaScript animation. And today in this project, we are going to create this beautiful scroll text animation. So as you can see, when I scrolled down my page, otherwise, scroll up this page, you can see it increased the circle radius. We had to roll two circle at two corner at top left corner and bottom right corner. It is a key path animation effect with JavaScript. At first, we have the big heading center of this page, and when you scroll down this page, those two circle get bigger and overlap with the text. Now you can see in overlapping area, we have the text stroke. It covered the test with stroke and create this beautiful effect. This is what we are going to build today in this project. Let's jump into the result studio code io. So finally, I am in my sul studio code editor. And as you can see in my current working directory, I already create scrip dot js file and style CSS file. And now I'm going to link this to file with this document. At first, I'm going to link stylet CSS file type Link. Inside this link tag, I'm going to pass style dot css. Then inside the body tag here, I'm going to use Scripg script. And as a source here, I'm going to pass script dot js, this one, and I'm going to sub this file. Then inside the body tag here, I'm going to take a section tag. Section, this one. Inside this section tag, first, I'm going to take a H two tag, H two and herald type scroll. Then after that, I'm going to use deep tag for two circ some type D, and in this deep tag, I'm going to assign a class class circle. Then I duplicate this dip tag. Now we have total two deep tag for two circle. Basically, I'm going to name it circle one and this one is circle two. Then I'm going to set this pile. Now, let's jump into this tile or CSS pile. At first, I'm going to select universal selector start then inside the arises. First, I'm going to assign margin. I'm going to say margin zero from all of the direction. Then I'm going to say padding. Padding, all of the direction, I'm going to assign zero. Next, I'm going to assign box sizing. Box sizing, here I'm going to use Border Box probity, bottle box value. After that, I'm going to assign font valle and I'm going to use Aerial font area. After that, I'm going to select the body tag. Body. I'm going to style this one. Then inside this body tag, I'm going to assign height. I'm going to assign minimum height, minimum height, here, I'm going to assign it up to 200 VHt height. After that, here, I'm going to select section tag. Now inside the section tag, first, I'm going to define top position from the top, I'm going to assign zero from the left. As I'm would assign zero. We are going to start our section tag from this corner at the laptop corner. Then I'm going to define height and here I'm going to define height 100 V viewport height. Then I'm going to define dground color background, and I want to use dark dark gray background. So I'm going to type has tag 333. I'm going to set this file. After set this file, if I back to my browser, if I open my browser, this is how it look like. Here you can notice this scroll bar because here we assign 200 VH viewport height to our body tag. That's why we have this scroll bar. This is our section tag, which height is 100 VH. Now you can notice when I scroll my page, our section tag go upward, but I don't want it. I want to fix this section element at that place, for that, I'm going to use position, position, and I want to use fixed position. Now to define the position, also, I'm going to define wet. I'm going to type we and here I'm going to use 100% wet hundred percent. I'm going to set this file. Now I set this file if I back to my browser and if I try to scroll down this page, yes, we can scroll, but our section tag fixed to this position. And this is what we want. Now, let's get to the the studio code inter again. Next, I'm going to cargt the H two tag, the H two tag, which is inside this section tag. After that, I'm going to type space, I'm going to type H two, then inside the car vis, first, I'm going to define position. Position, I'm going to make it absolute. Then after that, I'm going to define to, to, and here I'm going to assign to value 50%. Then I'm going to define transform property, transform and here, I'm going to use transform translate translate Y, translate Y -50 perse. After that, I'm going to define W W 100 pers. Next, I'm going to align the text, Sletypetext, align, and her type center. After that, I'm going to define font size. Font size, and I want to make it. I want to make it 18:00 A.M. And at last, I'm going to define color, color of this font, color, and I want white color. For that, I'm going to type has tag if if if. I'm going to set this file. I'm set this file if I back to my browser, This is how it looked like. Let's reduce the size little bit. It's look too big. So I'm going to make it 17 Em. I'm going to set this file again. Next, I'm going to work on this circle one. I'm going to select circle one, inside the car Libs, first, I'm going to define position, position, and I want to make it absolute. After that, I'm going to define width Width, here I'm going to use 100% width, 100%. Then I'm going to define height, height also 100%. And next, I'm going to define the background color, background. And for background color, I'm going to use kind of green variant color some type 22e, 760. This green color variant. But before I satisfy, we need to make it correct. It's a class, so you want to use dot, and I'm going to satisfle After satisfied, if I back to my browser, here you can see the green element. You can see the green element above the section tag. I covering the whole section tag. And now I want to clip this green background. I want to show only the circle at the top lip corner. For that, let's back to the Visal studio code, and this time, I'm going to use the property call clip path clip path. Then here I want to create a circle, some type circle. First, I'm going to define the radius, which is 150 pixel ph at, and I want to place it zero from the top and from the left, also zero. Now after set this file, if I back to my browser, this is how our circle look like. Lip this diagram with circle. Now I'm going to do the same thing for the bottom right circle. For that, I'm going to duplicate this section and this time I'm going to select circle two. Also, I'm going to change the position of this circle. First, I'm going to change the position. I'm going to make it 100% by 100%. After that, I'm going to change the background color. I'm going to make it a B six, two E. I'm going to set this file. After set this file, if I back to my browser, this is where we place the second circle. Basically, here we clip the second circle deep background and create this theta circle at that pace. Now we have the orange circle at bottom right corner. Basically, here we clip the second circle background and test it at that position. Now I want to increase the size of this circle when I scrolling to this page. For that, we need to jump into the JavaScript. Let's back to the studio code again and jump into the scrip dot js file. 53. Clip Path animation using JavaScript Part 2: And here we are going to start with targeting this circle. First, I'm going to declare a variable late and our variable is circle one. Circle one equal to, I'm going to pass document dot ir selector. Coy selector inside the round bases inside the single course, I want to select this circle, circle one, circle one. Then semicon in this line then I duplicate this section and this time I want to select circle two. This is circle two and also I'm going to change the class name circle two. Next, I'm going to listen scroll event. I'm going to tie Window, dot even listener. Inside the rounds, inside the single course, I want to activate scroll event SCR OL L, scroll, and then I want to use a callback function for that, I'm going to use arrow function. Inside the Carlss then here, I'm going to declare a new variable late and I want to extract the scroll value. Sometime name scroll, scroll value equal to Window scrollY. So basically, we are going to extract the value from the top of the window and scroll bar. And as we scroll down, this value increases. And if I scroll up, it decreases. So it's changeable value. And we are going to use this value to change this circle radius. So next, I'm going to type circle one dot style, style, dot, clip path, clip path, equal to, and to use tramped literals method. I use backticks. Inside the back ticks, I'm going to type circle, then inside the round brass, here, I'm going to use taller sine. Then inside the clivss here, I'm going to do a calculation. We're going to add 150. It is the default radius of circle. With that, I want to add scroll value. This one. With that, I want to multiply this scroll value with zero point with 0.75. After that, we define the pixel. It's a pixel. It's a pixel value at then we need to define the position position of the circle centered. And as you know, we place our first circle at zero and zero, and semi going to end this line. Here we extend the radius. First we define, first we pass the initial radius value, which is 150 pixel, then we add the scroll value, which you get after scroll the scroll bar. And then we multiply this scroll value 0.75. And as you know, when you scroll down my page, otherwise scroll the page, it increases. So let's try that. Set this file, if I dug to my browser and try to scroll this page, as you can see, after scrolling, it increases the circle size and copied the text. Until you completely scroll down the page. And if I scroll up this page, as you can see, it reduce the circle radius. So when we scroll down, it increase the radius of the circle and when we scroll up, it decrease the radius of the circle. Now, let's do the same thing for the next second circle. So for that, we need to jump into the studio cod eater again and I'm going to duplicate this line. After that, I'm going to select the second circle and apply this style, and this time, I want to just going to change the position. Here, we need to make it 100% percent from the left and 100% from the top. That's it. And I'm going to set this file. After I set this file, lets that to the browser. Now you can see when I scroll down my page, it increase both of the circle radius, and when I scroll up this page, it decrease both of the circle. Next, we need to make this H two element colored transparent. For that, let's go to the strat code here I'm going to jump into the index table file and I'm going to copy this code and I'm going to place it inside this circulative element. Also in the circle to elemate circle one and circle two, both the elemate. Then set this file and back to style or CSS five. Next, I'm going to target the H two element, which is inside the second circle and for circle deep some type dot, circle one, space H two, coma. Next, I'm going to target dot circle two, space, H two. Then inside the carlrassF I'm going to change the color. Color, I want to change this circle color, transparent. Transparent, and then I want to add stoke on this text. For that, I'm going to type webt take stroke, dash, stroke, this one, and here I want five pixel take stroke. Five pixel takes stroke and also, I'm going to define color. I want to use the gray colors of the type Haztag 333, and I'm going to set this file. Now, after set this file, I back to my if I back to my browser and scroll down this page, here you can see we achieve the desired result. Once this circle interst with the H two element, then H two element has this effect. That is happening because we add a stroke around the H two tag, which is inside the circles, and we make the color transparent. And the white H two element inside here, it is outside the circle element. So I hope now it's clear for you how we can build this beautiful Javascript animation. So thanks for watching this video Stune for our next project. 54. Scroll Trigger animation part 1: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related JavaScript animation. Today in this tutorial, we are going to create Scroll Tigger animation. Yes, we are going to create ScruL tigger animation without using any library. We are not going to use fair. We are going to use PO JavaScript code. As you can see, whenever I scroll down my page at the second section reach certain distance, now you can see the animation. It is transform animation. If I scroll down my page a little bit more, now you can see it's scaling animation. And if I scroll down it a little more, now you can see it's rotating animation. So in every section, we use different animation style. If I scroll up this page, also you can see it vanish the animations. It vanish our contents. It is pretty similar with schooltia animation. If you are familiar with that, then you know how we can execute scroll tiger animation. But in this tutorial, we are going to create it by ourselves. We are not going to use any library for that. It is very effective animation for single page website. Let's see how we can create this animation using JavaScript, CSS, and DML. So finally, I am in my studio code editor, and as you can see in my current working directory, I already create script Dogs file and style dot CSS file. And in my current working directory, there is a folder called images. And inside this folder, we have some images such as cats, horse, and lion, we are going to use these images. So at first, inside this estimate page, I'm going to create some section. So I'm going to use section tag, section. Then I'm going to assign a class to this tag, class, and here I'm going to assign this is section Section one. With that, I want to assign another class to this section, which is show Animate. Then inside this section tag, then inside this section tag here, I'm going to take a H one tag, heading one. And also, I'm going to define a class to this heading tag class, and I'm going to make it animate. Then inside the tag, I'm going to type first section. Then I'm going to take a paragraph inside this section using T tag, P, and also I'm going to assign a class and our class name is animate, this one. Here I'm going to type some dammitextOwise, you can type animation on scroll. HTML, coma, CSS, and JavaScript. I'm going to set this five. After that, at the same way, I'm going to duplicate this section. Basically here we need to create total five different sections. I duplicate this section, and this is section number two, and I'm going to use the same content here. I'm not going to use this class to animate. I don't need this for now. After that, again, I'm going to duplicate this section, and this is section number three. Again, I'm going to duplicate this section, and this one is section number four. Also, you to make some changes in heading one tag, it is fourth section. Fourth section. This is third section. Third section, and this one is second section, and I'm going to sub this file. After that, I'm going to duplicate this section aight. But this time, I'm going to name it Section five. Inside this section five, I want to put some images, not the text. Here I'm going to take another Delement DV and our class name is class. Here I'm going to assign a class images. Then inside this deep tag, I'm going to use some image tag. Here I'm going to assign to three image. So type image IMG image as a source, and as a source, here, I'm going to use the first image, cats dot JPG. Which is inside my images folder, images slash cat dot JPG. With that, also, I'm going to assign a class and our plus name is animate. I want to sub this file. Oops, here I did a silastic. We need to provide the path in source, not in old. I'm going to review this file path from this place and I'm going to put it inside this source attribute. Then I'm going to set this file. It's cats dot JBG I'm going to sub this file. After I set this file, I'm going to duplicate this section. Next, I'm going to assign the next image, which is hors dot GPG. Instead of using cat type hors dot GPG. Then I duplicate this line and this time I'm going to use the third image lions lion dot JPG. I'm going to set this file. After set this file, if I back to my browser, if I show you my browser, this is our browser, this is how our page look like. Next, we need to style this page. Let's jump into this style dot CSS file. Basically, we done our CSS part and we need to jump into the style dot CSS file. As you can see, here I openstyle CSS file. At first, I'm going to use, I'm going to import a font, which is pop ins from Google. After that, I'm going to select Universal selector. I'm going to type star inside the levoss. The first property I'm going to use margin, margin, and I'm going to say it margin zero. Then I'm going to define padding, padding also from all of the direction zero. It's a universal selector. That's why it's going to apply all the margin and padding all the elements. Next, I'm going to define box sizing, box, sizing, border box. After that, I'm going to style the section tag. Section. Then the Cali says, first, I'm going to at first, I'm going to use display property, display, and I'm going to make it flex. Then justify content, Justify content center. Also, I'm going to type align I tabs center because I want to horizontally and vertically center the elements. Then I'm going to define flex direction, flex direction, flex direction, I'm going to use column value. After that, I'm going to define minimum height to this container. Minimum height mean height, and here I'm going to use 100 V H viewport height. Next, I'm going to define the background color. Background background and head, I'm going to use hashtag one, A, two, four, two D, this color code, this dark gray color code. It's not gray, it's a dark blue color code. Then after that, I'm going to hidden the overflow. Sometime overflow hidden and I'm going to set this file. After I set this file, if I back to my browser, this is our section tag looking like. We have PtolFive section and for all this section, it apply this CS scope. That's why all the section look like same. Now, let's style the other section, we need to change their background color. For that, let's back to the visual studio code, and this time, I'm going to target section two dot ACC, Section two. Then inside the Carlras I want to change the background color background color, and I want to use GBlorGBF red, I'm going to use 96 for green, here, I'm going to use 30, and for blue, I'm going to use 158. It's a kind of purple color, and I'm going to save it. At the same way, we need to change the other section background color. So I duplicate this code, and it's for Section three. And for Section three, I want to use background color, this color code, Haz dag zero, five, six, nine, six, four. Then I'm going to duplicate this line, and this time I'm going to select Section four. And here I'm going to say background color. Has tag, F if a six double zero, this orange color. Next, I'm going to style section number five. I duplicate this section and I'm going to change the background color of Section number five and I want to make it here I'm going to apply RGB color, RGB for red, I'm going to use 255 high value for the green, here, I'm going to type zero and for the blue, I'm going to pass 85. Then I'm going to set this file this file if I back to my browser, here you can see all the different color for all the sections. Now, we need to work on the H two tag, and now we need to work on H one element, heading one element. Let's jump into the result studio code, and this time, I'm going to target H one. Inside the colssF I'm going to define font size, font, size, I want to use font size 90 pixel and then I'm going to define color font color, color and I want to use white color sometimes hastagFFF I'm going to set this file. Now, let's apply the font style. To apply the fonts style inside this universal selectd, I'm going to use font family property font family font family have to use font family pop ins. Pop ins, and it's come from SanseriFont family. Senseri. And I'm going to satisfy to satisfy feed back to my brother. This is how our font look like now. Next, I'm going to style these paragraphs. Let's jump into the code editor again, and after that, I'm going to select the paragraph tag, P. Then inside the color recess, the first property I'm going to use font size, and here, I'm going to type font size 35 pixel. After that, I'm going to define color, color and for color, I'm going to use this color code, zero, zero E F, this light blue color. After that, I'm going to define font to eight. Font to eight, font eight, I want a little bolder, I'm to use 600. Then I'm going to change the color of paragraph from Section two, Sum type dot EC two space paragraph. Then inside the color re says, here, I'm going to use color, and I want the same color code, so multi hastag zero, zero, a zero here I'm going to use green color variants somtHtg 00, this green light green color. Then I duplicate this section and this is for section number three and here I want to change the color FF zero, this light yellow color, then I'm going to change color for section number four, Section four, and I'm going to use and at the section, I'm going to use a different color 05, 69, 64, this color code, this dark green color code. After that, we need to work on images. So at that section, first, I'm going to select SEC, Section five, then I want to select the images which is inside the Section five. I want to target the class dot Images. IGES. That inside the clires Basically here I target physically here from Section five, I want to target this Dip element images inside the colses I'm going to use display propriety, display. This play, I want display flex. With that, I want to provide a little gap between these items, some type gap, and I want 40 pixel gap, 40 pixel. And I want to satisfy. After satisfied back to my browser, this is how our paragraphs text look like, and this is how our images look like. Now, let's come next to each other. Next, we need to work on these images. We need to provide maximum width, we need to set maximum weight to these images. For that, let's back to the users to your code. And here, I'm going to select Section five, dot SEC section five, Section five, and from Section five, I want to target the images. Images Div and from Images De, I want to target image IMG in each tag. Then in the Cariss here, I'm going to use property call max wed, maximum width, and I'm going to set it 350 pixel. I'm going to set this file. After I set this file, if I back to my browser, now you can see the result. This is the first part of this tutorial. At that section, we work on the layout design. At the next part of this tutorial, we are going to start JavaScript. Thanks for watching this video, stay tuned for our next part. 55. Start working with JavaScript and add class in a section: Hello, guys. Good to see you back. This is the second part of this tutorial and at that section, we are going to working on JavaScript. We're going to starting working on scrolling effect. Let's jump into the studio code and jump into the script dot js file. At first, inside the screen dot js file, I'm going to target all these sections. I'm going to declare a variable AET late and our variable name is section. Section equal to here, I'm going to type document, quirselector Quielector inside the roundresss inside the single course, I want to target all the section tags using its class name section, section, and Semgon in this line. After that, I'm going to type window dot on scroll method, on scroll, equal to here, I'm going to use arrow function. Then inside the Clss, basically, this function is executed whenever we scroll through the page. Inside this function, we need to look through all of the section one by one. Hemotp sections, I'm going to use, I'm going to use for each loop, for each. Then inside the round resses here, I'm going to pass section AEC and arrow function. Then inside the Cal resis, here we look through this section and each section named sec. Then I use a arrow function for callback and inside it, I'm going to declare a new variable T late and our variable name is late. Here I'm going to declare a variable name scroll distance. Scroll distance equal to window dot, scrollY, scroll Y. Basically this variable going to store the distance value of the scrolling from the top of the screen to how much we scroll, it's going to store the value at that variable. Next, we need to retrieve section distance. I will declare another variable late and our variable name is six section distance. Section distance equal to sec dot, offsite, talk. And so we're going to this line. This offset property is the distance from the section outer border to the top edge of its parent. Let me explain this with example, what is Oset top value? Here you can notice the distance. This is our first section and this is our second section and the distance between the browser top position to second section top position is called offset top distance. We need to extract this scroll distance is equal to the distance from the to the top of the page. I want to apply some sty on this second second section element. The same thing, we need to apply for third section and fourth section and fifth section. So whenever we achieve certain distance from the section from the top of the browser, then I want to trigger a animation. Otherwise, I want to trigger a style. Basically, it's pretty familiar with scrotal animation in Giza. But here we are not going to use any library for that. We are going to use Raw JavaScript. Let's back to the studio code. And here I'm going to use condition. If inside the roundresses scroll distance, scroll distance greater than equal to sec distance. Then inside the Carl says, here, if this condition is true, then here, I'm going to type sec dot class list. I want to add a class. Class list dot add. Inside the round ss, here, I'm going to define a class and our class name is show animate. Show animate. And semi go on to s line. As you can see, I distance squals equals to the section distance, otherwise, greater than section distance, then the IP statement will be execute. Now let's go to the browser and see when this condition is happening. So here int top page. Sorry, top section. The section distance is the fixed value. The distance between top and the second section is the height of the first section. It never change unless we change the height. Meanwhile, the scroll distance is changing value. When we scroll down the page, otherwise, scroll up the page, it's changed the value. In some point, those two value are exactly equal. This is where the IP condition becomes true, and that will happen until we scroll down it up to top edge of the second section. So whenever it touches the top edge of the browser, it triggered the animation. To clear this concept more, let's inspect the page. Here I'm going to inspect the page. Now here you need to close look on the second section. Here I scroll down my page and the sections touch the top. As you can see, it's not working because I did some syllamistic later jump into the code editor. Yes. This is the syllabistic. It's not a class. It's tag. We need to select it using tag name because if I show you my index still page, it is a tag Name. We do not use any class name to select this element. First, we need to use tag name and also we need to make some correction, the spelling of distance. DI, not E, distance, DI, this one, and we need to set this file again. I'm going to set this file and back to the browser. This time, if I scroll down my page and hit the second section, top position, touch the top of the browser, then you can see it added class to our section in our second section. At the same way, if I scroll down it more a third section, top position, touch this section, touch the top. Now you can see this time, again, it add a new class. In our section three. Also, if I scroll down it a little bit and again if the fourth section top position touch the top of browser, you can see it add in class. This is how it's work. After that, now we need to target this show animate class and style this section and implement the animation. We are going to do it later before, but before I want to set some condition in my Javascript, let me show you what. Let's jump into the studio code and and here we need to handle the s part. So to type s inside the calices. This time, I want to remove this show animate class. If the condition is not match, so her type SEC section dot class list, dot, this time I'm going to use remove method, remove. Then inside the rounds, inside the single course, I'm going to pass this class name, show animate. So whenever condition is not true, then it's going to remove the class from this section and semicon to end this line. Let's set the file and back to the browser. Now, you can notice if I scroll down my page and the condition is true, as you can see, it at the class through animate in our section two. But if I school up this page and this condition become fails, again, it removed the class from this section. At the same way, if I scrolled on the page and Section three touch the top position, now you can see it at the class, show animate. If I fail the condition, you can see it remove the class from here. Using it, we can trigger the animation. Also we can remove the animation from our sections. Now before I work on this class, I want to set another condition. Now I want to add the class before this third section, otherwise, second section reach the top. I want to add this class, show animate in our second section when it reached this distance before we touch the URL bar of the browser. For that, just need to minus. From the distance here, I'm going to minus 150 pixel, 150 point. If I set this file and back to the browser, now you can notice Weboy scrolled down my page and this section reach that position, now you can see it at the class show animate. At the same way, if I scroll down the page and this section, the third section top reach that position, so as you can see it at the class in this section, show animate. We do that because when I scroll down my page and the content of this section become visible, I want to run this animation. That's why I do that. This is it for the second part of this tutorial. At the third part of this tutorial, we are going to style the class. We're going to style Show Animate class in our style section. So thanks for watching this video, stay tuned for our next tutorial. 56. Start working on animation: Hello, guys. Good to see you back. This is the third part of this tutorial. In our second part, we learn how to add a class in our section. If I inspect this section and scroll down this page at certain point, if our second section reach a certain distance, then it add a class in our second section. Show animate. At the same way, our third section reach certain distance, it add the class, show animate. And if I scroll up this page and condition becomes false, then it removes the class from these sections. Now now in the studio, we are going to style this class, show animate. Let's back to the isal studio code, and I'm going to jump into the style CSS file. After that, now at that section, I want to target the class of animate which is inside the section tag. Here I'm going to type here I'm going to select the animate class, which is inside the section, section past animate Animate. Then inside the Cariss the first property, I'm going to use opacity. Opacity, I'm going to make it zero. If we apply opacity zero, then it become hidden. Then I'm going to apply filter property. Filter, and here I want to apply blur and I want five pixel blur. After that, I'm going to apply transition. Transition and for transition I want, transition duration is 0.5 second. If I set this file and back to my browser, now you can see all the elements are hidden. You cannot see any element which is linked with animate class. Let's back to the code again. Now, whenever we scroll this page, I want to make this section visible again. I want for the HH two tag and the paragraph tag. For that, we need to target show animate class. So time section, show animate. Show animate space, dot, I want to target animate class. I want to style it. Then inside the liver says, first, I'm going to make opacity, opacity, I'm going to make it one. Because I want to make it fully opic. Basically, I want to say I want to make it visible again. After that, I'm going to apply filter Filter, Blur, blur. And here I'm going to pass zero pixel. I'm going to set this file. After I set this file, if I back to my browser, now you can see whenever I scrolled on my page and this section is active, now you can see it appear the text. So when the show animate class added to this section, then it's going to show the text. So as you can see, whenever I scrolled on my page and the third section is active, it shows the content. At the semis work for fourth section. And if I scroll up this page, as you can see it hide the text, it become invisible again now you might have why the first section is already visible? Because if I show you my index dot estimate file, as you can see, her use show animate class. We manually pass this class at that section. That's why our first section contain all become always visible and now we can add different effects in different sections. Let's work to the CSS file, and now I want to target the animate class which is inside the second section. So type dot SEC section two, and from here, I want to target the animate class, animate. Then inside the Carras I want to use transform property, transform, and I want to move this element at 100% in excess at excess direction. I'm going to use translate X, translate X, 100%. Then I must this file. I set this file, if I back to my browser, now you can notice let's move this element 100% at XX direction. Now, whenever I scroll this page, I want to move this element from this position to zero position. For that, I'm going to duplicate this section and whenever the show animate class is active inside this section, some type, show animate, show animate. Then I want to make it 0%, otherwise, zero, simple zero. And I'm going to set this file. After I set this file, if back to my browser, now you can notice whenever I scroll down my page, in our second section, it's come from this direction. At the same way, we can add different effects for our different elements, such as third section. So let's do that. Then I'm going to duplicate this section, and for the section three, then I'm going to target the section three, and here I'm going to use scale property. Scale. At first, I want to scale down the heading tag and the element. I'm going to make it 0.70 0.7 time whenever we act show animate class, in that case, I want to scale up this element, scale. Here I'm going to use one Val. And I'm going to set this file. Let's get to the browser. As you can see, when we're going jump into the third section, it scale up the alienates when condition become false, again, it disappear. Now, let's work on the fourth section. Again, I'm going to duplicate this section. And this time, I want to target fourth section here I want to apply rotate property, Transform, transform, rotate and by default, I want to rotate it 30 degree and whenever the show animate class is active, I want to rotate to the zero degree. I'm going to set this file. After set this file, if I back to my browser, and reach the fourth section. Now you can notice this element is rotating. Again, you can see this is how it's rotate the content. Now, let's work on last section, fifth section. In our fifth section, we have three images. For that, let's jump into the visual studio code, and first, I'm going to duplicate this section. And here, I'm going to target Section five, and at that section, I want to apply translate X with rotate value. Translate X 100%, 100%. With that, I want to apply rotate value, rotate, and I want to rotate it up to -90 degree. Then here, I'm going to apply translate g translate g, I'm going to make it zero. If I set this file and back to my browser and scroll down to the images section, you can see the result. Now I want to add little delay between these images. Also in the paragraph. I want to say this paragraph. For that, here, I'm going to use the animate class, which is inside the paragraph tag, some type P dot animate. Inside the carvers, the property I'm going to use transition. Transition the and I want to add 0.2 second transition delay. After set this file, whenever I back to my browser and scroll down this page, now you can notice after H one tag, it's appear the paragraph tag because here we add detail transition delay in this paragraph. At the same way, if I'm going jump into the Fourth section, after I rotate the H one tag, it rotate the paragraph because of this 0.2 second transition delay. Next, I want to add little delay on image number two and image number three. Let's back to the user's studio code. If I show you my index estimate page, as you can see here inside this image class, inside this deep element, we have total three image. We need to target image nth child two and three. For that, let's get to the style SASS file and here. We are going to use child selector, some type dot, which is from Section five, some type section five, space, I'm going to target the image, ING, image tag. Then inside the colon, I want to sag second child some type N TH, nth child, Nth child, I want to target the second one, I'm going to pass to here. Then inside the carnivorous, I'm going to use property called transition delay. Transition transition delay and I'm going to pass 0.2 second transition delay. Next, I want to select the third child, three, the third image here I'm going to add transition delay, 0.4 second. I'm going to set this file. After set this file, if I act to my browser and going jump into the fifth section, now you can see here you can notice we add detail delay on second image and the third image. This is how we create this scroll trigger animation without any library. We can easily do that using GSAP animation, but here we do not use any library. Here we use basic pure JavaScript to do that and CSS. Thanks for watching this video stay tuned for our next JavaScript animation project. 57. Blinking star animation using JavaScript part 1: Hello, guys. Good to see you back. Once again, I'm back with a new project related JavaScript animation. And today, we are going to build this beautiful animated star background using JavaScript. As you can see, there are a lot of star in this background, and all the star blinking differently. And then we have this circle. And inside this circle, we have a text. Welcome to our page. And this text is floating above this circle. And all the star drinking randomly. If I reload this page and a relate this page, as you can see, randomly, it changed the position of the star. If I reload it again, as you can see, again, it changes the position of this star randomly, and all the stars are drinking randomly. This is what we are going to build in this project. Let's jump into the visual studio code editor. So finally, we are in my vis a studio code editor, and as you can see in my current working directory, I already create index dot EstimLFle styled CSS file and script doot JS file, and now I'm going to link style dot CSS file with this estimL document. I'm going to type ink and here I'm going to pass style dot css. Then inside the body tag, I'm going to insert the script dot Gs file. I'm going to type Script tag, script. Then as a source is Rc source, I'm going to pass script dot js. I'm going to set this file. After I set this file, I'm going to jump into the body section. Inside the body tag here, I'm going to take section tag. Section. Then inside this section tag, I'm going to take a H two tag, H tube here I'm going to type, welcome. Welcome to our then here I'm going to use Ba tag, BR. Here I use Bateg because I want to break the line. Then inside the T tag, I'm going to take a span tag, span. Then inside the Span tag, hemo type, welcome to our page. I'm going to set this file. After I set this file, if I show you my browser, this is how our web page look like now. Now, we need to style this section, going to style this text. So for that, we need to jump into the style or SASS file. Then at first here, I'm going to import a font, and our font name is Poppins. So I import these pop in fonts. After that, I'm going to use universal selector, song type, start, then inside the crass, first, I'm going to define margin to this page, margin from all of the direction zero, then I'm going to define padding and also the direction I want to use padding zero. Then I'm going to use box sizing, box sizing border box. After that, I'm going to define the font families, I'm going to type font family here, I'm going to use Poppins font. Inside the single course, I'm going to type P, O PINs Poppins and it's come from SansarionFamily, San Serif. Next, I'm going to select the body tag, body, and here inside the alia says, I'm going to use ppotalOflow overflow heading, and I'm going to set this file. After set this file, let's style the section tag. Now I'm going to select this section tag using its tag name. I copy the section tag and I'm going to select this section tag in my style or CSS file. Then up that inside the arises, the first property I'm going to use display. This play and I want to make it flakes. A that, justify content, justify contained center. Then I'm going to align this item align items also center. Then I'm going to define height, height, I'm going to define height, 100 viewport height. After that, I'm going to define background color, background, and for this background, I'm going to use hashtag 222, dark gray color. I'm going to set this file. After set this file, if I back to my browser, this is how our page look like now. Now to order to create this circle around the text, we will use the before pseudo element of this section tag. Here I'm going to type section colon before. Then inside the car resis, the first property I'm going to use content. I want to create a blank content. Content equal to content is a blank content. After that, I'm going to define the position. Position, I want to define position absolute. Then I'm going to defined, we. Here I'm going to define width 30 viewport width. According to viewport area, it's going to change the circle size. Then I'm going to define height. Also 30, it's Vw not H, 30, put W. Here I use similar height and to make it squared. Up a that, I'm going to define the border border, and I want five VW border and I want solid border, solid, and our border color is, I'm going to use this blue color variant for the border. After that, I'm going to define border radius, border radius. Here I'm going to pass 50%. Then I'm going to set this file, but before I set this file, I did a mistake, it's wrong spelling it before E. Then I'm going to set this file and back to my browser. If I back to my browser, this is how our border look like. After that, we need to add little box shadow. For that here, I'm going to type box shadow box. Shadow, and I'm going to use a value, this box shadow value, and I'm going to set this file. After set this file, this is how our circle look like now with this box shadow. After that, I'm going to style this text, this H to tag. For that, let's back to the studio code, and this time I'm going to target H to tag, H two. Then inside the class, the first property, I'm going to use position, and I'm going to make the position absolute. Then I'm going to define font size font size, and here I'm going to define font size V W viewport, we. Then I'm going to define color, color, and I want to make it color fully white. I use this simlor code, if if F. After that, I'm going to define font to eight, font to eight, and I want a little lighter fonts so I'm going to tie 400. Then I'm going to define text align text align center. Also, I'm going to define little line height line height. I'm going to pass line height two M Z index, and I'm going to pass five here, Z index five. Next, I'm going to transform this text. I want to skew this text a little bit, type transform property, transform, and here I'm going to type and Hembus skew value, skew skew Y, skew y minus seven degree DG. Then I'm going to sub this file and back to the browser. Now this is how our text look like. Welcome to our page. Now you can see our text is center of this circle. Also, we skew the text at minus seven degree and we need to add some text shadow. Let's work to the studio code, and here I'm going to use the property called text shadow. So type text and herm reuse this. This takes shadow value, and I'm going to set this file. After I set this file, if I back to my browser, this is how our text look like now. Basically, here I step by step, increase the take shadow value. If I show you, as you can see, first to use one pixel then two pixel then three then four then five, and here use gray color for the take shadow. Now, let's work on the San tag, which contain page. For that, I'm going to select H two, H two, inside the H two tag, I want to select the span tag. I'm going to use its tag name span. Then inside the Calibra the first property I'm going to use font weight. Here, I'm going to use little boulder fonts so I'm going to type 700. Then I'm going to define the font size font size. Here I'm going to define font size three EM little bigger than previous one. Next, I'm going to define it take shadow, text shadow, and here I'm going to pass multiple take shadow. I paste this code, and I'm going to set this file. After set this file if five back to my browser, this is how our page look like. Now, it's too big. It's look too big for this website. I think we need to reduce the size to reduce the size of this circle, also the text content. So let's experiment with that. Instead of using, let me show you first, I'm going to decrease the size of this before element. Here I'm going to make it 20 V. Then I'm going to decrease the size of this border. I'm going to make it three VW. After that, after that, I'm going to decrease the font size. Here, I'm going to make it five W. Then also, I'm going to decrease the line height and I'm going to use 1.5 Em. Next, I'm going to decrease the font size. Here I'm going to use two EM font. Satify and see how it look like. After satisfy the back to my browser, this is how it's look like. Now it's look perfect. Now I think it's look pretty cool for this example. Otherwise, in our previous video, it's look too big for this example. Now we need to work on animation. We need to work on floating animation. So we're going to create the keyframe for that. Let's jump into the video studio code. So here, at first I'm type, add the rate keyframe keyframes. Then our key frames name is floating because it's a floating animation. SmotypFLA TNG. Floating then inside the liss at 0% of duration with that at 100% of duration. I want to apply transform property, transform, transform heterotype skew. Skew Y, skew Y minus seven DEG degree. With that, I want to apply another property, translate Y. Translate Y -20 pixel, 20 pixel. Then I'm going to duplicate this section and at here, I'm going to type at 50% of duration. At first, I'm going to at 50% of duration, I want to change the transit Y value. I'm going to make it positive. Make it 20 pixel. I'm going to set this file. After I set this file, I'm going to call this animation. I copy the animation name floating and I'm going to jump into the two tag, this selector. Here I'm going to call animation property. Animation. First, we need to provide the animation name which is floating. Then we need to define the animation time. Here I'm to pass five second. Then we need to provide the animation direction, which is is in out. After that, we need to provide the iteration count, and I want to run this animation for infinite time out infinite. I want to set this file. After I set this file, if I back to my browser, this is our animation look. If you want to make this animation more faster, yes, you can just you need to reduce the animation duration time. If I make it three second and then set this file and back to the browser. Now you can see this is how we can increase the animation speed. This is the first part of this project. And the next part of this project, we are going to creating this start and also we are going to working on JavaScript. Thanks for watching this video stay tuned for the next part. 58. Blinking star animation using JavaScript part 2: So if the previous part of this tutorial we work on this floating animation, text floating animation. Now we are going to create the sir. We are going to create this stir randomly. Let's go to the JavaScript file. I'm in my result studio coditor and from here, I'm going to open script dot js file. At first, at first, we need to select this section tag. But for that, we need to declare a variable AET late and our variable is section. Late section equal to document, dot, yy selector, then inside the round brss inside the single codes, I want to target this section tag, so I'm going to pass the tag Nin section and semiconn to end this line. After that, I'm going to declare a variable, another variable, late and our variable name is J, late J equal to is assigned with zero. Next, I'm going to create a while loop and set a condition. Why J, less than 200. Y J less than 200 then inside the calibr I want to create the star. So here, I want to create stars to declare another variable late and our variable name is sir. Sir, equal to document, document here, I'm going to create element, create element, then inside the round bases inside the single code I want to create I element, I and semiconm to end this line. After that, we need to create some variables that we need later to create the stars. Here I'm going to declare another variable late, late X equal to math, math, MD dot, floor. Then inside the round dresses, here I'm going to use Matt random method. Math, math dot random. Then inside the round dresses, and I want to multiply with window, inner with inner W and semicon two in this line. I want to satisfy. Window dot inner return the width of this browser window and it's returning pixel value. Then we take the value and multiply with Md dot random value. Next, we convert this value into intser using floor method. Next, I'm going to type, start, dot, style, dot, P equal to inside the back ticks, I'm going to use dollar sign. Then inside the arises, I'm going to pass the variable called X. X pixel. And semicon to this line. Then I'm going to duplicate this section, I'm going to change the variable name X to Y and also to change Window dot inner height, inner height. I'm going to replace X with Y. Then instead of late, I'm going to use to value T. Next, we need to create the width and height of the star. For that, I'm going to define another variable late and our variable is size. Late size equal to math random function, random. I'm going to multiply with. Here I want to multiply it with four. So we're going to end this line. And then we will use the size to set the height and width. At first, I'm going to define width of the star type star dot style. Start style dot weed, equal to inside the bat ticks. Then I'm going to use Dollar sine and inside the clivus Head, I'm going to addition one with the size, and we need to pass the vary in pixel Px and semicron to this line. You can notice her addition with one because sometime math dot random returns zero, and if I multiply zero with four, also it's going to return zero. If we directly pass only the size, in some case, it can return zero. That's why he plus zero with one. So the minimum value we pass, it's one pixel. And if we pass zero, that's not good for our project. To avert this situation, we just use one value here. Then we need to do the same thing for height. I do get this line, and I'm going to replace and here I'm going to replace with height. So now we have the position of this star and dimension of this star. And now in appen the stars in our section. For that here I'm going to type section dot, apenhil method, append hide. Inside the round recess, I'm going to pass the star, star, and semicon to end this line. Also, we need to continue this loop, so I'm going to increment the J variable, J plus plus. Until J value becomes 200, it's going to run the loop. So basically, it's going to create total 200 star in our background. Now if I going jump into the browser and inspect this page, inspect, and show you this section tag, now you can see inside this section tag, we have total 200 I element. Using ITAg we create these stars. Now they are not visible because we do not style these stars. We need to style all stars. Let's look to the studio code again. Remember, all the star have randoms type. They are not same. Their size is different, their location is different, everything is different from each other. Let's display this star. I'm going to jump into this tile css file and here, I'm going to target the I tag which is inside this section. Section, then inside the car levers. Here, first, I'm going to use position. Position, I'm going to make it absolute, position absolute, and then I'm going to define background, background. And for background, I'm going to use white color, so I'm going to use this value HtgFFF. Also, I'm going to define border radius. Border radius, I'm going to make them circle, so I use 50%, and I'm going to set this file. After I set this file, if I back to my browser, you can see all the stars in different size and different locations. And now we need to glow this star. For that, we need to use box shadow. Now let's back to the strial code. And here, I'm going to use this property called box shady, this one, here and here, I'm going to pass this box shadow in. I'm going to set this file. After set this file, if back to my browser, now you can see all the stars are growing. Here you can notice the growing effect of the stars. And now we need to work on the animation effect on the stars. For that, I'm going to create a new animation. Let me show you so here I'm going to type. Here I'm to type key frames, addate key frames, Addate key frames, and our animation name is stars, stars inside the carbss at 0% duration, I'm going to he put opacity, opacity is zero. At that position, I want to set opacity zero, then I duplicate this section. Then I'm going to duplicate this section here at 10% of duration, I want to set opacity one. Then at 90% of duration, 90% of duration, I want to set opacity one EGI, at 100%, let me show you at 100% of duration, I want to set opacity zero agi. And I'm going to call this animation stars, copy the animation name, and here I'm going to call the animation. Animation. First to provide the animation name stars, then we need to provide the animation direction. I'm going to pass linear. I want to run this animation for infinite time I'm to pass infinite. I'm going to set this file. I set this file if I back to my browser. Now I set this file, as you can see, nothing is happened because we did not set animation duration. And remember, every time if we reload this page, it randomly create the star in different positions. You can see the result and we are going to provide the duration using Java State because we want to grow the star randomly. We do not want to grow all the star at once. For that, we need to jump into the JS file. Here, I'm going to create another variable, late and our variable name is duration. Late duration, equal to, I'm going to use map dot random method, Mt dot random, Random. Then I'm going to multiply with, and here I'm going to multiply with two and semicolon to this line. After that, I'm going to apply this random value to the animation duration. Sumtyp start dot style, that animation duration, animation duration equal to here we need to use backticks. Basically, it is Tabit string method then inside the dollar sign, then ult to pass dollar sign and inside the Cali ress I'm going to provide duration, duration, and here, I'm going to addition with duration one. Then I'm going to pass means seconds and semicolon two in this line. It's going to set random duration value to our stars animation. So satisfy if I back to my browser and now you can notice now stars are blinking, but it inking randomly. This is how we create this beautiful animation effect. Randomly we place the star in different position of this background. Also, it ding the start randomly. If I reload the page, now you can see now it plays all the star randomly in different positions. I hope now it's clear for you how we can create this beautiful animation project. Thanks for watching this video, stay tuned for our next project. 59. Day mode night mode Road animation part 1: Hello, everyone. Welcome to the new lesson in this course. In this project, we are going to create this interesting road animation. As you can see in this scene, we have a background of sky, sun, and a roll, and two car moving against each other. Also, background is moving. That's why it give us a realistic effect. And whenever I click on Sun, it turns into moon and the whole scene become dark. So this is basically dark mode and light mode. We are going to switching dark to light and light to dark with the help of JavaScript. And it is a good example of JavaScript toggle animation. So let's start so as you can see, we are in my studio code editor, and as you can see in my current working directory, we have index stimLFlescre dot js file, and style dot CSS file, and we have total two image, big dot PNG, this image, and also we have a car dot GIA, this image, and we are going to use both the image. Now, at first inside my index dot stimLFle inside the body tag, I'm going to take a section tag section, section, and I'm going to assign a class class, and I'm going to name it SIM then inside the section tag, I'm going to add another class. Here I'm going to add a deep element, DV, and I'm going to assign a class to this deep element class, and the class name is sun. This de element is for the sun. Then I'm going to add the background images. For that, I'm going to take another Dev element, Dv Dt, and I'm going to name it BG, BG stands for background. Then inside this DV element, here I'm going to use total two image. IMG. Basically, I'm going to use the same image two times, so I'm going to tie car, it is for carimage cart GIF. And I'm going to assign a class also class, and I'm going to name it card one. Then I'm going to duplicate this section, and this is for card two. Here I use Same card and I'm going to move the cards in opposite direction. Then I'm going to set this file and back to my browser. Now this is how it look like. Now we need to jump into the style CSS file. We need to start styling. Now, let's jump into the style CSS file. Now we are in my CSS file, and I'm going to start styling. First, I'm going to select the universal selector star and ins Cali the first property, I'm going to use margin. From all of the direction, I'm going to use margin zero to all of this element. Then I'm going to use padding, padding, I'm going to pass zero again. Then I'm going to use box sizing, box sizing border box. After that, here, I'm going to target the scene, this one, the sin section. I copy the class name sine and back to the stylo CSS file. I type dot sin then inside the Cariss the first property I'm going to use position and I want to make it relative. After that, I'm going to assign height to this area, scene area. Height, here, I'm going to use 100 viewport height. With that, I'm going to assign over property, overflow hidden. I hid in the overflow area. Then I'm going to assign around a gradient background. Background here I'm going to use a gradient Video, linear gradient, Soo typed, linear gradient, and I'm going to pass three color code. Here, I'm going to pass this three color code and I'm going to zip this file. After set this file, if I back to my browser, this is how it look like. Basically, it's going to provide me a sky view. Here we create a sky for our sin, the whole sin, and next, I'm going to work on the sun. We need to create the sun. For that, let's back to the result studio code, and this time, I'm going to target its class name. I'm going to target the D using its class name dot N Sun. And inside the carniv says, here, I'm going to use property position, and I'm going to make it absolute. After that, I'm going to use top value. Top top, from top, I want to move it 100 pixel and from the lab, from the lab, I want to move it 55%. Otherwise, 50%, you can use it on your way. Next, I'm going to assign within height to the sun with 100 pixel and also height, 100 pixel. After that, I'm going to assign a background color. Background for background, I'm going to use hashtag if if if if if this color code. After that, basically it's a white color. After that, I'm going to assign border radius. I want to make it circles type border border radius and hero pass 50% and I want to make it circle. After that, I want to transform this element. But before I transform this element, let's add little bog shadow. Next, I'm going to add bog shadow. Box shadow box shadow. Here I'm going to use box shadow, zero, zero, 50 pixel. Then I'm going to provide the color. Hashtag, has tag, and I'm going to pass if if if this color code. Next, I want to make cursor pointer when I move my cursor on the sun. So I'm going to type cursor, and I'm going to make it pointer. Now to set this file, let's back to the browser. Let's see how our sun look like. So this is our sun and this is how it look like, and as you can notice, it's glowing because of box shadow. Let's add little transition on this sun for smoothing effect when I animate it. For that, I'm going to type transition, and for transition, I'm going to use 0.2 second. This is our transition duration, and I'm going to set this file. Now let's work on the background of this scene. Let's add the background image. So I'm going to jump into the is a studio code eater and here, I'm going to target the background using its class name Tat BG. Then inside the cars, the first property, I'm going to use position and I want to make it position absolute. After that, I'm going to use another property Width, I'm going to assign Width, here to assign 100%, 100%. Then I'm going to assign height, height, herm to assign height, 280 pixel pixel. Next, I'm going to assign background, background and from background, I want to add the image URL, image URL, and here, I'm going to pass this image big dot PNG, BG dot PNG. Then I'm going to add background size, background size, and I want to make it 1,500 pixel. This much of area. Next, I want to repeat this background at XX direction to type background repeat, background repeat. Here I'm going to pass repeat X, and I'm going to set this file. Now let's back to the browser, how it's look like. This is how it's look like. Now we need to place the background at bottom. For that, let's look to the studio code again here I'm going to type bottom. You need to position it bottom, so type bottom zero. Let's certify and see how it looked like. After bottom zero, if we back to my browser, this is how it looked like. Next, we need to move this image at left side. For that, we need to use animation. We need to use keyframes. Let's do it. Here, I'm going to create a keyframe at the ate keyframe and I'm going to name the animation animate. Background BG. Then inside the carliss at 0% of duration, I want to move this background. Here, I'm going to propriety call background position X. I want to move this background at XX some type background position X, background position X, zero pixel. Then at I duplicate this line at 100% of duration, 100% of duration. I want to change the position. This time, I want to make it -1,500 pixel, and I'm going to set this file. After I set this file, I'm going to call this animation. Here I'm going to type animation. Our animation name is animate BG Animate background. Then you need to provide animation duration and I want to run it for very long time, so I'm going to make it 25 second. After that, I want to make the animation direction linear, and I want to run this animation for animation infinite time, so I'm going to make it infinite. I'm going to set this file. After set this file, if I back to my browser, now you can notice this is how our background move right to let side. It's going to give us car running effect. Now let's look to the user studio code again. Now, let's tile the cars. First, I'm going to target the first card using its class name dot car one. As you can see here I use tal two card and for the two car, we use the same image, card dot GIA. Inside the Cress, first, I'm going to define the position of the car position and I want to make it absolute. Next, I'm going to type bottom value, bottom and from the bottom here, I'm going to place it 20 pixel. After that, I'm going to assign maximum width. Max with maximum width, I'm going to make it 200 pixel. Next, I'm going to provide Z index, Z index, and Helm to pass one, and I'm going to set this file. After I set this file, let's back to the browser and see how it looked like. So this is where we place our car. Now, we need to do the same thing for this car, the second card, but we need to move this car at opposite direction. Now, let's place the second car. So here, I'm going to dug this section. And instead of using class car one, I'm going to type card two, position absolute, and bottom, here, I'm going to pass 50 and maximum is same, and z index value, I don't want z index, so I'm going to make it and commend this line. And I'm going to sub this file. After sub this file, if I back to my browser, this is where we place the card. Next, I want to move both the card from the opposite direction. For that, here, I'm going to use a value from late. I want to move our first card from the left side tie from the late. I want to move it -200 200 pixel. And our second car from the opposite direction. So Hemoty from the right from the right, I want to move it -200 pixel. If I set this file and back to my browser, now you cannot see the cars because this time these cars are out of frame. We move both the car out of frame. We move our first car -200 pixel and we move our second card -200 pixel at right side. Now, this is the first part. At the next part of this tutorial, we are going to work on animation of this car. Thanks for watching this video stay tune for our next part. 60. Day mode night mode Road animation part 2: Hello, guys. Nice to see you back. This is the second part of this tutorial, and at that section, we are going to start with card animation. So let's jump into the W a studio code. Here we place our first card p -200 pixel and our second card right, -200 pixel. Now, both the cars are outside of the road. Now we need to create an animation that can move the car inside this road. Now let's create the animation for our first car, Hebotype at the rate keyframes and our animation name is car plan. Then inside the calibras at 0% of duration here inside the calibrs I want to use transform property, transform, transform, and I'm going to use translate X because we need to move this car at x direction. At 0%, I want to make it zero pixel. Then at 90% and 100% of duration, 90% and 100% of duration, I want to transform this element, the car element, somebody use transform probability, transform, translate X. Then inside the roundss I'm going to use lfunction CALC. Then inside the round grasses, here, I'm going to pass 100 view port weed. H plus concatenate with 200 pixel and I'm going to satisfy. At the same way, I'm going to create the second animation for the second car, so I duplicate this section and I'm going to replace the animation name Keyframe name car two here with the translate X value, I want to rotate the car in opposite direction. We need to use another property called rotate Y, rotate Y here I want to rotate, the car element 180 degree DG degree. Also, in our elf function, we need to change the direction. We need to pass negative Vu -100 vs and here, I'm going to concatenate with -200 pixel. Physically, rooted y feed the car vertically, here and here, I use the negative V 100 vw, not H. To replace HV W. Also in our first animation. And from this -100 VW value, we -200 pixel. Also inoted this element, so I'm going to copy this value, and I'm going to paste it here. Now, this car, the second card, move right to the left side. Now let's call the first animation. In our first car section here, I'm going to type animation. Our animation name is car one and our animation car one, and our animation duration is 18 second. With that animation, direction is linear and animation iteration count infinite. I'm going to sub this file. After set this file, if I back to my browser, now you can notice from the left side, this car moved to the right side and it takes total 18 seconds to complete the animation. Now we need to do the same thing for the second car. This time we need to move the second car from the right side to left side. As you can see, hero use infinite value, so this car is moving again and again. We need to do the same thing for the car two. So let's jump into the studio code, and here I'm going to call the second animation card two. Sono type animation and animation name is card two and animation duration is tw second. If you use animation duration quilt second, it's going to increase the speed of this car. Then I'm going to type linear, Animation direction linear, then animation interaction count is infinite. But before I set this file, we need to make some correction because hero use wrong round dresses. We need to move the inside this round basis and we need to separate the rotate Y value. Now it's correct. I'm going to set this file. After I set this file, if I back to my browser, let me show you after set this file, if I back to my browser, this is how it move both the card from the opposite direction. You can notice the right side card is much more faster than left side card because we use 12 second duration for this card. So this is how we can run this animation. Now, we need to work on the day and night mode. If we click on this sun, I want to change to day to night mode. For that, let's jump into the Visal studio code eater again. Now we need to change the scene into nightmde. For that, we need to jump into this script dot Js file. And at first, inside this script dogs file, I'm going to target the sun. And to target the sun, I'm going to declare a variable C N is the cost sun equal to here, I'm going to type document, Hemotype document dot Kiri selector, Kiri selector. Then inside the round dresses, inside the single codes, I'm going to select the Sundiv using its class name sun and semiconm two in this line. Then I duplicate this line and I'm going to change the variable name here, I'm going to make it. This time I'm going to this time I'm going to select sin. Here I'm going to make it sin. Sing equal to document dot cod, selector here, I'm going to type. Here I'm going to target Sindep using its class name dot dot sin. Then I want to add an event. I want to add click event, Song type, sun, dot, add event listener. Inside the round Bress, I want to add click event. Click. Then I want to run and call the function. I'm going to type arrow function round recess and here equal to greater than sine for arrow function. Then inside the color recess, I want to add in class. I want to add in class to our syndep. For that, I'm going to type Sin class least, class least dot Toggle. Here I use toggle method because whenever I click the toggle inside the round brasses, I'm going to pass the class name and the class name is night and semicolon to this line, and I'm going to set this five. Whenever we click on this Sandv element, it's going to add in class to this Sindiv element, which is Night. If I click twice, then our towel method remove the class from this div element. That's why here we use tobul now after I set this file, let's back to the browser and inspect this page. After inspect this page, let's see is it worked properly or not. Whenever I click on this Sundev element, this de, as you can see, it added class night Aptar sin. It added a new class Aptar sin. If I click this sun again, as you can see it remove the class. Using this class, we can jump into the night mode and again, we can jump into the D mode. Now we need to go jump into this style of CSS file and we need to work on night Mode. Now after the keyframes, I'm going to work on the SM for the nightmde type dot CN Night. Hit the scene element, class Night, then inside the Caris I want to change the background color. Background. Background, I want to make it hashtag two, two, two, eight, double three. This navy blue color. Otherwise, you can use dark gray color, it's up to you. I'm going to set this file. Now, if I going jump back to the browser and click the sun, now you can notice it's turn into this dark blue navy color, and it gives us night mode. Now let's back to the Visal studio code again. Next, I want to move the Sundiv element at lap side when I click on it. I'm going to dug this section and this time, I want to select the Sundiv element, which is inside the scene and the night class is activated, then I want to target the Sundiv element the SUN sun. Here I'm going to use the property called lept. Now, instead of using 55%, I want to move this element at 45%. With that, I want to change the box shadow. Here I'm going to type box shadow, zero, zero, zero, the box color is Hasa if if a fully white. I'm going to set this file. Now to set this file if I back to my browser and make it day to night, now you can see this sun moved to the left side, it 45%. It's moved to the left side when I make day to night. Here, first we move this element 45% at left side, then we remove the box shadow and make it solid because we need to remove the growing effect of sun. Next, we need to work on the moon shape. For that, I'm going to duplic this section again and this time, we need to work on before pseudo element of the Sund element. So to type colon colon before. Then inside the calibraces, at first, I'm going to create a blank content. Content is absolutely blank. Then I want to position it. I want to position it absolute because I want to move this element with this sun when it move 55% to 45%. After that, we need to place it. We need to place from the top here I'm going to use -20 pixel and from the left from the left, I want to place it 20 pixel. Then I'm going to define within height to this element with 100%, also height, 100%. After that, I'm going to define the background. Background. For the background, I'm going to use this color code Haztag 22283. Basically, this background color match with this sin background color, the night syn background color because we need to hide this portion of the sun. Then I'm going to convert this square box. Basically, for now, it's a square box let me show you if I set this file and back to my browser and click on the sun, now you can see a square box which is above the sun and if I make it round, then it's going to create a shape of moon. Let me show you how. So if I use border radius, border radius, I'm going to make it 50% or border radius, then I'm going to set this file. Now if I back to my browser and click on this sun, as you can see, now this shape turned into moon shape, the harp moon because now we have another circle above the moon and this circle color is matched with this background color. That's why it is invisible. That's why we can see only the moon shape. This is how we can create this beautiful animation using Java Strip, CSS and HTML. And this is how we can turn day to night and night to day. I hope now it's clear for you how we can build this beautiful animation project. So thanks for watching this video Stune for our next project. 61. Circular navigation menu using javascript: Hello, everyone. Welcome to the new lesson in this course. In this project, we are going to create this circular menu towel effet, this beautiful towel effect. As you can see, when I click on this towel button, those six circular links appear, and it plays around the towel button. And if I click it again, those items are go behind the towel button and hide itself. To create this effect, we will use little bit of JavaScript. Without wasting your time, let's start the practical and see how we can create this beautiful towel menu. So finally, I'm in my result studio cod editor, and as you can see, I already create index dot estimate file, styled cssfle and scrip dot JS file, and I link all this file with this estimate document. Now, at first, inside the body tag, here I'm going to take a container. I'm going to take a deep container to type deep dot container. Deep container inside this Dev element, I'm going to create another DVelementF toggle. So type Dev dot Toggle. It is for the Toggle button. Then inside this toggle button, I want to add the Toggle button icon. For that, we are going to use this website. Ionic dot IO slash Lncons. We are going to get all the icons from this website. To get the icons, we need to click on usage. After click on Usage, here, we need to copy the two Script tag. So to select both the Script tag and I copy it and I'm going to put it inside this body tag, but before the script dot js five. I want to set this file. Now we are able to use icons from the website. Let's add the togle icon. For that, I'm going back to the website and going to the icon section and from here and from the search section, I want to search for add icon. I'm going to use this icon. I select this icon. And then I select this icon. From here, we need to copy this code. I copy this code and back to the salt studio code editor. Inside this toggle DV I'm going to put this icon. I'm going to paste this icon code. I'm going to set this file. Then below the toggle, I want to add the menu. For that, I'm going to use UL tag UL. Then inside this UL tag, I'm going to take LI tag. As I'm going to assign variable Css variable to the LI tag, so type style attribute, style, and heterotypei or variable name is I here I'm going to assign value, somebody use colon and her to assign value one. So this variable I equal to one. Also, I'm going to assign a class to this UL tag class and the class name is min. Then inside this list item, I'm going to add Nora A. Then inside this anchor tag, I'm going to add the icon. First, I want to add the home icon. I'm going back to the browser. And from here, I'm going to search for home. I'm going to use this icon, copy the code, and I'm going to put the code inside this and get tag. That's it. I'm going to set this file. Now I press set this file. If I back to my browser and show you the web page, here you can see the toggle button and the home icon. So I'm going to fast forward this process, and I'm going to add all icons one after another. I fast forward this process and one after another, I add all the icons, such as camera outline, Parson outline, uplanOline, mail outline, key outline, et cetera. So satisfy if I back to my browser, this is how it look like. Now we need to start this styling part. For that, lets jump into the user's studio code and jump into this styling section, the style page, style or CSS. At first, here I'm going to import a font. I'm going to use pop in fonts for this project, so I'm going to pass so I'm going to import a font pop ins from Google. After that, I'm going to use universal selector star. Then inside the Calibra says, first, I'm going to define margin margin zero from all of the duction. Also, I'm going to use padding. Padding, also, I'm going to assign zero for all of the duction. Let's it's going to remove the margin and padding. Then box sizing, box sizing border box. After that, I'm going to define the font family, font family. Inside the single course I'm going to type pop ins and it's come from Sans font family Sansal I'm going to set this file. After I set this file, I'm going to open my browser and the code editor side by site. Now, as you can see here I open my browser and code editor side by side. After that, we need to remove the list items. Next, I'm going to style the list items. So I'm type LI tag, set the AI tag and from here, I'm going to remove is style, so tag, List, style, and I'm going to pass Nan wd. After that here I'm going to select the anchor tag using A and inside the Carlss I want to remove the underlines. I'm going to use text decoration, text decoration. I'm going to make it none. Then I'm going to style the body tag. So to select body. Then inside the body tag, inside the calices. At first, I'm going to define minimum height, some type mean height, minimum height, 100 VH. Then I'm going to use display property because we need to align the content center of the page type display and I'm going to make it flakes. After that, justify content center. Also align, align items center. With that, I'm going to add an gradient background. So type background color. And here I want to use linear gradient color, linear gradient, then in the cools, I'm going to pass the linear gradient value. For this gradient color, I'm going to use this value. 45 degree, I want to rotate this gradient at 45 degree angle, then I use this color variants, light purple and red color. I'm going to set this file. Up to set this file, it's not working because here we need to use only background, not the color. Now, if I set this file, as you can see, now it's working. It align all the it middle of this page vertically and horizontally. Also, it changed the background color. Next, we need to target the container. We need to style this container. Let me show you this continent element. For that, I'm going to copy its class name and back to the style CSS five. Here I'm going to select the continent element and inside the calibrass first, I'm going to define weed and I'm going to have to pass 270 pixel. Also height, 270 pixel is a square box. After that, I'm going to use distal property, display, and I'm going to make it flex. Justify content center. Align align IM also center. After that, also, I'm going to define the position and I'm going to make position. I'm going to make it relative. I'm going to set this file. After I set this file, you can see the result. And to understand the area how much area we use for this container, you can use background color for now. Let me show you somebody use background, you can use any color. I'm going to use red color, ED I'm going to sell this file. After set this file, now you can notice the area. It is for temporary purpose. At first, we create a square box. Then we make it disfix to align the toggle icon middle of this container. Now let's style this towel button. We need to style this towel button using its class name. I'm going to copy the class name and back to style or CSS file, and here I'm going to select the towel button using its class name then inside the color recess at first, I'm going to assign wet for this button, I'm going to use 70 pixel. Then I'm going to assign height. Height also 70 pixel. After that, I'm going to define daground color. Background color, I'm going to go with white color. White. Also, the next property, I'm going to use border radius. Border radius, I'm going to make it 50%. After that, I'm going to define color. Color, and here I'm going to use color, dark gray, Hazteg 222. Here we use color puberty because icons are literally fonts. After that, I'm going to use display property Display, I'm going to make it flex, justify content, justify content center. Align item also center. Then I'm going to define the font size. Font size, I'm going to make it 30 pixel. I think 30 pixel is enough for it. If I set this file, this is how it looked like. Let's look good. Then I want to make cazar pointer when I hover my casa on this element. So I'm going to take cars ar, I'm going to make it pointer. Also, I'm going to provide this data index value S index 20. Then I'm going to use transition property also transition and I'm going to provide transition duration, 0.3 second. I'm going to set this file. After set this file, this is how our button look like. If you hob on my curds are on it, now you can see our cards are become pointer. That's the first part of this tutorial. And the next part of this tutorial, we are going to start JavaScript and also we're going to work on this toggle button. When I click on this struggle button, I want to make it a sign, the cross sign. Thanks for watching this video stay tuned for our next part. 62. Circular navigation menu using javascript part 2: Welcome back guys. This is the second part of this tutorial and first, we are going to work on this click effect. When I click on this toggle button, I want to rotate this toggle button add Xxs. I wanted to rotate the toggle button and make the plus sign to Sig. Whenever I click on this button, I want to add a class to this continent deep. Then we style the Tuggle button based on the class. For that, we need to go and jump into the JavaScript file and we need to select the continent deep. Inside this Javascript page, I'm going to type, I'm going to declare a variable late and our variable is container. Let container equival to document, document dot, get query selector, query selector, and inside the round dresses, inside the single course, I'm going to pass, I'm going to select the container and semicon to end this line. Then I duplicate this line, and this time I'm going to select the towel button. I'm going to replace container with toggle. Now after set the container deep, we need to target the togo using its class name. For that, I'm going to copy it class name toggle and I'm going to type dot toggle and I'm going to set this file. After that, here we need to run an Add even listener. Now I want to run an event in Toggle. For that hemo type, toggle, toggle dot, add event listener inside the round Brass, here, I'm going to use click event. Click. Then after coma, here we call the function. So to type round recess and the arrow function. Then inside the Carlss here, I'm going to type container, dot, classist, dot, toggle, continent dot class dot toggle inside the round recess, I want to add a class name active. And semicon to end this line, and I'm going to set this part. That much of JavaScript we are going to use in this project. Basically, it going to addend class when I click on this button. Click on this tuggle button, let me show you. If I inspect this element, inspect and now you can see in our body section elements, if I increase the area, now you can see in our body section, this is our container class. If I click on this toggle button, now you can see it at the active class in our continuative element. If I click it again, now it remove the active class from it. So once we click it going to add the class and again we click it, then it's going to remove the class. According to the class, we are going to style our elements. So let's get to the code. So let's to the CSS and select the continuative element. First, I'm going to target the continuative element, sub type dot container, and when it has the class of active type dot, active, then I want to select the toggle dive element. Subtype dot, toggle. Then inside the scarlv recess we need to rotate the button. For that, I'm going to type transform propriety, transform, and I'm going to rotate it. Rotate and I want to rotate it up to 45 degree, I think 45 degree is good for it. 45 DEG. I'm going to set this file. Now to set this file. If I click on this button, now you can see it rotate the button, and it turned the plus sign into cross sign because I rotate it up to 45 degree. If I click it again, again, it's back to the plus sign. When I click on it, it turn sine and when I click it again, then it back to the plus sign. Keep going and work on the UL tag. And as you can see, and as you can see the UL t have a class named Min. So copy its class name and back to the style CSS file. From here, I want to select dot container, and from the container, I want to target the Min. Then inside the Cariss at first here, I'm going to use the property call position. Position, I'm going to make it absolute. After that, I'm going to place it from the top, I'm going to place it zero. Then from the left from the left, I'm going to place it zero ag. Physically, I want to start all the items from that corner and also, I'm going to define within, we. I'm going to use we 100% height, also 100%. I'm going to set this i After set this file, this is where we place the menu items. After that, we need to select the LI text, which is inside the minutex stye menu space AI. Then inside the calibrassF property, I'm going to use position. Position, helm to use position absolute. Then from the top, from the top, I want to place it at zero from the left, I want to place it at zero again. After that, I'm going to define with and height, Width, I'm going to use 100% width, height, I'm going to use 100% height. The next property, I'm going to use pointer event, pointer events, and I'm going to make it none. And if I set this file, and now you can see all the list item are positioned at the top left corner. Then I'm going to target the anchor tag which is inside the LI tag. For that, again, I'm going to type the main space AI list item, and I'm going to target all the anchor tag A inside the class, the first property I'm going to do the first property I'm going to use W. Width 55 pixel height, 55 pixel. Then I'm going to use color. Color and I want to use dark gray colors on type has tag 22. Then I'm going to define background. For background, I'm going to use white colors on type, has tag, if if if. Also, I'm going to define border radius. Border radius, I'm going to use border radius, 50%. Next, I'm going to define font size font size, and I want to use font size 22 pixel. After that, I'm going to use display property. Display, I'm going to make it flax, justify content center. Align, align items also center. Next, I'm going to use another property called position, position, and I'm going to make it absolute. Here we use absolute position because we need to position the links below the towel button. That's why we use absolute position. Also we need to place it on to pass from the top. I'm going to pass 50% value, 50% and from the late, also 50%. I'm going to set this file. Up set this file, this is where we place the elements to place the menu items exact behind the toggle button, we need to use transform property. Here time transform Transform, translate, translate inside the round dresses, here. Inside the rounddress is here, from Xxs I'm going to pass -50%. Comma from the YXs also going to pass -50%. Now preset this file, as you can see, we successfully place the list items behind the towel button. Now it hidden behind the towel button. Also, I'm going to add pointer events. Pointer events, and I'm going to make it again visible. I'm going to set this file. Then I'm going to addition transition, and I'm going to type 0.3 second. I'm going to set this file. Now, whenever we clicking on this toggle button, I want the button appear again. Now for that, we need to target all the LI tag when they have the active class. For that, I'm going to type to container dot active. Cteant active space, I want to target the menu from the menu, I want to target all the LI tag and from the Iag I want to target the anctg A. Then inside the carivs her to use top property, and I want to place it at zero. Now, if I set this file and clicking on this toggle button, you can notice it going to move all the menu items to the top position at that place. If I click it again, then it going to move back and hide behind the toggle button. Now the only thing is left, we need to rotate the link around the towel button. For that, we need to jump into the list items, menu list items here, and we need to use a property called transform transform here I'm going to use rotate value rotate. And since we had total six to list item, as you know, we had total six list item. So we need to use Cal function to calculate the rotation. Here I'm going to use calc and inside the round dresses, I'm going to divide 360 degree 360 DEG by six because we have to six list items. And here I'm going to multiply with variable inside the round dresses, I so the first LI tag rotate by 360 degree divided by six times one. I mean, it's going to rotate the first element 60 degree. Then it's going to rotate the second element 120 degree. Then it's going to rotate the third element 180 degree. Then it's going to rotate the fourth element. 240 degree, then 300 degree and at last, it go to rotate the last element 360 degree. If I save this file and take this towel icon, you can see the result. Whenever we kick on this towel button, it spread the list item around the towel button and their pace is equally divided. But the problem is the icons are rotated. And now we need to reverse them to reverse them first, I'm going to copy this rotate value. The copy this rotate value and then going jump into the anchor tag when we have active container. Here I'm going to use transform property transform. First, I'm going to use translate value, translate here, I'm going to use -50%. I'm going to use negative value from X and -50% from Y. And then I'm going to use the rotate value here. So pays the rotate value and to change the rotation angle. This time, I'm going to use -360 -360 degree, and I'm going to set this file. After set this file, basically we reverse this rotation and now you can see when kicking the buttons. Now the links are looking exactly the way we want. But at last, we need to remove the red background from this container. From here, so from the tina dip element, I'm going to comment out this line, and I'm going to set this file again, and this is now, this is how our Togo Menu looks like, and it's worked pretty fine. I hope now it's clear for you how we can build this project. Thanks for watching this video, Syuned for our next project. 63. Pure CSS Animated Background: Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related pure CSS animation. And this is our simple project. And in that project, we are going to create animated background. We pure CSS. I'm not going to use any javascrit for that. We are going to randomly generate these boxes, and it's move upward and then valish. It's start from the down and move upward, and their size is different, their placement is different, their shape is different, everything is different from each other. And you can notice time to time it increased the border-radius and it become a circle. The square become a circle and then disappear. So this is the effect we are going to create today in this project with the help of pure CSS, we are not going to use any Javascript for that. So let's get started and see how we can do that. As you can see side by side, I open my Visual Studio code editor and my browser using light server extension, and I already create an HTML document to name index dot HTML, and I already create a starter template. Now, at first, inside the body tag, we are going to take a Deep tag, and we are going to run all the animation in that Deep tag. And for this deep tag, you can take any name here and I'm going to take dot Area. Area. And inside the Z tag now, we need to create multiple multiple boxes. To create the boxes, you can take nodal list. Otherwise, you can take Deep tag also. But I would like to go with nodal list. So I'm going to take a nodal list, and I'm going to assign a class UL, dot, I'm going to assign a class circle this one. Now, inside that nodal list, I'm going to take total ten circle. I want to use ten LI tag list items. For that type AI multiply with ten. And if I hit Enter, as you can see, it's going to assign ten LI tag. It is happened because of emit. Here I use a short code. So first, we have a parent deep call area, and then we have a nodal ist, and I assign a class to these nodal list circles. Then inside the nodal list, we have totaled ten list items. And now I'm going to start the CSS, and here I'm going to apply in page CSS. So I'm going to take style tag inside the head tag. Style at first, I'm going to style the area, and I'm going to assign a background color to this area. Let me show you. So here I'm type dot, dot area. Then inside the crass, first, I'm going to apply background color. Background. Background, and I'm going to apply background color kind of bluish color. This color code. After I apply this background color, this is how it look like. Then I'm going to apply. We, here I'm going to apply with 100% also height 100 VH view vote height, and I'm going to set that five. Next, I'm going to target the underst circles. So here I will type dot circals inside the calvus Inside the calles is the first property I'm going to use position. Position, I'm going to make it absolute. Then from the top, I'm going to place it zero from the left, I'm going to place it zero, and for with I assign 100% and for height, I assign 100% height. And I don't want to make these elements overflow from the main container, so I use overflow headen. After that after style, the area and circles, we need to style all the LI text. We need to assign different height and width to this LI tag. Also, also, we need to apply different animation pattern to all the LI tags. I want to say their timing function. Now I'm going to apply the common styling to this LI tax. So here, I'm going to select the tax which is inside the circle element. Circle I, then inside the cleress then inside the colors position. Position, here, I'm going to apply position. Absolute. With that, I want to start the animation from the bottom. So we need to define the starting position. So for now, I'm going to move out all the elements from this circle area. So Hembrtype bottom, bottom -150 pixel. Now related to this button value, we need to take the size, take the height of these elements. If we take more than 150 pixel, then to increase the bottom value. Otherwise, it's going to show the element at that point, at that section. After that, I want to make the LI tag block. So it act as a DV element. So here, I'm going to use display property display block. Next, we need to remove the bullet points. For that, here inside the circle, I'm going to apply list style, list style nun, and I want to set that one. So it removed the bullet points. Then for now, I'm going to assign default height and weed to the LI tags. So here, I'm going to tie weed. I'm going to assign 20 pixel, also height 20 pixel. Next, I'm going to take a background color, and for the background, I'm going to use transparent white background. Transparent white color background, so herm type background, and I'm going to use Argiva value, and for Alpha, here I use 0.2, so it's become transparent. Then I'm going to set that file, and after I sub that file, you can notice there's a little padding and margin to this element, so we need to remove it. So as you know, by default, it add padding and margin. So I'm going to use Inu Virtual selector and inset the Car ***, here we need to use margin. I'm going to assign margin value zero padding also zero, and I'm going to set that file. Then it's going to demote the margin and padding, Keyfaul margin and padding. This is the first part of this tutorial. At the next part of this tutorial, I am going to animate all the elements. And for that, we are going to create a keyframe. So this is it for this tutorial stitone for the next part. 64. Creating keyframe for animation: Hey, guys, good to see you back. This is the second part of this tutorial, and at that section, we are going to animate all the Ali tags. So for that, I'm going to define a keyframe, some type, at the red keyframe. And my keyframe name is animate, animate circle. Then inside the Cariss inside the Caribrass at 0% duration, I'm going to take some videos. At 0% duration, I want to target all the LI tags, and I want them to animate. We need to rotate the elements, also. We need to move it upward. For that, I'm going to use transform property, Transform, and here, I'm going to use a function. Translate Y. Translate Y, I'm going to set it zero. Also, I set rotate value zero degree. We need to move the elements from the bottom. That's why I use translate Y value zero, and we need to rotate the elements, but for now at 0% duration, I said zero degree. So whenever we open the page, it's not going to rotate the element, also it not going to translate the elements. Next, I'm going to set the opposity of the element, and I want to make them visible. So I've said opposity one. After that, I want border-radius. I want to apply border-radius on it, some type border-radius zero. At starting time, I want sharp corner. That's why I use border-radius value zero. Then I'm going to select this portion and duplicate it, and at 100% duration, I'm going to change the values. Now at the end of the animation, we need to move all the boxes out of this screen from the top side. Suppose the height of the circle element is less than 1,000 pixel, so I'm going to move the element out of this area. I use I'm going to use estimated value -1,000 pixel. I want to move the elements upward to the -1,000 pixel. So the elements move out of this area. We had to take out all the elements from here, wherever our screens end. That's why I use that value. So I want it to go beyond this. Now let's focus on rotate value. If you want to rotate the element at full circle, then you need to use 360 degree value. But if you want to rotate the element twice in full circle, then you need to use 720 degree vdu, let me show you. I'm going to change the value and make it 720. If you double down 360 degree, it's become 720 degree. So it's going to rotate the elemen twice. So it must be clear for you that I given its value as 720 degree. It's mean the box will rotate completely from bottom to top twice. Now, whenever we reach the end position, I want to reduce the opacity. So I'm going to make opacity, I want to reduce the transparency, so I'm going to make it zero. Also, I want to round the elements. So I'm going to set border-radius. 50%, and we need to make the boxes perfect circle. That's why I apply this value, 50% border-radius. And now we need to apply this animate circle animation to these LI tags because I want whenever we open the page, I want to animate all the LI tags. For that, we need to apply it in our LI tags. So let's use the property call animation. Animation and our animation name is Animate circle. And I want to run the animation for 25 second, and I use animation timing function linear. With that, I want to run the animation for infinite time. That's why I use the value infinite. Now let's set the file and see if it work properly or not. After set the file, as you can see, it's not working because there is a problem. Yes, there is a problem. It circles, not circle. So to add A and then set the file again. After set the file, you can notice our animation. It rotate the elements. Also with that time to time, it reduced the border-radius, and time to time it become a circle. And also, it disappeared when it reached the end point. And it going to run the animation infinite time. First, we set opacity one, so it's fully visible. And whenever it reach the 100% duration, it becomes transparent because we set the oposity zero. Now you might have tion. We create ten different LI tag. So why we can see only one LI tag here? Because we place them in a single position. That's why it plays top of each other. So I hope now the concept is clear for you how the animation works. Now I want to change the LI element position, but not in this tutorial. So at the next part of this tutorial, I am going to change the position of the LI elements. So stay tuned for that. So thanks for watching this video. See you soon. 65. Change position and size of box elements: Hello, guys, good to see you back. This is another part of this tutorial, and at that section, we are going to place the LI tags, the AI items in different places. Also, I'm going to change their timing function, animation delay, and size. So one by one, I'm going to select all of this element, list items. To select the list item, I'm going to use Nthhild selector. We need to separate all of this LA tag because they are placed top of each other. So let's use the Nthhild selector. Now, before I do that, you can notice circles tax. And in that case, you can see in our LI tech, we do not use P property. So they are placed in a single position. And using EP property, we can separate them. But at first, we need to create this electron. So I'm going to copy this section, this class, and the tag name, and then I'm going to place it here. At that position. Then I'm going to use Nth child, colon, NIT child and in child. At first, I'm going to select the first child, the first element one. And then I'm going to use Carli braces. And inside the arises, here, I'm going to use the property. The first property, I'm going to use lipped property, Lipt p and here, I'm going to place the first element, 25%. Otherwise, it is up to you. So I'm going to place it at 50%, 50%, then colon. After that, I'm going to define within height because using within height, we can define the size of this element. And remember, we cannot take value more than this, this bottom value. We cannot take more we than 150 pixel. Otherwise, it's going to create some problem in our design. So for now, I'm going to set with with 80 pixel, also height 80 pixel. Then I'm going to add little animation delay. Animation, delay here, I'm going to use delay for zero second. I think it's good for it. And I'm not going to provide any delay for that. Then I'm going to provide animation duration. Next, I'm going to type animation duration, and I'm going to complete this animation at 18 second. By default, it's going to compete the animation in 25 second. But here I mentioned the duration of this animation, which is 18 seconds. Now to sub that file, you can see this is our first nth child property. You can notice the size of this box element. It's 80 by 80 pixel, and time to time it converts into a circle because we reduce the border width of this element. That's why it's become circle and disappear. Now, at the same way, we need to place all of the ten element in different places and also need to provide delay or otherwise change the duration. So randomly, it's a pair and goes up and complete the animation, and it's going to create that effect. I'm going to duplicate this section. And this time, I'm going to select the nth child to. And here, I'm going to change the size. I'm going to make it a little smaller. I'm going to make it for tipixel by 40 pixel. And I'm going to add little delay on it. I'm going to add two second delay, and this animation duration is 15 second. I reduce the animation duration. Otherwise, I'm going to make it less. I'm going to make it 12. And before I set that file, also interchange the position of this element. I'm going to place it at 30% from the left. And I'm going to sub that file. After I set that file, you can see here you can see after two second delay, another box appears. At the same way, we need to place all of it. So I duplicate this line. This time, I'm going to place it at 10%, 10%, and I'm going to change the size of it. I'm going to make its size 30 by 30 pixel by 30 pixel. I'm going to add 1 second delay. Also, I'm going to change the duration. I'm going to make it 19 second. It is completely up to you how you can handle the animation delay and the duration, how you can set the duration. Also, I change the nth child property value. Now we target three. After I set that file, you can see the third element. We successfully place the third element at that position. And at the same way, we are going to place all of it. So I duplicate this section, and this is element number four, and I want to place it at 40%. I'm going to change its size. I'm going to make it a little bigger 90 by 90. Pixel. Yes, I want little delay, three second delay, and it's going to complete the animation within 15 seconds, otherwise, ten second, whatever devalue you can use. Just you need to create a random effect for that. This is our main target, and I'm going to set that one again. So after 3 seconds delay, this is our fourth element. Now the problem is, it can overlap with another element, another bigger element. So I'm going to change the position of it. I'm going to make it 80%. Then I duplicate that section again, and I'm going to target the fifth one change the position. I'm going to make it 90. Also, I'm going to reduce the size of it. I'm going to make it 30 by 30. I'm going to change the delay value, animation delay 1 second, duration, and also I'm going to change the duration. I'm going to make it 22nd. Then again, I'm going to duplicate this one. This time, I'm going to target the sixth one, sixth element, and here I'm going to position it 75%. 75 and I'm going to change the side. I'm going to make it 100, 100 by 100. I want little bigger box, not thousand. And I have some little delay, five second delay, and its duration is 22nd is good. Otherwise, I'm going to change this one. I'm going to make it 18 second. At the same way, I'm going to duplicate this one, and for the seventh element, I'm going to place it at 95%. And I'm going to make its size a little smaller. I'm going to make it 50 pixel by 50 pixel, 50 pixel. And I want a little delay. I want two second delay, and I'm going to change change its duration, and I'm going to make it 17 second. And I'm going to set the file. Let's see how it look like. After set the file, I wait for some time, as you can see, yes, randomly, it's appare the elements. But at that section, we have multiple leens. So we need to handle this situation. But at left side, we appear too much element at that same time, so we need to handle it, so we need to appare the other elements at that at left position at left site. So for the eight nth child, I'm going to take the value 20%. I want a little bigger box, so I'm going to use the biggest one, 150 pixel. And as I told you, we cannot take more than 150 pixel. Otherwise, it otherwise, it can create problem for our design. Because we take bottom value -50 pixel. And also, I'm going to change the animation deal. I'm going to make it zero and duration, I'm going to set the duration 15 second. And for the ninth one, for the ninth one, I'm going to place it at 40%. I'm going to make it 40. With that, also, I'm going to change its duration. I'm going to make it 25 second, otherwise, less than 24 second. And now I'm going to slit the last one, which is nth child number ten. And I'm going to place this one at 85%. Not 85%. It's simply 20%. And since the size of it, I'm going to make it a little smaller. I'm going to make it 25 pixel, not more than that, 25 by 25, and I don't want, I am going to assign some little delay two second delay, and it took total 22nd to complete the animation. Now, let's sub the file and see is it work properly or not how it looked like. Now to set that file, this is how it appear. It provide a random effect with different shape, different size, and different places. And as you can see, we assign different duration, different animation delay. That's why it creates this beautiful effect. I hope the concept is clear for you. It is up to you how you can place and how you can organize these boxes. So this is our basic animation. And as you know, it is a background animation, so we need to so we need to place a text over it. Also, we can create floating menus. We can create a lot of that, but I'm not going to do that in that tutorial. I'm going to do it in our next tutorial.