Creative CSS & JavaScript animations - the complete guide with 150 projects!

1. Creative Advanced CSS & Javascript Animations - 140 Projects: Are you looking for a course that takes you from a complete beginner to building beautiful, advanced CSS and Javascript animations for your websites, or have you taken other CSS courses, but still want to improve your CSS skills and take them to the next level by mastering CSS and Javascript animations. If so, then you've come to the right place. I'm am and this is the best selling CSS and Javascript animations course. On my, in this course you will master CSS and Javascript animations, transitions and transforms, and even the CSS clip path property, all while coding 140 creative animations and effects step by step completely from scratch. And as you build each of these examples, you will learn new ideas and gain inspiration to help you create advanced animations and make you a better, more confident web developer. So what's in this course? Well, we will start by looking at the CSS transition property and its different functions, and we'll see how it can give life to your HTML elements. Then we will move to CSS transforms, which open the doors to many creative options. Moving HTML elements around the page to scaling, rotating, and skewing them. There we will master all the transform functions that we can use in two D and three D environments. Then we get to the fun part. We will use everything we learned about CSS, transforms and transitions to craft some creative examples that will inspire you and help you take full advantage of what you've learned. We'll start by creating a lot of different button effects, then try image effects, menu effects, then card effects, and even some other cool transforms, examples like text and social media effects. Then we'll move on to mastering CSS, animations, and key frames. We'll learn everything about them, all their different properties that make it easy to build creative, advanced web animations. In the following section, we will be creating more than 40 creative animation projects using different techniques. I'm sure that these examples will amaze you and kickstart your imagination by showing you just how many incredible things can be done using the skills you've learned. After that, we will learn about the CSS clip path property, which allows us to create great looking effects and opens the door to even more creative ideas. We will learn how we can use it to create some different very cool projects. Now on their journey through this course, a lot of my students asked me to upload a new section with some Javascript effects. So at your request, now you can check out this section at the end of the course, where we will take our skills to the next stage and leverage the power of Javascript to create some cool advanced effects that are impossible to create using only CSS. To get a general idea of the projects we're going to create throughout the course, I urge you to check out the first lecture of each section. There I've included a preview of all the effects we're going to create. I think you can see that this course is packed with content. It comes with 18 hours of downloadable video and all the coding resources for the projects we'll be working on throughout the course. Keep in mind when it was first uploaded. This course is only a half hours long. So you know, I'm always trying to add new content with different ideas to help you keep up to date with the new current CSS and Javascript techniques to create all the cool effects you see out there. If you want to advance your CSS and Javascript skills, this course really is perfect for you. Over 19,000 students have already signed up and left hundreds of five star reviews. I'm sure you'll enjoy the course just as much as they did. Don't wait and wonder. Join us in the course today and I will see you inside. 2. 2 - what is CSS transitions: Hello everyone. Welcome to this lesson where we will be talking about CSS transitions. So first of all, what is the CSS transition property? And what can it do for us? Well, transition as a CSS property applied to a specific element to make other properties of this specific element change smoothly over a given duration. Or animated in a nice way when hovering over, or for another example, focusing on that element. Let's look at an example of what I mean here in my HTML. You can see right here I have a simple button. And here in my CSS, I've added some styles to the button. You can see I just changed the height, the width, and the font size to make it bigger. Change the text color to white and remove the border, then added a blue background color. And you can see in the browser here as our button. Now, let's add a new CSS declaration. So I'll go right here and say button on hover. Meaning when I move my cursor over the button, I want to change the background color to green. Now if I go and hover over my button, you can see the blue background color changes to green. And when I move my mouse away, the background color returns to blue. But you may have noticed that this change from blue to green, It's happening so fast. It looks like an on and off switch. It feels pretty mechanical. I think it will look much better if this change happens more smoothly. And that's exactly what CSS transition can do for us. So we said that the transition makes the change of the CSS properties occur smoothly over a specific period of time. In order to define a transition, we need to use at least two things. The first is the CSS property that will change from the initial state to the final state. The second is the duration, meaning the amount of time that this change will take to complete makes sense, right? So in order to do that, we need to declare to CSS properties. The first one is called the transition property, which is the property you want to apply the transition to or make change smoothly are nicely. In this case is the background color. And the second one is a transition duration, which is the span of time that the property will take to change from the initial state to the final one. Let's say 1 second. And now when I go and hover over the button, you can see that the change occurs smoothly in a nice way and is much better than before the transition was applied. And when I move away, the background color returns to blue nicely. Now, the transition duration property Connect Set milliseconds as well as seconds. For example, I can change this 1 second to, let say, 3000 milliseconds, which is actually three seconds. Then when I hover over the button again, the chain should occur in a longer duration. 3. 3 - CSS transition options: Hello everyone. In this lesson we will continue talking about the transition property and the other options we can deal with when using it on our HTML elements. Now, besides the transition property and the transition duration that we talked about in the last lesson. And remember we said that they are necessary for the transition to work on the elements. We also have two additional properties that we can use to take further control of our transition. And those are the transition timing function and the transition delay. First, the transition timing function simply refers to how the change in the property will occur. For example, will the background color began to change slowly at the start of the transition duration and then faster at the end? Or will it change at the same rate throughout the transition period? Those questions can be answered by the transition timing function. Now the transition timing function has five different values that we can use. First, ease, which is applied by default, if you don't use the transition timing function, what it does is it makes the chain starts slow, then go faster in the middle, and then slow down a bit before the end. Second linear in which the change will occur at the same rate from the beginning to the end throughout the transition duration. Third is n, in which the change starts slow and then speeds up before the end. Forth. Ease out, which unlike ease in, starts fast and then slows down at the end. And finally, ease in, out in which the change starts slow, then speeds up in the middle, and then end slow. It's kind of like ease. There isn't that much difference between them. Great. So let's see those in action. I've got five transition timing function values here in my browser, and I have a demo for each one of them. Now, the property that will change here is the position of the div. So when I hover over any one of them, it will move a specific distance horizontally and then return to its original location when I hover away, like so. Now, before viewing the different values, Let's take a look at them in the code editor and see how we created this horizontal movement. So here in my HTML, I have a div with a class of container. Then inside of it, I have five children divs, all of them having with class move that is using a CSS to add the general styles for all the divs. And every one of them has a specific ID so that we can change the transition timing function according to that ID. So you can see the first one has an ID of ease. Its transition timing function will be 0s. The second one is linear. Then ease in, ease out and ease in out. And when we go to our CSS, here we have selected the Move class and added some generic styles to make videos look better. Like some margins with height, padding and so on. And here at the last line, we declare the transition property, which is the translate that is responsible for changing the location of the dibs from the left to the right over our transition duration of three seconds. So if we look here at the end of the CSS file, you can see that we're targeting all the divs. And when we hover over them, they will translate, or in other words, their location on the page will change. They'll move 900 pixels on the x axis or horizontally and 0 vertically. This is a transform property that we'll learn about later in the course. But I want you to know that this will just change the location of the div 900 pixels to the right. When we hover over it. Above that, I've targeted each div with its unique ID and added the five different values of the transition timing function. So here I've added ease for the first one, linear for the second, and then ease in, ease out and ease in, out. So to wrap things up, what we're doing here is simple. We just said to the browser, when I hover over any div, I want it to move 900 pixels to the right. And I want this change or this movement to happen smoothly over three seconds. And I want each div to move differently. So the first one will move differently from the second, which will move differently from the third, and so on. Now, all right, let's go back to the browser. And when I hover over 0s, which is the default, you can see it starts slow, then gets faster when returns to slow before the end. And when I hover away, it will also return slow, then fast, then slow. But for linear, if I hover, you see it goes at the same rate throughout the duration time. It's moving at the same speed for all of the three seconds. And ease in. Slow at the beginning, then faster at the end. And when I hover away, it returns slow. Then faster again at the end. Ease out fast at the beginning, then slow at the end. And when I hover away, it returns fast. And then slow again at the end. Ease in and out, Begin slow, then moves faster in the middle, then slow again at the end. All right, now, the second property that we'll talk about in this lesson is called the transition delay. And it simply represents the time the transition waits before it starts. It accepts time values in seconds or milliseconds. Now, here in our HTML, we have the button from the first lesson. I think you remember that when we hover over that button, the background color will change from blue to green, like so. Now let's go back to our CSS. I'll go right here below the transition duration property. And I'll add transmission delay two seconds. And now when I hover over the button, it should wait two seconds before the change in the background colors starts. And that is simply the transition delay property. 4. 4 - different ways to write the transition property: Hello everyone. In this lesson we'll continue talking about the various transition options that we have. So in the previous lessons, we learned that the transition makes the change in a specific CSS property occurs smoothly over a specific value of time. But can we use the transition on more than one property, meaning, can we make more than one property change smoothly? Well, the answer is yes. Here in my CSS, I'll go right here and add color. Black. So when I hover over the button, I want the background color to change from blue to green, and the text color to change from white to black. Now, let's view this in the browser. I'll hover over the button and you'll see that the text color changes fast with no transition. So how can we apply the transition to it? It's so easy. Back to our CSS. I'll go right here and add a space. Then another transition property, which is the color of course. And now when I go back to the browser and hover over the button, you can see that the text color changes smoothly along with the background color. And we can really extend this, meaning. We can change as many properties as we want. So for example, let's go to our CSS. And I also want to change the width of the button to, let say, 600 pixels when I hover over it. And I'll go up here and add space than width to make it change smoothly. And when I go to the browser and hover over the button, you can see that everything is changing together nicely. And in case you need to change many properties, let's say five or six. And you think that it'll be hard to write all of them here. You can simply remove them and add the keyword all. By doing this, all the properties will be included in the transition. So let's see that. You can see nothing changes. Great. Now we've learned all the CSS transitions properties that we can work with. But there is a shorthand property that we can use to mix all of them in one single line, and it's just called transition. So I'll remove these two lines and I will add transition. Then the transition property right here. I'll transition the background only. Then a space and the transition duration of three seconds. Those are enough for the transition to occur. But if you want to add the other properties, then add another space and add the transition timing function. Let's say ease in out another space and the transition delay at the end, let's say just 1 second. And when we view that in the browser, you can see when I hover over the button, it will wait 1 second. Start the change in the background-color over three seconds. And again, we can choose more than one property. To add more than one property. In this short method, we use a comma to separate the various properties. So I'll go right here and add a comma. Then I will add the other property I want to change, which is the color. Then the transition duration, let's say two seconds this time. And then the transition timing function, let's say ease. And finally, the transition duration. Now we want to do something cool here. We want the change in the text color to start after the change in the background-color finishes. So we should add a transition duration of four seconds, three for the background transition itself, and one for its delay. So back to the browser. I will hover over the button and you'll see that the background color changes. And then after that, the text color begins to change. And of course, we can add other properties. So I'll go back to our CSS and go right here, remove this new width and add a new property, let's say border-radius, 50 percent. So the border radius will change as well. And then I'll go up here and include this in the transition and add a transition duration of four seconds, then ease out for the transition timing function, and then six seconds for the transition duration. So it will start after the first two properties finish. So when I go back to the browser and hover over the button, you can see the background will change when the text color, and finally, the border-radius. And of course, we can use the keyword all if we want to just animate all the properties together, I'll remove all of this and just say, oh, then the transition duration of three seconds and then ease in. And finally, the transition delay of two seconds. And when we view that in the browser, you can see all the properties are changing with each other. But did you notice now we can't control the transmission delay like we could in the previous method, because all the properties are now starting and ending together. So that's it for this lesson, and I will see you in the next one. 5. 5 - what properties can be transitioned: Hello everyone. In the previous lessons, we learned what a transition is, how it works in all the available options and syntax we can use in a transition. If you remember, we said that the transition enemies the change in CSS properties over a specific duration. But not all the CSS properties can be used with transitions because the change in these properties doesn't happen gradually. It is changes from one state to another without any intermediate values. Properties that are not animatable. Our ones like background image, because it can't change gradually from one image to another. Display as well is not an animatable property. And there are many more like border style, position, float, background, repeat, font-family, and so on. On the other hand, the animatable properties are those that can be expressed by numbers. Because the browser can calculate or interpellate intermediate values, such as width, height, border width, padding, margin, line-height, opacity. You Gabby idea. We can also animate the properties that are expressed by colors, such as color and background color. And if you want a resource to find all the animatable properties, the developer dot mozilla.org site has a list of all of them. So you can just go to Google and type in what CSS properties can be transitioned. And then click on Mozilla site. And it'll take you to this list where you have all the animatable properties. Now in order for you to see these animatable properties in action, I've created this page which contains some of them. For example, if I hover over this div, we opacity will transition like this. So you can download this file from the resources and has these properties to see how they look while transitioning. 6. 6 - CSS 2D transforms basics: Hello everyone and welcome to this new section in the course where we'll be learning about 2D transforms. So what our CSS transforms and what can they do for us? Well, in the last chapter, we learned about CSS transitions, which allowed us to deal with the CSS properties applied to specific elements and make those properties change smoothly over a specific period of time. In this chapter, we won't be learning how to control the properties applied to the elements, but we will control the elements themselves, like divs and images and so on. In other words, we'll learn how to change the element size, shape, and position. And that is what the CSS transforms are our bound. The transform property has four functions that we can use to control how our elements will be displayed. And those functions are the scale function, which allows us to resize the elements, meaning to increase or decrease their height or width. The translate function, which allows us to move the element and change its position to any spot on the browser horizontally or vertically. The rotate function, which allows us to rotate the elements in a 2D environment by any degree or any number of turns we want. And the skew function, which allows us to skew the elements along the x-axis or the y-axis. So now, after we see what CSS transforms can do for us and what functions are used with it. In the next lesson, we'll start learning these functions, and we will start with the translate function. So see you in the next lesson. 7. 7 - CSS tranlsate function: Hello everyone. In this lesson we will be learning how to change the position of HTML elements like divs, images, and so on using the Transform Translate function. Now, every time you want to use the transform property, you'll write it like this. Transform. Then the transform function you want to apply, which is translate for this lesson and then parentheses. And inside of those, the value for the function specified. Now let's talk a little about the translate function. Basically, the translate function moves elements around the browser along the x-axis and the y-axis. So for example, if I write something like this, transform translate and pixels, ten pixels, this will move the element 10 pixels to the right and ten pixels toward the bottom from its original position. So let's try that. You can see here in my HTML, all I have is an image that we will try all the functions on and up here and add some styles to make the image look good when we view it. And if we go to the browser, you can see that the image is sitting here. So we want to change the position of the image, meaning we want to make it move horizontally or vertically. So first, we want to make it move horizontally. We can do this easily by using the transform translate property. So I'll go back to our code editor and target the image. And when I hover over it, I will add transform. And the function I want is translate, and I want to move it horizontally along the x axis. So I'll say translate x, and then I'll add the value of the distance I want the element to move, let's say 500 pixels. And let's go up here and add some transitions so that the movement happens smoothly. So I'll add transition. And then the property we want to change smoothly, which of course is transformed, and then the duration of the animation. Let's say two seconds. Great. So now what should happen when I hover over the image is that it moves 500 pixels horizontally along the x axis to the right. So back to the browser. And when I hover over the image, of course it will move smoothly 500 pixels to the right. Now, we can also use negative values for the translate property, and it'll work fine, but the element will move to the left, not to the right. So back to our code editor. And I will go right here and add minus 500. And when I go back and hover over the image again, it'll move to the left this time. Great. Next we want to move the image vertically, not horizontally. Easy enough. We'll use Translate Y instead of X. So I'll go back to our code editor and change this x to a y. So when we use positive values, the image will move toward the bottom. But in this case we're using negative values. So we should move towards the top, back to the browser. And when I hover over the image, you can see it moves 500 pixels toward the top. And let's go back to our code editor and use positive 500 pixels. And of course it will move downward. Now, we can combine these two functions in one function simply called translate. So back to our code editor. I'll remove this y. Now the translate function accepts two values. The first value is X, which will move the image along the x axis. So I will say minus 500 pixels, for example. And the second value is y, which indicates the movement vertically along the y-axis, let's say 200 pixels. And now when I hover over the image, it shouldn't move minus 500 pixels along the x-axis, meaning 500 pixels to the left and 200 pixels towards the bottom at the same time. And just like that, the image is moving horizontally and vertically at the same time. So to wrap things up, Translate is one of the functions that we can use with the transform property. And it allows us to change the position of the HTML elements on the page. It can be Translate X, which will move the element horizontally to the right if the value is positive or to the left if the value is negative. Or it can be Translate Y, which will move the elements vertically toward the bottom if it's positive or towards the top if it's negative. And we can just use Translate, which accepts two values, x and y, which remove the element along both axes at the same time. 8. 8 - CSS scale function: Hello everyone. In this lesson we will learn how to resize HTML elements using the scale function. So the scale function allows us to resize the elements easily. But what do we mean when we say resizing elements? Well, resizing elements means changing their width or height or both of those aspects. So let's start with the width. We can resize the elements with easily using scale x. So I have the same image from the previous lesson, and I'll go right here when I hover over the image and I will add transform scale x. And the scale function except numbers that indicate how much the width of the element will change relative to its original width. So for example, if I added to here, this will make the image width increased at twice the original size. So if it was 100 pixels, it will be 200 pixels. And if I change the two to 1.5, it'll be 150 pixels. So let's see this. You can see when I hover over the image, its width increases and is doubled. Now I can decrease the width as well. So I can go back to the code editor and use 0.5, for example, which will decrease the image width to half the original. Like this. Great nanoscale, the elements height, we can use scale y instead of x. So back to our code editor. I will change this to y. And that should decrease the height to have like cell. And of course, we can increase the height by using values greater than one. Let's see what that looks like. So back to our code editor. I will change this 0.5 to 1.5. And this should increase the height. Just like that. Like translate, the scale function can take two arguments, x and y, where the x value defines how much the elements width will increase or decrease relative to its original width. And the y value defines how much its height will increase or decrease relative to its original height. So back to our code editor. I'll go right here and remove this y and add two. So the width will be doubled and another two. So the height will be doubled as well. And the image should be two times bigger. Now, when I hover over the image, you can see it's getting bigger and has this nice zoom in effect. Now if I go back to our code editor and remove this second value and leave only this first value. This will scale the width and the height together. Just like if we didn't remove the second value. So if I made this point 2, 5, this should scale the image down to 25 percent of its original size. So to wrap things up, scale is one of the functions that we can use with the transform property. And it allows us to change the width of an HTML element or its height or both simultaneously. It can be scaled x, which will increase the element with if the value is greater than one, or decrease it if the value was less than one. Or it can be scaled y, which will increase the element height if it's positive, or decrease it if it's negative. And we can just use scale, which accepts two values, x and y. And we'll change the element width and height at the same time. 9. 9 - CSS rotate function: Hello everyone. In this lesson, we will learn how to rotate HTML elements in a 2D environment using the rotate function. So the rotate function accepts one value, which is the angle or the number of degrees. You want to rotate the element by, followed by DEG four degrees. So let's actually try rotating our image. I'll go right here and add transform, rotate, and let's say 20 degrees. So what this will do is it'll rotate the image 20 degrees clockwise. So when I go to the browser and hover over the image, you can see it's rotating clockwise by 20 degrees. Okay, let's go back to our code editor and try something like 90 degrees. You can see the image is now rotated by 90 degrees. Let's try 180 degrees. And now you can see the image rotates 180 degrees and flips vertically. Next, I will try 360 degrees, which will make the image rotate full circle, then return to the way it was before. Now, we can also use negative degrees for the rotate function, which will rotate HTML elements counterclockwise. So I'll go back to my code editor and change this to, let's say, minus 60 degrees. And now when I hover over the edge, it'll rotate 60 degrees counterclockwise. Great. Now, the rotate function accepts values in other units as well. For example, we can use turns to tell the element how far it should rotate. So if I go to my code editor, remove this and add one turn. And now when I go to the browser and hover over the image, it'll rotate one complete turn clockwise, which is equal to 360 degrees. And we can even use negative terms to make the element rotate counterclockwise. So for example, let's use minus 0.5 turns. And now the image is rotating a half turn counterclockwise. Another unit we can use with the rotate function is gradients. So one full circle is 400 gradients. Let's try those out. I'll go to the code editor and change this to 200 gradients. And now when I hover over the image, it should rotate a half turn like so. In the real-world, the rotate function is used with degrees most of the time, but I just wanted to let you know about these other units. So that's it for the rotate function. It's really simple. So I will see you in the next lesson. 10. 10 - CSS skew function: Hello everyone. In this lesson we will learn how to skew elements horizontally or vertically using the skew function. The skew function is like the translate and scale functions, meaning we have skew acts to skew elements horizontally and skew why the skew them vertically? Or we can just use skew. And the first value will be x, and the second one will be y. Now, skew is similar to rotate in terms of units, we use degrees to determine how much the element should be skewed. Good, now let's see how it works in action. I will go right here and add Transform Skew x, let's say 30 degrees. And now when I go to the browser and hover over the image, you can see it skews horizontally by 30 degrees. And we can change the skew direction by using negative values. So let's try that. I'll go back to my CSS and make this minus 30. And now when I hover over it, it should be skewed in the other direction. Now, let's skew the image vertically using the skew y function. I'll go back to our code editor and then change this x to y. And now when I hover over the image, you can see it skewed vertically. And to make it skew vertically in the opposite direction, we can go back and remove the minus to make it positive. And when I hover over it again, it'll skew on the other side. Now, as we said, we can skew HTML elements both horizontally and vertically at the same time using just skew, which accepts two values. The first one is for ACS and the second one is rewire. So I'll go back to my code editor and make this just skew. And then make it skew by 20 degrees horizontally and 40 degrees vertical. And now when I hover over it, you can see it's skewing in both directions. 11. 11 - CSS transform origin: Hello everyone. After finishing all the 2D transform functions in this lesson, we'll learn about a new property called transform origin. Well, transform origin is the point that a transform takes as a reference when it works. In other words, the point around which the transform is applied. So for example, here in my browser and I have two images, I've added transform rotate by 30 degrees to both of them. So when I hover over them, they should rotate by the same degree. But the difference is, I've changed the transform origin of the second image to be at the top left corner, but didn't change anything for the first one. So it only has transform rotate. Now when I hover over the first image, you can see nothing strange happens here. It just rotates 30 degrees clockwise like we saw before in the previous lesson. But now I will hover over the second image. Something interesting is happening here. The image is rotating 30 degrees clockwise, but it's pivoting on its top left corner, which is the transform origin, while the first image is rotating from its center point, which tells us that the center point is the default value of transform origin. Now, let's talk about the values that transform origin accepts. It can accept keywords as one value, like top, bottom, right, and left. So let's try that back again to our code editor. And here I have only one image. So when we hover over this image, we want to add transform and rotate it by 45 degrees, for example. And we will go up here and add transform origin top. And now when we go to the browser and hover over the image, you can see it's rotating from the top center of the image now. Okay, Next is a demo for the other keywords that transform origin excepts. So let's see how they work. First of all, we have tab. We said that it will rotate the div around the top center of the element. So exactly right here. Like so. Then we have, right. And in this case the div will rotate from the center of its right side, Exactly right here, like this. Now, I want you to pause the video and guess how all the following div, they're going to move. So pause it now. All right, So bottom of course, will make it pivot around the bottom center point right here. Like this. Then we have left, which will rotate around this point. Just like that. Then top right, which will rotate around the top right corner, then bottom right, then bottom left, and finally top-left. Now, transform origin can also accept values as percentages. We start from the top left corner of the element. So the first percentage value is X percentage. And when the X percentage is 100%, that means we start from the top left corner, then move 100% across the element with to the right, meaning we will end up in the right corner of the element. And then the Y percentage indicates how far we will move vertically relative to the height of the element. So if it's 100% is well, then we would move downward a distance equal to the height of the element. So our transform origin will end up in the bottom right corner of the element. Now, let's say we want to make the transform origin of the element at the center using the percentage method. So what we should do is put x as 50% and then y as 50 percent as well. And it should be centered. Okay, let's try this method in action. I will go right here and add transform origin, let's say 30 percent to the right and then 80% to the bottom. And then when we go to the browser, we will move 30% to the right, then 80% to the bottom. So the transform origin will be somewhere around here. Other values that transform origin accepts or pixels. So you can just say, I want it to move 50 pixels to the right and then 100 pixels towards the bottom. And this will be our transform origin point. So let's try that. I'll go right here and add 300 pixels. So that is half of the width. Next, add 150 pixels, which is half of the height right here. So now the transform origin point should be at the center. Just like that. So that's it for this lesson, everybody, and I will see you in the next one. 12. 12 - translate in 3D: Hello everyone. Welcome to this new section of the course. In this section, we will learn how to use some of the properties we talked about in the previous section. But in a 3D environment. Now, the major difference between 2D and 3D environments is the z-axis. In 2D environments, we have the x axis, which is horizontal, and the y axis, which is vertical. But in 3D, we also have the z-axis, which is perpendicular to both of them. Now, in order to create a 3D environment on a 2D plane, like the screen of our computer, we need to create something called perspective. You can think of perspective as the distance between our eyes and the computer screen. I think you'll understand it more when we see it in action. But I want you to remember that every time you want to work with a 3D environment, you need to define the perspective first. So we will start with the translate property. In the previous section, we learned how to translate or move HTML elements horizontally or vertically using the translate X and translate Y functions. And now we want to use Translate Z and see what will get. So here in my HTML, I have just an image, and I'll go right here and add transform, translate Z, let's say 300 pixels. So when I hover over the image, I want it to move 300 pixels in the z direction. But we said before we use any of the 3D transform properties, we need to create perspective. And in order to do that, we use a property called prospective and add it to the container of the HTML elements we want it to transform. In our case, the container of the image is the body. So I will target the body and add perspective. And remember we said that the perspective is the distance between our eyes, the eyes of the viewer, and the computer screen. So it accepts values in pixels. So let's say 100 pixels. And now when I go to the browser and hover over the image, you see something interesting is happening here. The image is kind getting bigger. The width and the height are increasing, just like what happened when we use the Scale property in the previous section. But actually, that is not what's happening here. What's really happening here is the image is moving towards us. So it's getting closer to our eyes. And that's why it seems larger, but its width and height haven't changed. So now you can think of the z-axis as the line drawn between two points. The first is our eyes, and the second is the screen. So when we move the element along the z-axis, it will move along this line and it will either get closer to or move away from our eyes. For example, if I go back to my code editor and change this 300 pixels to minus 300 pixels. Now, when I hover over the image, you can see it's getting smaller because it's actually moving away from our eyes. I'll go back again and remove this minus grade. So now, what is the perspective we added right here in the body? Well, before we talk about that, let's actually change it to 500 pixels and see what we get. So before I reload my browser, when I hover over the image, you can see the image is getting closer to me by 300 pixels in a perspective of 1, 0, 0, 0, 0. So I'll refresh my browser to change to a perspective of 500 pixels. And then I'll hover over the image. And you can see in this case, the image is getting much closer than the first time with this new perspective. And that is because the new perspective is smaller. The distance now between our eyes and the image is 500 pixels. So when it moves 300 pixels towards us, then it will end up 200 pixels away from our eyes. While, when we were using a perspective of one hundred, ten hundred pixels, it ended up 700 pixels from our eyes. So it seems smaller. Let's see another example. So I'll go back to my code editor and change this 300 pixels to any value bigger than the perspective, which is currently 500 pixels. So let's say 800 pixels. Now, before I hover over the image, let's imagine what will happen. The distance between the image and our eyes is 500 pixels. And we want the image to move 800 pixels towards us. So what will happen is the image will move towards us until it goes past our eyes. And we won't be able to see it because it'll be behind us, or maybe behind our eyeballs in our skulls, which sounds a little scary, but don't worry, it's safe. So when I hover over it, you can see it disappears beyond our eyes. So to wrap things up, every time we want to create a 3D environment, we have to add perspective to the element container first. And the perspective is the distance between the viewer and the screen. 13. 13 - rotate in 3D: Hello everyone. In this lesson, we will learn how to rotate elements inside a 3D environment using the Transform Rotate function. So here in our code we have our image and it's sitting here in our browser. And up here you can see we have a perspective of 500 pixels. Because remember, every time we want to use the transform properties, we need to define the perspective first. So now let's start using the rotate function. First of all, we have Rotate X, which will make the element rotate on its axis axis. Then we have rotate y, which will make it rotate on its y-axis. And finally, z, which of course will make it rotate on its z-axis. So let's start with rotate Z. I will go right here inside the image selector and I will add transform, rotate Z, let's say 120 degrees. And I will go to the browser and reload. Now before we hover over the image, we're rotate Z will do, is it will make the image rotate on its z-axis, which is like a line that passes from the screen to our eyes. So it shouldn't look any different from the rotate function we used before when we were dealing with 2D transforms. So I will hover over the image and you can see it rotates around the z-axis by 120 degrees. Good. So rotate Z actually is similar to rotate, which we learned before. Great. Next we will talk about Rotate egg. I will go right here and change, rotate Z to rotate x. And I want it to rotate by 60 degrees. And what this will do is it will make it rotate on its x axis, which is horizontal. So I will hover over the image and you can see it rotates in 3D along the horizontal axis. So for example, if I go back and change 60 degrees to 90 degrees, then go back and hover over the image. You can see the image will rotate by 90 degrees until it disappears. What's happening here is the image rotates until we can only see its edge. And since it has no thickness, it disappears. Then we have rotate y. So I will go back and change, rotate x, rotate y, and change the degrees back to 60 again. Then when I go and hover over the image, you can see it rotates on its y axis, which is vertical with time. And that's it for this lesson, everybody and I will see you in the next one. 14. 15 - creative rotating button effect: Hello everyone. In this lesson, we will learn how to create this nice effect when we hover over a button. You can see that when we hover over it, the yellow background is rotating on the bottom left corner of the link until it covers the whole thing. So let's start here in my HTML, I will just go right here and add an anchor tag. And say hover me. Then I will go to my CSS and add some styles. So first of all, I will target the body and add height 100 vh. Then I will add display, flex, justify content, center, align items center as well. So what these three lines of code will do is they will just sent her the link horizontally and vertically using Flexbox. This has nothing to do with CSS animation. And if you want to learn more about flexbox, which is a must learn for any web developer nowadays, I have a course on that here in Udemy. You can check it out if you're interested. So let's start styling our link. I will target it. Then add text decoration. None. Color. This nice black color. Font family, Sans Serif. Font size 45 pixels, border, five pixels, solid and are nice black color. Then I will add padding, 40 pixels and 80 pixels from left and right. Then I will add position relative grade. So now in order to create the nice yellow background, we will need to use the before pseudo element. And if you don't know what pseudo elements are, they just allow you to insert code before or after HTML elements. So I will say a colon before. Then I will add no content because we don't want to add text. And after that, I will add position absolute, and I will add left 0, then top 0 as well. Now we have our before pseudo element and its position is at the top-left corner of the link, right here, because we added left 0 so that it will move 0 distance from the left. Or in other words, it will just stay at the left of the link. And it will also be on the top, as we said, top to 0 as well. So right now than before, pseudo element is just a point at the top-left corner of the link. When in our example, we want it to be a yellow background that takes up the full width and height of the link. So we can do that easily by adding background-color, our yellow color, then height 100%, and width 100% as well. Good. So now you can see that the before pseudo element is appearing as the background color and taking up the full width and height of the link. Just like we wanted. But there is a problem with a yellow background is now hiding the text beneath it. So now we can't see the hover me words. This can be fixed easily by going right here and adding z-index minus1, so that the text will show up again in front of the yellow background. Great. So now if we take a look at our demo, you can see that when I hover over it with yellow background rotates clockwise from its bottom left corner until it ends up horizontally with a rotation of 0 degrees. And in order to get this effect, I will go right here and add transform origin bottom left, as the rotation is pivoting on this point, then Transform, Rotate minus 90 degrees, so that this will be the initial position and the yellow background. Then I will add transition transform 1 second. Now when I hover over the link, I wanted to make some changes to the yellow background. So I will add transform, rotate by 0 degrees, meaning returned to its original horizontal position. And now when I go and hover over the link, you can see the rotation degree is now 0. When I hover away, it returns to minus 90 degrees. So we only have one thing left to do, which is hiding the part of the yellow background outside the link. This can be done easily by going to link and just saying overflow hidden. And now we're getting the effect we wanted on our button. Now, we can use the same technique to get different results, which will look pretty nice as well. So let's try some of them. Let's say we want the yellow background to rotate from the bottom right corner, not the bottom left. This can be done by changing some of the properties we added. But first, let's go back to our CSS and remove this line of code so that we can see the yellow box outside the link. In order to make the yellow box rotate from the bottom right corner, we can just go here and change the transform origin to the bottom right instead of bottom left. So now you can see the yellow background rotates from the bottom right corner by minus 90 degrees. But now let's change this rotation to 90 degrees instead of minus 90 degrees. And now the yellow background rotates 90 degrees. Now let's go to our CSS and add overflow hidden again. And now when I hover over the link, you can see we have the same effect as before, but this time the rotation is centered on the bottom right corner, not the bottom left. Now, I have a little challenge for you. I want you to try to make the yellow background rotate around to different points. The first one is the top left corner. The second one is the top right corner. You will only need to change two values, the transform origin and the rotation angle. So try that out and tell me if you were able to do it in the Q&A section. 15. 16 - creative swipe button effect: Hello everyone. In this lesson, we will create this nice swipe hover effect. So when I hover over this link, you can see the background swipe smoothly from left to right and the color changes to white. And when I hover away, the background swipes to the left again. So let's see how we can do this. Here in my HTML, I will just add an anchor tag and just say hover me. Then I will go to my CSS and add some styles. I will target the link, and I will add some styles to make it look nicer. So I will add text decoration, none. Then color. This nice color. Font family. Sans Serif. Font size 40 pixels, border, three pixels, solid. And our color. Then padding 40 pixels from top and bottom, and 80 pixels from left and right. Then I will add position, relative, and finally, transition all 1 second. Now you can see our link is looking much nicer and we can start working on this wipe effect. So the idea behind this swipe effect is that we will create a before pseudo element that will take up the full width and height of the link. Then we will translate it outside the link. And when hovering over the link, we will remove the translation so that it returns to its place where we can see it. And this will make much more sense when we created together. So I will go right here in my CSS and add a colon before. And then I will make the content empty. Then below that, I will add position absolute, and then left 0 and top 0 as well. Then we need to make it take up the full width and height of our container. So I will add height 100%, then width 100%. And I will add a background color. Our color, of course. Then I will add z-index minus1, and I will tell you why we added this in a second. Great. So when you look at the link, you can see the before pseudo element is taking up the whole width and height of the link. And the text has sort of disappeared because it has the same color as the background, so we are not able to see it. So now we want to create this white movement from the left that can be easily done by using the translate function, which I'm sure you remember. Let's us move the elements around the screen. So I will go right here in the before pseudo element and I will add transform. Translate X minus 100%. Now I'm sure you remember that negative values, movie elements to the left and positive ones move it to the right. So now you can see the before pseudo element moved to the left by 100% of its width. And you can see the text is now appearing right here. Great. So now when hovering over the link, I want two things to happen. I wanted before pseudo element to go back to its position. And I want the color to change to white. So when hovering over the link, I want to make some changes happen to the before pseudo element. And those changes are giving it back to its position. So I will add transform translate X 0 so that it returns back to its original place. And I want this change to happen smoothly. So I will go up here in the pseudo element and add transition, oh, 1 second. So now when I go and hover over the link, you can see the background is moving smoothly from the left to its original position. One thing left to do and that is hiding the background outside the link. And this can be done simply by going to the anchor tag and adding overflow hidden. So now you can see the background is invisible outside the link anymore. And we've got the effect we want. Finally, we need to change the text color to white when hovering as well. So I will go to my CSS and when hovering over the link, I want the color to change to white. And this also will happen smoothly because we added a transition up here in the anchor tag declaration. So now when I hover over it, you can see the text color is changing too wide. Now, as for the Z index I've added right here. I did this because when I created the before pseudo element and gave it the full width and height of the link. The text was hidden behind it, meaning covered the text. So for example, if I go and remove it like so. Then hover over the link. You can see the tags will be hidden behind the background. So we added it to make the text appear in front of it so we can see it. Great. So now that we understand the concept behind this white movement, we can modify it easily to get different results. So let's say we want this white movement to be from the right side, not the left side. We can do this by changing just one line of code. So here in my CSS, I will change the Translate X for the background to 100% instead of minus 100%, so that the initial position before I hover over it will be at the right, not at the left. So when I go and hover over the link again, you can see the slight movement is now from the right side. And let's say we want the swipe to be from top to bottom. So instead of using translate x, we will use Translate Y this time. So I will change x to y, and we want it from top to bottom. So we will say minus 100% because negative values move elements upward. And again, I will change this x right here to y. And now you can see when I hover over the link, the background swipes from top to bottom. So now I want you to play around with those values and create more effects. Can feel free to share what you come up with with other students in the Q and a section. 16. 17 - creative button hover effect: Hello everyone. In this lesson we will be creating a nice hover effect. So when I hover over the link, this nice little effect should happen. All right, so let's start by going here in my HTML. In adding a link, just say hover me. Then I will go to my CSS and add some styles. I will target the link and add padding, 40 pixels from top and bottom, and 80 pixels from left and right. Then I will add font, family, Sans Serif, then text decoration, none to get rid of the underline. Then color. The sharp 2626. Font size, 45 pixels. Letter spacing. Two pixels, border five pixels, solid. And again, this color, position relative and transition 1 second. So this is how the link looks now. All right, so we'll need to use the pseudo element before. And if you don't know what that is, it just allows you to insert code before your element. We'll see how this works in a second. So I will say a colon before. And inside of that content, empty. So I don't get any text inside this pseudo element. And then position absolute 0, left, 0, width, 100%, height, 100%. So it should take the whole width and height of a link and then background color, our color transition. 1 second. So now you can see our pseudo element appears on top of the link and we're not able to see the link anymore. Great. I'm sure you remember the rotate x, rotate y functions that we learned earlier in the course. And that you remember that rotate x makes the element rotate along the x axis, while rotate y makes it rotate along the y-axis. Let's review that together. Here, I have two images and I have set the rotate x for the first one to 90 degrees when hovering over it. So let's see what will happen when I hover over it. You can see the image is rotated 90 degrees along the x axis so that we now can't see it because the part of it that's facing us now. Its edge. And I said the rotate y for the second image to 90 degrees on hovering as well. So now when I hover over it, you can see the image is rotated along the y-axis by 90 degrees until it disappeared as well. All right, Now that we've reviewed what rotate x and rotate, why do? Let's go back to our CSS. I will go right here and add rotate x 90 degrees, our pseudo element so that it will rotate by 90 degrees and will disappear just like in the image example. Great. So now what I want to do is when I hover over the link, I want to remove the rotation of the before pseudo element so that it returns right to where it was before disappearing. So I will target the link and when I hover over it, I wanted to do some changes to the before pseudo element. I want to reset the rotation around the x-axis to 0 so that it shows up again and we can see it. And because I'm using transition up here, this change in rotation should happen smoothly. So now when I hover over the link, you can see that the before pseudo element comes back and shows that nicely. Now, we need to change the text color when we hover over the link to white. So I will target the link. And when I hover over it, I want to change the color to white. And if I hover over the link now, you can see nothing happens. The text color isn't showing up. And that is because the pseudo element is appearing on top of the link and the text is lying underneath it. So what we can do is we can go right here in the pseudo element and add Z index minus one so that the text shows up in front of the pseudo element. So now when I go and hover over the link, you can see the text shows up and we have a nice hovering effect going on. Now, we try and rotate x. Let's go further and try rotate y, mix them together and see what will get. So I will copy this pseudo element, paste it again, and just change before to after. Okay, so now we have two pseudo elements. I will just change the rotate function to y. So it'll rotate along the y-axis until we can't see it anymore. And I will copy this hovering effect. Paste it again and change before to after X to Y. So that when I hover over it, the rotation along the y-axis returns back to 0. Image shows up nicely with the before pseudo element. And now when I go and hover over it, you can see the before and after pseudo elements are showing up together, giving it this really nice effect. And that is exactly what we wanted. 17. 18 - creative button stretching effect: Hello everyone. In this lesson, we will create this nice hover effect. You can see when I hover over the link, the text becomes bolder and both the letter spacing and the border thickness increase. This is an easy but nice-looking effect. So let's see how we can do it. Here in my HTML, you can see I have implemented a font from Google Fonts named Roboto in this example. So I will go right here and add an anchor tag. And I will just say button. Then I will go to my CSS to add some styles. I will target the anchor tag and add text decoration. None. Padding, 40 pixels from top and bottom, and 80 pixels from left and right. Then I will add color. This nice red color and border, three pixels, solid. And our red color. Then I will add text transform. Uppercase, font size 40 pixels. And font-family. Roboto. Then font-weight 300, which will make it a little lighter. Then letter spacing minus two pixels so that the letters will be closer to each other. And finally, transition or 0.5 seconds so that the change occurs smoothly. And now you can see the link is looking exactly like our demo. Now we need to create the effect we want on hovering. So I will target the link and on hovering, I will change the font weight to 900, so it will be much bolder. Then I will add letter spacing ten pixels so that the letters will be a little far away from each other. And then I will copy the border from up here and paste it. And I will change this to seven pixels instead of three pixels. And that's it. When I hover over the link, you can see the change is nice and smooth, just how we want. 18. 19 - creative button swipe effect from top to bottom with text: Hello everyone. In this lesson, we will create this nice swipe effect from top to bottom. And if you notice, this effect is very similar to what we created in the previous lesson. The main difference is that here we have content in the pseudo element, which is the word year. And of course there are some differences in how the buttons look, but we will use the same files from the previous example and make some changes to get this effect. So here is the HTML from the previous example, and we won't change anything in it at all. The changes will be in our CSS. So let's go to our CSS. And before doing anything else, let's just change what the link will look like. So the first thing I will do is I will add a nice dark gray background to the body. And then after that, I will make some changes to the link. So I will change the color to white. The font families, good. The font size is fine. And here I will change the border color to white as well. And that's it for the link itself. Now, we need to add it the before pseudo element. So in this example, we need to add content right here. So I will type year and I will add color white. And I will also change the background color to this red color. And now when I hover over the link, you can see the word year appears behind the link text. This happens because the z-index is set to minus one right here. So I will remove this. And now when I hover over the link, you can see the word yeah, appears in front of the button. Great, so now we need to center our word in the background. This is very easy using Flexbox. So I will just go right here and add display flex so that we control anything that's in this pseudo element using Flexbox. And I will add align items center to center the content vertically and justify-content center as well to center it horizontally. So now when I hover over the button, you can see the word is now perfectly centered inside the pseudo element. 19. 20 - creative button glowing effect: Hello everyone. In this lesson, we will create this effect when hovering over a button. So let's view that in our slower demo to see what exactly is going on, I will hover over the link. And you can see that the background color is changing to some red color. And there is a thick white line that is tilted at a 45 degree angle and it's passing across the link. At the same time the background color changes. Cool, right? So let's see how we can do this. First of all, I will go to my HTML and I will add an anchor tag. And just say hovering me. Then I will go to my CSS to add some styles. I will add a dark gray background to the body. Then below that, I will target the anchor tag and add text decoration. None. Then color, white. Font family. Sans Serif. Font size 40 pixels. Border, three pixels. Solid white. Padding. 40 pixels from the top and bottom, and 80 pixels from the left and right. Then I will add transition 0, 0, 3 seconds position relative. And next, let's make the background color change to red when hovering over the link. So I will go right here and say a. And on hovering. I will change the background color to our red color. And now when I hover over the link, you can see that the background color changes to read. Good. Now we want to create a thick white line that crosses the link. And we will use the before pseudo element for that. So I will go to my CSS and say a colon before. And I will make the content empty. Then I will make the background color white. Then I will say top 0, left 0 as well. Then width 100%, and height 50 pixels, then position absolute. And then when we take a look at it, you can see it's got a white background taking up the full width of the link and having a high of 50 pixels. Now, we want to move it to the left outside the link so that when I hover over it, it moves from left to right. So I will go right here and add transform, translate X minus 100%. And now you can see it's translated outside the link to the left by a distance equal to 100% of its width. Next, I want to rotate it by 45 degrees because it's rotated and I demo. So I will go right here and add another transform function which is rotate 45 degrees. And now you can see it's rotated. Good. Now we want to make it move to the right all the way across the link when we hover over it. And this can be done, no problem. So I will go to my CSS and we're hovering over the link. I want to make some changes happened to the before pseudo element. I will add transform translate X 100% so that it moves to the right by 100% of its width. Then rotate 45 degrees. So it will stay rotated during the movement. And now when I hover over the link, you can see the before pseudo element is moving from left to right passing across the link. But we still have a small problem. And that is getting rid of the pseudo element outside the link. We can fix that no problem by going to the anchor tag selector and adding overflow hidden so that anything outside it will be hidden. And now when I hover over the link, you can see we are getting the exact effect we want. 20. 22 - creative two layers swapping button effect: Hello everyone. In this lesson, we are going to create this nice hover effect. We will be using both the before and the after pseudo elements in this example. So let's see how we can do that. Well, first of all, I will start right here in the HTML, and I will add an anchor tag. And just say hover me. Then we need to go to our CSS and add some styles. So I will target the anchor tag. Then I will add text, decoration. None. Background color. This nice dark gray color. Font-family. San Serif. Font size 40 pixels, border. For pixels, solid and dark gray color. Then I will add padding, 40 pixels from top and bottom and 80 pixels from left and right. And finally, I will add position relative. Good. Now let's start work on the before and after pseudo elements. I will create the before pseudo elements for our link. And I will say content. Then the words hover me, then position absolute, top, 0, left, 0, height, 100%, width, 100% as well. Then background color. This nice yellow color. Then color our dark gray color. And now we need to center the content inside of it. And we will do that using Flexbox. So I will add display flex, then justify content center in order to center it horizontally. Then align items center as well in order to ascend to the content vertically. And finally, I will go and add transition or 0.5 seconds gray. So now we have the before pseudo element with this yellow background set on top of our link. Now let's work on the after pseudo element. I will just copy all of that. Paste it again. And I will change before to after. And now the after 0 element is sitting on top of the before one. Okay? I will just go right here in the after pseudo element and I will add transform translate. And I want to translate it by minus 100% horizontally. So it will move to the left. And I will translate it by 100% vertically. So it will move to the bottom. So now it should move 100% of its width to the left and 100% of its height to the bottom. Just like we see here. Grid. Now we have the before pseudo elements sitting on top of the link. And the after pseudo element is in its new position. Let's keep moving on hovering. I want to before a pseudo element to move to the top right corner outside the link. And I want the after pseudo element to take its place. This is easy to do. So I will just go right here. And when I hover over the link, I want to make some changes happen to the before pseudo element. I will add transform translate. I wanted to move to the right. So I will add 100% of its width to the right. And I want it to move to the top. So I will add minus 100% of its height to the top. And just like that, when I hover over the link, you can see the before pseudo element moves to this new position. Now, we want to make the after pseudo element take its place. This will be very easy to do. I will just copy that and change before to after. Then I will make both the Translate X and the translate y 0 so that it will return to its original position. And now when I hover over the link, you can see the before pseudo element leaves its place for the after pseudo element. Now, if you notice, you can see we still have the blue color of the link behind the before pseudo element. And it appears when we hover. So we can get rid of that. No problem by just going back to the links, the lecture and adding color transparent so that it will disappear. And I will add overflow hidden so that the elements don't appear outside the link. And now when we hover over the link, you can see it all looks exactly how we hoped. 21. 21 - creative text scaling button effect: Hello everyone. Welcome to this lesson of the course. In this lesson, we will create this nice hover effect and we will use the before pseudo element to create it. So let's see how we can do that. I will start here in my HTML by adding a link. And I will just say hover me. Then I will go to my CSS to add some styles. I will target the link. Then I will add text, decoration. None. Color. This nice dark gray color. Font family. Sans serif. Font size 40 pixels, border, three pixels, solid. And our dark gray color. Then I will add padding, 40 pixels from top and bottom, and 80 pixels from left and right. Then I will add transition or 0.5 seconds. And finally, position relative. And now our link is looking much better. Good. Now we will use the before pseudo element to create our effect. So I will go right here and add a colon before. And I will add content. Hover me. Then position absolute, top, 0, left 0, then height, 100%, width, 100% as well. So it takes up the full width and height of the link. Then I will add background color, our dark gray color. And finally, color white. And now you can see the before pseudo element is set on top of the link with its dark gray background color. So now we want to center the content inside the before pseudo element, and we will use flexbox to do that. So I will go right here and add display. Flex, then justify content and align items center as well. Great, So next we'll do some work on our affect. The idea behind it is we will make this dark gray background scale up to about five times its original size. So it will be very huge. And we will make its opacity 0 so that it will be transparent. And when we hover over the link, we will make it scale back to one again, and the opacity will change to 1 as well, so it will be visible. Let's do that. I will go right here inside the before pseudo element, and I will add transform scale five times. And you can see it's scaled to five times its size and it's huge. Now, I want it to be hidden outside the link. So I will go right here inside the links selector. And I will add overflow hidden. And now you can see the parts of the before pseudo element outside the link or hidden. Awesome, Let's keep going. Now. We need to make them before pseudo element transparent. So I will go right here and add opacity 0. And now you can see it's hidden. Then I will add transition, all zeros, five seconds. Now I'm hovering. We want to make the scale of the pseudo element one again. And we also want to make it visible by making me opacity one. So let's do that. I will add a colon, hover, colon before. And inside of it, I will add transform, scale one, then opacity one. And now when I go and hover over the link, you can see the before pseudo element appears and scales down to its original size, giving us the effect we wanted. 22. 22 - creative circular swapping button effect: Hello everyone. Welcome to this new lesson in the course. In this lesson we're going to create this great looking button hover effect. So you can see when I hover over the button, a red background fills in the button from the top to the bottom. So let's figure out how we can do that. First, I will go rank here in my HTML and add a button and give it a class of btn. And I will just say button. Then I will go to my CSS to add some styles to this button. I will start by targeting the button using the class we added. And I will continue by adding a border, two pixels, solid. And now we'll use the color tomato. Then I will remove the background by adding background. None. Then we will add color. Tomato again for the text. Then padding 20 pixels from top and bottom and 40 pixels from left and right. Then we need to increase the font size a little bit. So I will add font-size 25 pixels. Then text transform uppercase cursor pointer to make the cursor convert to a hand would hovering over the button. Then transition or 0.5 seconds because we will change the color of the text when we hover over the button. And we need that to happen smoothly. Now, right? Now we have our button sitting here and it looks awesome already. So let's work on the hovering effect. We will use the before pseudo element to create the red background. So I will go right here and I will say BTN colon before. Then inside of it, I will add content empty because we don't want any text or anything like that. Then position absolute, top, 0, left, 0, width, 100%, height, 100%. And we will add background, tomato. Alright, so here you can see the red background is sitting on top of the button, taking up the full width and height of the button. And it's hiding the text below it. So let's fix that by going right here inside the red background and adding Z index minus one. Now the button is sitting on top of the red background, but we can't see it now because it has the same color as the background. So if we go up here inside the button selector and change the color to white, for example. You can see the text now shows up. All right, Let's set it back to tomato again. Now, let's continue working on the red background. If we go to our demo and take a quick look, you can see that I'm hovering. The red background gets a border-radius from the bottom left and bottom right corners. So let's go back and add that to our button. I will go right here inside the before pseudo element. And I will add border radius 0, 050%, and 50 percent. So 0 from the top left and top right corners, because we don't want any curves on those. And 50 percent from the bottom left and bottom right. And here you can see the red background now has those curves at the bottom. Cool. Now let's work on the hovering effect. What we will do is we will set the height of the red background to 0. Then on hovering over the button, we will make its height increase so it fills in and covers the button. So let's take care of that. I will go right here inside the red background, and I will make the height 0% instead of 100%. So now you can see the red background is not visible anymore. Then we will go here and say BTN on hover colon before. And we will make the height 100% again. Then in order to make this change in height happens smoothly, I will go up here and add transition 0, 0, 0.5 seconds. Good. So now when I go and hover over the button, you can see the red background height becomes 100% again. But of course, because of the border radius we added to it, It's not covering the whole button. So we need to increase its height and make it more than 100% on hovering. So let's go here and change this 100% to, let's say 190%. And now when I go and hover again over the button, you can see the red background covers the button. But because its height is now 100% of the buttons site, it's overflowing. We can take care of that. No problem by going in right here inside the button selector and adding overflow hidden to prevent any overflowing from the button. Awesome, Now it's looking exactly the way we want. But we have one thing left, which is making the text color change to white when hovering over the button. So I will go right here and add btn. And on hover. I will add color, white. Excellent. Now you can see we have the same effect we want, and it looks great. Now that we've learned the concept or the idea behind all this, we can manipulate this effect and make it happen from a different direction, from bottom to top for example. So all we will need to do is change tab right here to bottom so that it will grow upward or fill in from the bottom map for tab. And in this case, we will also need to change the border radius and put the curves on the top rate and top-left corners. So we will say 50 percent and 50 percent here instead of 00. And that's all we need to do. Now the effect happens from the top to the bottom. Just like that. 23. 23 - creative rotating 3 layers button effect: Hello everyone. In this lesson we will create this button hover effect. So when I hover over the button, you can see we have this effect where first a green background covers the button and then a red one covers them all. So let's figure this one out and make it. I will start here in my HTML by adding an anchor tag and just say button. Then I will go to my CSS to add some styles. I will target the link. Add padding, 20 pixels from top and bottom, and 40 pixels from left and right. Then I will add text decoration. None. Text transform. Uppercase, background color, a yellow color, then color white. And we want the font-size to be a little bit bigger. So I will add font-size 20 pixels. We also want some spacing between the letters. So I will add letter spacing to pixels. And finally, position relative. Now our button is looking much better. Next, we want to create the green background that covers the button when we hover over it. So I will go right here and create a before pseudo element for our anchor tag. And inside of it, I will add Content. Button, position, absolute, top, 0, left 0. And because it has the same width and height as the button, we will add width 100% and height 100%. Then we will add background color. This green color. There we go. The green background is now sitting right above our button. Next, we need to center this text horizontally and vertically inside the button. And we will do that using Flexbox. So I will go right here and add display. Flex. Then justify content center to center it horizontally. And align items center as well to center it vertically. Alright, in order to make the effect we want, we will use the rotate function, which will allow us to rotate the green background on its x axis. So let's review what the rotate x function can do for us. I will go right here and add Transform. Rotate X 60 degrees. So you can see the green background is now rotated along its horizontal axis by 60 degrees. And it's doing this from its center point. Because remember, the transform origin is center by default, meaning any transform action that you will do on the element will take the center point as a reference. But in this situation, we want to change that. We want the green background to rotate on its top center point. So I will go right here and add transform origin top. And now you can see it's taking the top center point as a reference when rotating. Good. Now that we reviewed how the rotate x function works, I will rotate the green background by 270 degrees, not 60 degrees. So I will change this 60 to 270. Now you can see it's not visible anymore as it's now been rotated and sits behind the button. Now I'm hovering over the link. I will make it so the Rotate resets to 0 again so that it will cover the button. So I will go right here. And when hovering over the anchor tag, I will make some changes happen to the before pseudo element. I will add Transform, Rotate X 0. Then we want this to happen smoothly. So I will go up here and add transition, all 0.5 seconds. And now when I go and hover over the button, you can see the green background rotates and covers the button the way we want. Cool. Now, after creating the green background, we wanted, it's time to create the red one. This will be pretty easy. We just copy all of the before pseudo element. Paste it again. And we will just change the background color to red. And we want it to rotate after the green one. So we will add transition delay 0.25 seconds. Then I will go down here. And I will copy this and change before to after. So that when we hover over the button, the red background will appear as well. So now when I go and hover over the button, you can see the green background appears. And then after that, the red one does two, giving us the effect we want. And we can easily change this effect if we want. So for example, let's say I want the red background to rotate on its bottom center point, not the top. What we can do is we can simply go and change the transform origin here on the red background to bottom instead of tab. And as you can see, this makes it rotate on its bottom edge, giving us a different effect. 24. 25 - creative layers swapping from left to right button effect: Hello everyone. Welcome to this new lesson in the course where we are going to create this nice hovering effect over this button. So if we take a close look at the background that vanishes to the rank here, you can see four things are going on at the same time, it moves to the right while rotating on its y-axis, its opacity is decreasing and its size is getting smaller all at the same time. Meanwhile, the background that comes in has a reverse effect. The opacity increases in. It also gets bigger, rotating to the right to take the first backgrounds place. Well, that may sound confusing, but I promise you, you will find it easy once we start creating it. So let's actually do that. I will go right here in my HTML and I will add an anchor tag and just say button. Then I will go to my CSS to style that. I will target the link. Then I will add padding, 20 pixels from top and bottom, and 40 pixels from left and right. Then I will add text transform. Uppercase. Text decoration. None. Letter spacing. For pixels. Color. This yellow color. Border. Three pixels, solid. And our yellow color. The font size, 30 pixels. And finally, position. Relative. Good. Now you can see we have our button and it's looking pretty good. Next we need to create the background that vanishes to the right and the one that takes its place. We will start with the one advantages and we will create it using the before pseudo element. So I will go right here and say a colon before. And inside it, I will add Content button because we wanted to have the word button then position absolute, top 0, left 0. And because it takes the same width and height as the original button, I will add width 100% and height 100%. Then I will add a background color. This dark gray color, then color our yellow color. Awesome. Now you can see we have the dark gray background and it's set on top of the button taking up the full width and height. But you can see the word button isn't horizontally and vertically centered. So let's take care of that. We will center it using Flexbox. So I will go right here and add display flex, then justify content center to center it horizontally. And align items center as well to center it vertically, Of course. All right, There we go. Next, we need to work on the hover effect. If you remember, this background should move to the right, rotate around the y-axis, gets smaller and be transparent all at the same time. So let's do that. I will go right here and I will say a colon hover. I want to make some changes happened to the before pseudo element. I will add left 100%. And in order to make this change in position happens smoothly, I will go up here inside the before pseudo element and I will add transition, all 0.5 seconds. So now when we go and hover over the button, the dark gray background should move to the right, like so. And in order to make it get smaller and rotate on its y-axis, I will go here and add transform scale 0 to make it get smaller until it vanishes. And rotate y 360 degrees to make it rotate on its y-axis. So now when I go to the browser and hover over the button, you can see it rotates in vanishes while moving to the right, giving us this nice effect. And in order to make its opacity decreases, well, we can go here and add opacity 0. And there we go. Here is the exact effect we want on the first background. Next we will work on the second background that comes from the left to the right. We will use the after pseudo element in this case. So I will copy all of that, paste it, and change before to after. Then we need its original position to be on the left. So we will change left, right here to minus 100%. Now you can see it sits on the left side of our button. So we wanna make it invisible and we will make it so that when we hover over it, it will be visible and moved to the right and rotate. So basically, we are going to reverse what we did on the first one. So in order to do that, I will go right here and add transform, scale 0 and rotate y 0 degrees as well. We will also add opacity 0. And now on hovering over the link, we will add some changes to the after pseudo element. We will add left 0 to position it on top of our link. And we will add transform, scale one and rotate. Why? 360 degrees to make it get bigger and rotate at the same time. We will also add opacity one to make it show up and have this nice fade in effect. So now let's go and hover over the button and you can see the first background moves to the right and the second one takes its place. But we want to make the text invisible. We don't want the word button to appear on the button itself. So I will go back to the link selector and I will change the color to transparent instead of this color. And now you can see the color is invisible anymore. And we have the exact effect we want. 25. 26 - creative 3 circles to background button effect: Hello everyone, welcome to this new lesson in the CSS animations course. In this lesson, we're going to create this nice little button hover effect. So you can see when I hover over the link, three circles come in to cover up the link. Then a background appears from behind them and covers the whole link, completing the whole effect. So let's see how we can do that. I will start here in my HTML by adding a link. And inside it, I will add a span and leave it empty. We will see why we need this band leader in the lesson. Then I will just say, hover me. Right now. I will go to my CSS. I will target the link and add width 220 pixels, height 80 pixels. Okay, Now I will add color. This yellow color. Background color, transparent, since we don't want any background color. Font size, 26 pixels, text-decoration. None to remove the underlines. Text transform. Uppercase to make all the letters capital. Then in order to center the text horizontally and vertically, we will add text-align, center, and line height. 80 pixels. Cool. Now finally, I will add transition. All five seconds. And position. Relative. Awesome. Now let's work on creating the circles that come in from the left and right. When we hover over the link, we will use the before and after pseudo elements to make them. So I will go right here and I will say a colon before, then comma and a colon after. And inside that, I will add content. Empty strings. Position, absolute. Top, 50 percent. Width, 20 pixels, height, 20 pixels as well. Background color, our yellow color. And in order to make them circles, I will add border-radius, 50 percent. Alright, so now you can see we have the two circles. The one on the left is the before pseudo element and the one on the right is the after pseudo element. And because we said they're top property to 50 percent, their top edge sits at 50 percent from the top of the link. But we want their center point to be at 50 percent from the top of the link, not their top edges. So what we can do is we can translate them toward the top by half their height. This will shift them a little towards the top and will sinter them properly. So I will go back to my CSS and inside the before and after pseudo elements, I will add transform, translate Y. In order to shift them towards the top, I will add minus 50 percent. And finally, I will add a transition, all 0.3 seconds. So now you can see the before and after circles are perfectly centered vertically inside the link. But you can also see that they are looking so good that before pseudo element is covering the letter H and the after element is nearly touching the letter E. And this is because specify any horizontal position for them. So they're just sitting before and after the text of the link. So let's set a horizontal position for them. I will target the before pseudo element alone. And I will add left 0. This will position in, on the left side of the link itself, not the text inside the link. Like so. Then I will target the afternoon and add write 0 as well. And this will position the after circle at the right of the length this time. All right, now, if you remember, when we hovered over the link, there were three circles, not too bad. Actually there are four, but two of them sit one on top of the other and appear as one circle. We'll see how to do that. In order to make the other two circles, we will use the box shadow property, which allows us to add a shadow to HTML elements. So let's see how we can create circles identical to the ones we already have using the box shadow property. First, I will start with the before pseudo element. I will go right here and add box-shadow. And the box-shadow accepts four values. The first value is the horizontal distance between the element and the shadow we're adding. So if we add 10 pixels, the shadow will be 10 pixels from the element to the right. I want the shadow to be 100 pixels from the before pseudo element to the left. So I will add minus 100 pixels next, the second value of the box-shadow property is the vertical distance between the element and the shadow. And we want the element and the shadow to be on the same plane. So we will set the vertical distance to 0. The third value of the box shadow property is how blurry the shadow will be. But we actually don't want ours to be blurry. We want it to be as sharp as the before pseudo element, so we will set it to 0 as well. And finally, the last value of the box-shadow property is the color of the shadow. Let's set it to green for now. So now when I go and reload the page, you can see a new green circle has appeared to the left of the before pseudo element. And the horizontal distance between them is 100 pixels, while the vertical distance is 0. So they sit level with each other. And you can see it's sharp because we set the blur value for it to 0. All right, I will do the same for the after pseudo element, but this time I will make the shadow sit on the right. So I will copy this box. Shadow property. Paste it inside the after pseudo element and chain minus1 100 pixels to 100 pixels. So it will be on the right, not on the left. And I will also change the color to blue. Cool. So now we have four circles. The two on the left are there before pseudo element and its shadow, while the two on the right are the after pseudo element and its shadow. Now, let's work on the hover effect. I will go right here and say a colon, hover colon before. I will add left 50%. So this will make the before pseudo element moved to the right by 50% of the length width and its shadow will of course, move with it. So now if I hover over the link, you can see the before pseudo element moves along with its shadow. But when hovering, we don't want that shadow to maintain the same distance of 100 pixels from the left side. We want it to move over to the right side by, let's say 30 pixels. We can handle that really easily by going right here and adding box shadow, 30 pixels instead of minus 100, then 0, 0, and green. So now when I hover over the link, you can see the green shadow now moves to the right of the before pseudo elements circle by 30 pixels. All right, let's do the same for the after pseudo element. I will copy this entire block of code, paste it, and change before to after. Then I will change left to right. So it will move to the left by 50% of the link widths along with its blue shadow. But then we want the shadow to move to the elements left side by 30 pixels. So we will change 30 pixels here to minus 30 pixels, and finally, green to blue. And now when I hover over the link, you can see the after circle is moving to the left and it's blue shadow is moving as well until it reaches a point to the left of the element by 30 pixels. Awesome. We almost have the effect you're going for. But there's one thing left. We want the before and after pseudo elements to end up in the same position so that they will be displayed one on top of the other and appear as one circle, leaving us with only three circles. You see when I said left to 50 percent here, it means that the before pseudo element will move until its left edge is exactly at 50 percent. But we don't want that. We want it centered to be exactly at the 50 percent of the link widths. So what we can do is we can translate it back to the left by half of its width. So I will go right here and add transform, translate x minus 50%. And because we set translate y above here, to minus 50% is well, we need to tell the browser that we want it to stay minus 50%. So I will go down again and add Translate Y minus 50% Then I will do the same for the after pseudo element. I will shift it back to the right by half of its width so that it will be at the same position as the before one. So I will add transform translate X 50 percent, which will shift it to the right by 50% of its width and translate y minus 50%. So now when I go and hover over the link, you can see the before and after pseudo elements are now sitting one on top of the other and have become one circle. Now, let's go and change the color of the shadow circles to yellow as well. Alright, now we will work on the yellow background. I will use the span we added inside our link to create it. So I will target the span at position absolute, top, 0, left, 0, width, 100%, height, 100% as well. And background-color. Our yellow color. And border radius, eight pixels. So now you can see the yellow background sits on top of the link and is covering it up. So let's keep going. I will go back here and add transform, scale 0, transition 0.3 seconds. Then I will go down here. And when hovering over the link, I will make some changes happen to the span. I will add transform scale one so that it will get bigger again. And then transition delay 0.4 seconds. So it will wait until the circles come in. So now when I go and hover over the link, you can see the yellow background gets bigger after the circles finished moving. Now, let's change the link color on hovering. I will go back here and say a on hovering. And I will add color. This dark gray color and transition delay, 0.4 seconds as well. So now you can see when I hover, nothing happens because the yellow background is covering up the text. So what we can do is we can go up here inside the span selector and add z-index minus1 to make the text appear in front of the background. And we will also do that for the before and after pseudo elements. So now when we hover, you can see the text now appears in front of the yellow background. And finally, one thing left eye will go right here inside the before and after pseudo elements selector. And I will add opacity 0. Then when hovering over the link, I will make their opacity go to one again. So now they've disappeared. But when I go and hover over the link, they appear again. Then the yellow background appears after them, giving us exactly the effect we want. 26. 27 - creative button hover effect: Hello everyone, welcome to this new lesson in the CSS animations course. In this lesson, we're going to create this nice looking button hover effect. So if you take a look at the button and you can see that there are two backgrounds here, the blue one and the red one. The blue one is shifted a little towards the top left, while the red one is shifted towards the bottom rate. And when hovering over the link, you can see both a rotated in a 3D perspective on the x axis. So let's create that together. I will start here in my HTML by adding an anchor tag. And I will just say button hover effect. Then I will go to my CSS. And I will target the anchor tag and add width. 300 pixels. Height, 60 pixels. Text decoration. None. Text transform. Uppercase, background. Transparent because we will use the before and after pseudo elements to create our backgrounds. Then in order to center the text inside the link horizontally and vertically, I will say text align, center and line height. 60 pixels. Still more to do so, I will add font-weight, bold, letter spacing to pixels, then position, relative. And finally transition or 0.2 seconds. Cool. So now we've finished designing our button. Let's work on creating the two backgrounds. I will go right here and say a colon before. And I will add content. Empty strings. Position absolute, top, 0, left 0. And we want the background to have the same width and height as the link. So I will add width, 100%. Height. Then background color. This nice light blue color. So now you can see the blue background is taking up the whole width and height of the link and covering it up. So let's go back and make the text of the link visible. I will do that by going right here and adding z-index minus 1. All right, now, if you remember, the blue background was shifted a little to the top left corner of our link. Let's do that. I will go right here and change the top value to minus three pixels instead of 0, so that it will be shifted a little to the top. And I will change left to minus three pixels as well. So it will be shifted to the left. Cool. Now let's create the red background. I will copy all of this. Paste it again and change before to after. Then we want it to be shifted to the bottom and the right. So instead of left minus three pixels, I'll change it to three pixels and top 23 pixels as well. Then I will change the background color, of course, to this light red color. And now you can see the red background is sitting on top of the blue one and covering it. But we want them to be blended within each other. We can do that easily by going back to the before selector and adding mix, blend mode, multiply. And we will do the same for the after pseudo element. And let's actually change the color of the link to white instead of this ugly blue color. So now you can see the two backgrounds are blended together and looking much nicer. And now we need to work on the hovering effect. On hovering over the link. We want the two backgrounds to rotate on the x-axis in a 3D environment. So to do that, I will go right here and say a colon hover. A colon before. And first we will move the blue background to the top by six pixels and change its left value to 0. So I will add top minus six pixels left 0. Then I will add transform. And because we want the rotation to happen in a 3D environment, I will add perspective 10000, then rotate x 75 degrees. And to make the movement happens smoothly, I will go up inside the before pseudo element selector and I will add transition 0, 0.2 seconds. And now you can see when I hover over the link, you can see the blue background is rotating in a 3D environment on the x axis, but this isn't the effect we want. It's rotating on its center point, so it covers up the tags, but we want it to rotate on its top center point. So I will go back to the before pseudo element selector and I will add transform origin top. So now when I go back and hover, you can see the blue background is rotating on the x-axis the way we want. Now, let's do the same thing for the red background. I will copy this, paste it, and change before to after. Then top to six pixels instead of minus 6 and rotate x to minus 75 degrees because we want it to rotate the other way. And in order for the movement to happen smoothly, I will go inside the after pseudo element and add transition, all zeros. And finally, in order to make the background rotate on its bottom center point, I will add transform origin bottom. And now when I go to the link and hover, you can see the two backgrounds rotate on the x-axis, giving us the effect we want. Now, one thing left on hovering over the link. We want to change its color so we can see it. I will go back to my CSS and say a colon hover color, this dark gray color. And now you can see we're finally getting exactly the effect we're going for. And that is very nice. 27. 28 - creative splitted button effect: Hello everyone, welcome to this new lesson in the CSS animations course. In this lesson, we're going to create this button hover effect. You can see when I hover over the button, these four parts with a yellow background come in and cover the button. Same time, giving us this nice effect. We will use the before and after pseudo elements to create these four parts and we will add a different position for each part. Then when we hover over the link, the four parts will move together to cover the link and give us the nice effect. We will also play around a little bit and change things in our code to get some more cool effects with the same idea. So let's start doing that. I will start here in my HTML by adding an anchor tag. Then inside of it, I will add a span. And just say hover me. We added a span here inside the anchor tag because we want to create four parts of the yellow background that will cover up the button. So we will create two of them using the before and after pseudo element of the anchor tag itself. And the other two will be created using the before and after pseudo elements of the span we just added. Okay, let's go to our CSS to start creating the effect we want. I will start by targeting the anchor tag itself to make it look the way we want. And I will add text decoration. None. Text transform. Uppercase. Font size, 25 pixels. Color. This nice yellow color. Letter spacing three pixels to get some spaces between the letters. Then padding 25 pixels from top and bottom, and 50 pixels from left and right, then border three pixels, solid. And our yellow color. So you can see our button is looking much nicer. Let's keep going. I will go back inside the link and add transition 0, 0, 0.5 seconds. And finally, position relative. Alright, now we will work on the four parts of the yellow background that come in and cover up the link. When we hover over it, we will create the first two using the before and after pseudo elements of the anchor tag itself. So I will go right here and say a colon before. Then, I will add comma. And say a colon after. And I will add content. Empty strings, position, absolute width, 25 percent. So the width of each part will be 25 percent of the anchor tag. And this makes sense because when combining all of the four parts, they will be 100% of the length, width, and they will cover it up completely. Then we will add height, 100%. Background color, our yellow color. And in order to make the text appear on top of the background, we will add z-index negative one. And finally, we will add transition 0, 0.5 seconds. So now you can see we have the two parts, but we will change their position now and give them the initial position that they should have before hovering. So let's do that. I will target only the before pseudo element this time. So I will add a colon before. And inside of it, I will add top 0 and left negative 25 percent. So now you can see the before pseudo element moved to the left of our link, and this is the position we want it to be in initially. Let's also change the position of the after pseudo element. We will go back to our CSS and targeted by adding a colon after. And we will say top negative 100% and left 25 percent. So now you can see the after pseudo element is sitting on top of the button because we moved it by 100% of the button height to the top. And now it sits at 25 percent of the button width from the left as well. Now, when we hover over the link, we want them to move from their position to a position that will make them cover half of our button until we create the other two parts. So I will go here and say when hovering over the link, I want to make some changes happened to the before pseudo element. I will add tab 0 and left 0. So now you can see when we hover over the link there before pseudo element moves to cover the first quarter of the button. Because we said left to 0 and top is already 0. Okay, let's work on the second part. I will go back and say when we hover over the link, I want to make some changes happen to be after pseudo element, I will change to 0 instead of negative 100%, so that it will move downward until it covers up the button. And leave, left as it is, 25 percent. So now when I go and hover over the button, you can see the second part moves downward, covering up the next quarter beside the first part. And together they're covering half of the button. Alright, now we want to create the remaining two parts, and we will create them using the before and after pseudo elements as well. But this time they will be the before and after pseudo elements of the span we added inside the anchor tag. So I will go to my CSS and go right here. Add a new comma and add span colon before another comma and span colon after. We added them right here, because they will have the same width and height as the other two parts. We only thing that will change is the position. So now when I go and reload, you can see we have the two parts, but let's change their position. I will go back to my CSS and say a span colon before. And I will add top 100%. So it will sit below the button and write 25 percent. So it will sit at 25 percent of the button width from the right. So you can see the third part is sitting in the position we want it to. And when hovering over the link, we want to change its position to make it cover up the third part of the button. So I will go back to my CSS and say a on hovering span colon before. And I will add top 0 to make it move upward and write 25 percent as it is. So now when I go and hover over the link, you can see the third part moves upward, covering the third part of the button. Cool. Now let's work on the fourth part. I will go here in my CSS and add a span colon after. And I will add top 0 and write negative 25 percent. So this fourth part will be initially selling on the right of the button, like so. All right, let's work on the hovering effect. I will go right here and say a uncovering span colon after. And I will add top 0 and write 0 as well. So now when I go and hover over the link, you can see the four parts move from their initial positions to their new positions and cover up the button together. But we now need to change the color of the text on hovering. So I will go back to my CSS and say a on hovering. I want the color to change to this dark gray color. And also in order to hide the parts outside of the button. I will go up here inside the anchor tag selector. And I will add overflow hidden. So now you can see when we hover over the button, the four parts come in and cover it up completely, and the text color changes to gray, giving us the effect we want. Now, let's create another cool effect with minor changes in our code. First, I will go up here again inside the anchor tag selector and remove the overflow hidden for now so that we can see what we're doing. Then I will go to the first part of the four parts, which is the before pseudo element of the anchor tag. And I will change the top property to 100% instead of 0 and the left to 0 instead of negative 25 percent. So now you can see here it has a new position below the button. Then I will go to the fourth part, represented by the after pseudo element of the span. And I will change to negative 100% instead of 0 and right to 0 instead of negative 25 percent. And here it has a new position above the button. Then I will go again inside the anchor tag selector and add overflow hidden. And now when I hover over the link, you can see we have a slightly different effect when we had before. And it looks tanks as well. I also want to add something. I think it'll be nice if we add some transition delays to the four parts so that they will appear one after the other. So we want the first part to appear immediately. I will go right here and add transition delay 0.1 seconds. Then to the third part, I will add transition delay 0.2 seconds. And two, the fourth part, I will add transition delay 0.3 seconds. And finally, let's go up here and change the transition duration to 0.2 seconds so that it will be a little bit faster. So now you can see when I go and hover over the link, the four parts appear one after the other, giving us this really cool effect. 28. 29 - creative border swapping button effect: Hello everyone, welcome to this new lesson in the CSS animations, transitions, and transforms course. In this lesson, we're going to create this nice button hover effect. You can see our button has for long borders around it. They don't have the same height or width as the button. Instead, the borders on the left and right have larger heights and the borders on the top and bottoms have larger widths. We will learn how to do that. Another thing is the borders at the top and left have a red color, while the borders on the bottom and write have a yellow color, as you can see. And when we hover over the button, you can see the borders exchange places. The top red border moves to the bottom and the bottom yellow one moves to the top, taking its place. While the red left border moves to the right. And the yellow right border moves to the left. So they're just changing positions. So let's see how we can create this effect. First of all, I will go to my HTML and add an anchor tag. And just say hover me. Then I will go to my CSS to style it. I will target the anchor tag, and I will start by adding text decoration, none to remove the underlines. Then I will add text transform uppercase to make all the letters capitals. Then font size, 22 pixels to make the text a little bit bigger so that we can see it. And font family. Verdana letter spacing, three pixels to have some spacing between the letters. Okay, Now I will add height, 80 pixels, width 200 pixels. And in order to center the text horizontally and vertically, we will add line height, 60 pixels to center it vertically. And text align center to center it horizontally. And let's change the text color. We will go here and add color, this nice yellow color. Then finally, I will add position relative. Cool. Now, in order to see what we're doing, Let's add a temporary border to our button. I will go right here and add border. Two pixels, solid blue. Okay, so now we want to work on the long borders we saw in our demo and figure out how to create them. We will work step-by-step together in order to understand how they're created. First of all, to create the left and right borders, I will use the before pseudo element. I will just go right here and say a colon before. And I will add content. Empty string, position, absolute height, 60 pixels, width, 200 pixels, top 0 and left 0 as well. Notice those are the same width and height of our link. So until now the before pseudo element has exactly the same size as the link and it's sitting on top of it. Okay, We said that we will use the before pseudo elements to create the left and right borders. So I will add border, left, two pixels, solid, red. And border right. Two pixels solid. Our yellow color. So now you can see we have a new left red border and then new right yellow one. And we can hardly see them because they're sitting on top of the original blue border that surrounds the button. And that is because the before pseudo element has the same height and width as the button. So in order to make these two new borders longer, Let's change the height of the before pseudo element. Let's change it to 90 pixels, for example. And now you can see the left and right borders are now longer and extending past the button height because they're surrounding the before pseudo element, which has a height of 90 pixels, while the button has a height of only 60 pixels. So there are 30 pixels longer than the button height. Okay? But now we want to shift these two borders to the top. We don't want them to be longer at the bottom, but also at the top with equal spaces. We can do that easily, no problem by going right here and changing top to negative 15 pixels. So this will shift the before pseudo element to the top by 15 pixels. And the borders will be shifted as well. Okay, now let's create the top and bottom borders. We will use the after pseudo element to create them. So I will say a colon after. And I will add content. Empty as well. Position. Absolute, height, 60 pixels, the same as the button. And width. 230 pixels, this time, not 200 pixels like the link, because the top and bottom borders of the after pseudo elements will be longer than the width of the button by 15 pixels on the left and 15 pixels on the right. Then we will add to 0 and left 0 for now. Then border top. Two pixels, solid red and border bottom. Two pixels, solid yellow. So now you can see we have the top and bottom borders and they're longer than the width of the button by 30 pixels. So now we want to shift the borders back to the left. So I will go here and change left to negative 15 pixels instead of 0. Awesome. Now we don't need the blue border anymore, so I will go right here and remove it. Cool. Now we need to work on the hover effect. Remember, when we hover over the link, we want the borders to change their places. The top red one will be at the bottom and the left red one will be at the right. This can be done really easily. I will just go here in my CSS and add a. And when hovering over it, I will make some changes happen to the before pseudo element, which represents the left and right borders. I will add Transform, Rotate Y. So this will make them before pseudo element rotate on the y-axis by 180 degrees, meaning it will make it flip on the y-axis. And an ordered for this change to happen smoothly, I will go up here inside the before pseudo element and I will add transition or 1 second. So now when I go and hover over the link, you can see that before pseudo element rotates on the y-axis by 180 degrees, making the borders exchange their position exactly the way we want. Cool. Now, let's do that for the top and bottom Borders. I will copy that block of code, paste it again, and change before to after. And rotate y to rotate x. Then go up here in the after pseudo element and add transition. Oh, 1 second. And here we go. The top and bottom borders are changing their places as well, giving us this really nice effect. And we can make it even nicer by adding some delay to be after pseudo element for example. So if I go here and add transmission delay 0.2 seconds, you can see the top and bottom borders weight 0.2 seconds and then start moving. We can also get another nice effect. We can make the top and bottom borders move only after the left and right when finished moving. So I will go here inside the before pseudo element and change the transition duration to only 0.4 seconds instead of 1 second. And I will do the same for the after pseudo element. And also we will change the transition delay to 0.40 seconds instead of 0.2. So by doing this, the top and bottom borders will start moving only after the left and right ones finished moving, giving us this cool new effect. 29. 30 - creative border growing button effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we will create another cool button hover effect. You can see this button has these borders on the top left corner and the bottom right corner. And when I hover over the link, you can see the width and height of the borders increases. And they give us this nice effect. So let's start creating that. I will start here in the HTML and I will add a button and say Submit. Then I will go to my CSS and target this button. Then add border, none. Padding, 12 pixels from top and bottom, and 40 pixels from left and right. Then I will add background color. This nice orange color. Then color white. And font-family bench line. All right, I will also add font size. 22 pixels. Transform, uppercase, cursor, pointer, and finally, position relative. Now let's create the borders. We will create the borders that sit on the top left corner, first using the before pseudo element. Then we will create the ones that are on the bottom right corner. So I will target the before pseudo element of the button. And I will add content. Empty strings. Then position absolute width 24 pixels. Height 24 pixels as well. Then top 0, left 0. And let's add a temporary red background. So now you can see the before pseudo element is this red background that sits on the top left corner of the button. Because we said both its top and left properties to 0. And it has a width and a height of 24 pixels. But if you remember, our borders were outside the button. They were shifted a little to the left and to the top there we're not sitting perfectly in the top left corner. So let's go back and do that. I will change the left property here from 0 to negative five, so that the before pseudo element will be shifted to the left by five pixels. Then I will also do the same for the top property so that it will be shifted to the top by negative five pixels as well. And now you can see the red background is shifted by five pixels and goes outside of the button. Alright, now let's add the top and left borders to it. I will go back here and add border. Two pixels solid. Our orange color. And border left. Two pixels solid. The orange color as well. And now you can see we have the borders added. Next. We want to animate these borders. We want to make them grow, like we've seen in our example. This will be easy to do. We will just increase the width and height of the before pseudo element and the borders will increase with it. So I will go here and when we hover over the button, I want to make some changes happen to the before pseudo element. I will make its height 100% and its width 100% as well. And in order for this change to happen smoothly up here inside the before pseudo element and add transition or 0 to five seconds. All right, now, when I go and hover over the button, you can see the before pseudo element gets bigger, it becomes the same width and height as the button and the borders get bigger with it. So the only thing left to do is to remove this red background. So I will go back here and do that. And when I hover over the button again, you can see the borders are getting bigger and they are giving us this nice effect. And it's the same effect that we wanted. Alright, let's quickly create the borders. At the bottom right corner, we will use the after pseudo element to create those. I will copy the before pseudo element. Paste it again, change before to after. Then I will just make some changes. I will change top to bottom and left to right. I will also change border top two border bottom. And the border left to border right. And now you can see we have these two borders sitting right here in the bottom right corner. Let's go back and animate them as well. I will just go right here and add a comma, then target the after pseudo element as well. And now when I go back and hover over the button, you can see the borders on the bottom right corner are getting bigger as well. And now we have the exact same effect we want. 30. 31 - creative first letter rotating button effect: Welcome to this new lesson in the course. In this lesson we will create another button hover effect. So you can see when I hover over this button, this cool effect happens where we have a black background that fades in and rotates a little to the right. Also, the first letter B gets bigger while rotating and gives us this cool little effect. So let's create that. I will start here in my HTML by adding an anchor tag. Then inside it I will add a span. And inside the span, I will add just the letter b so that we can animate it separately. Then outside the span, I will add the rest of the world. Then I will go to my CSS and target the anchor tag. Then add text decoration. None. Width, 160 pixels, height, 60 pixels. Color, black, border two pixels. Solid. Black. Then to center the text horizontally and vertically, I will add text align, center, and line height, 60 pixels. When font size 25 pixels, position relative. And finally transition or 0.2 seconds. All right, now let's create the black background that fades in and rotates. When we hover over the link, we will use the before pseudo element to create that. So I will target it and add content. Empty strings. Position, absolute, top, 0, left 0 as well. Then width 100%. And height 100%. Background color, black. And in order for the text to appear above it, we will add z-index, negative one. And now you can see we have a black background that has the same width and height as the link, and it's sitting above it. So if you remember, it should be invisible, then when we hover over the link, it should fade in and rotate. So let's do that. I will go back and add opacity 0, then transition, or 0.8 seconds. Then below that I will add a colon, hover colon before opacity. One again and transform. Rotate 15 degrees. And now when I go and hover over the link, you can see the black background fades in while rotating and gives us the effect we want. But let's change the color of the text on hovering to white so that we can see it. I will add a colon hover. Then I will change the color to white. And now you can see the color of the text changes to white when I hover over the link. All right, let's work on animating the first letter. You remember that we included it inside a span. So let's target it and add color. Transparent. Then position relative. And now you can see the first letter is invisible because we set its color to transparent. Next we will target the before pseudo element of this span. Add content, the letter B so that it appears above the letter whose color we set to transparent. Then position absolute color, black, and transition, or 0.2 seconds. And now you can see the first letter appears again. All right, let's work on the hover effect. When hovering over the link. I want to make some changes happen to the before pseudo element of the span. First, I want to make its color white. Then I want to increase its size. So I will add font size, 18 pixels. And finally, I want to rotate it. So I will add transform, rotate 360 degrees. And now you can see when I hover over the button, the first letter gets bigger while rotating at the same time, but it covers up the other letters. So we need to move it a little so it doesn't hide the other letters behind it. I will go back here and add translate negative 65 percent on the x-axis to shift it back to the left, and negative 10% on the y-axis to shift it to the top a little as well. And now when I go and hover over the button, you can see the first letter is now sitting in a new position and not hiding the other letters anymore. And that's it guys. This is the effect we were going for. 31. 32 - creative 4 borders growing button effect: Hello everyone, welcome to this new lesson in the course. In this lesson we are going to create this nice button hover effect. You can see when I hover over the button, these four borders are coming in and making this cool effect. So the tap water comes in from left to right. The bottom line comes in from right to left. The left border comes in from bottom to top. And the right border comes from tart the bottom. And all of this is happening at the same time, giving us this cool effect. So let's start creating it. I will go here in my HTML and add a button. Then inside it, I will say button. Then I will also add a span inside the button. Then I will go to my CSS, target the button and add background color. Red for now. Border. None. Position. Relative. Width, 400 pixels, height, 120 pixels. Then text transform uppercase. And in order to center the text inside the button vertically and horizontally, I will add line height, 120 pixels. And text align the center. Then I will add color, white, font size, 45 pixels. And finally, letter spacing, 15 pixels. All right, let's create the border that comes in from left to right. We will use the before pseudo element to create that. So I will target it and add content. Empty strings. Position absolute, top, 0, left 0 as well. For now. Then width, 100% of the button's width and height, just four pixels. Then finally, background color. White. And now you can see we have this line over here at the top, and it's taking up the full width of the button. So let's go back and move it to the left. Next to the button. I will go here and change left to negative 100% instead of 0. And now the line is shifted to the left. All right, I will go here again and add transition 0, 0, 5 seconds. Then, when hovering over the button, we want the border to go back to its original position. So I will say button colon hover. I will make some changes happen to the before pseudo element. I will set left back to 0. And now when I hover over the button, you can see the top line goes back to it's positioned just above the button. Alright, let's create the line at the bottom. I will go back to the code editor and copy the before pseudo element. Then paste it again and change before to after. Then change top to bottom so that it sits at the bottom of the button. Then I will also change left to right. So it will be shifted to the right this time, not the left. And now you can see the second line is sitting at the bottom, end is shifted to the right. So I'm hovering over the button. We want to shift it back to its original position. I will go back to my CSS and do that. I will copy this code, paste it again, and change before to after. And also change left to right. So that the position of the second line will be 0 at the right. And that brings it back to its original place. And when hovering over the button, you can see as expected, the line at the bottom moves from right to left, going back to its position. Our right, after creating the top and bottom lines, we will create the ones on the left and the right sides. We will use the before and after pseudo elements of the span that we created inside the button. So I will just copy the before pseudo element of the button. Again. Paste it, Change button to span, to target the before pseudo element of the span, not the button. Then inside that, I will change width to four pixels instead of 100% and height to 100% instead of four pixels, so that it will have the same height as the button and a width of four pixels. This will be the line on the right. So I will change that to negative 100% instead of 0 because it will be sitting above the button and change left to right and make it 0, not negative 100%. And now you can see the line on the right is sitting above the button because we said it's top property to negative 100% and it's right property to 0. When hovering, we wanted to return back to its original position as well. So I will go back. And when hovering over the button, I want to make some changes happen to the before pseudo element of the span. I will set its top property back to 0 again. And now, when hovering over the button, you can see the line on the right moves from top to bottom, back to its position. Now, let's quickly create the final line on the left. I will copy all the code for the right part. Paste it again, target the after pseudo elements, this time when change top to bottom and right to left. And I will also change before to after here and top to bottom. And now when I go back and reload, you can see we have a line at the left side as well. And when hovering over the button, all of the four lines move back to their positions. Let's go back and remove this red background. Let's also add overflow hidden so that the lines will be hidden outside the button. And now when I go back to the button and hover over it, you can see we have this nice effect in which all the lines come in at the same time. 32. 33 - creative wavy button effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this nice button hover effect using CSS animations. You can see when hovering over the button, this nice wavy effect happens, which is like a wave is coming in and moves until it covers the button. This is a very interesting effect. So let's go and create it. I will start in my HTML by adding an anchor tag. Then inside that I will say button. Then I will also add a div and give it a class wave. Then I will go to my CSS and target the anchor tag. And I will add text decoration. None. Padding, 15 pixels from top and bottom, and 30 pixels from left and right. Then I will add color. This light blue color. And font size, 18 pixels. Then letter spacing, border, two pixels, solid, light blue. Text transform, uppercase. And finally, position, relative. And now you can see the button looks cool. Now, how are we going to create this wavy effect? Let's just take it step by step. I will target the div with the class of wave. And inside that, I will add position absolute, so we can position it relative to the button. I will also set its width to 100% and it's height to 100% as well. Then I will add left, 0, top 100%. Then background color, red for now. And now you can see we have a red background that has the same width and height as our button sits below it, because we said it's top property to 100%. All right, let's continue working. We will create this little wave using the before pseudo element of R wave div. So I will target it. And inside that I will add content. Empty strings. Position absolute, top, 0, left 0 as well. Then width 100% And height just 22 pixels. And we will know why in a second. And finally, I will add background URL wave dot PNG. So this is the little image that we are going to use for the wave effect. And this image height is 22 pixels. That's why we set the height of the before pseudo element to 22 pixels so that it can fit in with the image. And we want to move it to the top to make it sit above the red background. So we can do that by going back and changing its top property to negative 22 pixels instead of 0. And now you can see the background image is shifted to the top and sitting above the red background. But now it's covering up a small part of the button from the bottom. And we don't want that. We want the image top point to be just below the button. So we can do that by moving both the image and the red background to the bottom by 22 pixels, which is the height of the image. So in order to do that, I will go back to the wave div. And instead of 100% here on the top, I want to move it by 100% plus 22 pixels. So we can use the count property to do that. I will add 100% plus 22 pixels. And now you can see both the red background and the image just moved to the bottom by another 22 pixels. And notice that the image moved with the red background because it's a before pseudo element of it, so it's attached to it. Alright, let's move to animating this image and make this wavy effect. I will create a new animation. Name it wavy. And inside it at 0%. I will add background position x 0. Then at 100%, I will add background position x 118 pixels. And this 118 pixels is the width of the image. So the position of the image will change from 0 to its full width, and it will give us the effect we want. Now, I will go up here and add this animation. So I will add animation wavy 0.5 seconds, linear and infinite. I will also change the red background color to the light-blue color of our image. And now you can see the image is moving at the top of the light blue background. And it's giving us this really cool effect. And it looks like it's just part of the blue background because they have the same color. In order to finish our effect, we will need to move this blue background up and make it fill the button when hovering over it. So let's go ahead and do that. I will say when hovering over the anchor tag, I will make some changes happen to the div with the class of wave, which is the light blue div. I will add top 0, so it goes back up and covers the button. And in order for that to happen smoothly, I will go here inside the wave div and add transition. Or 1 second. I will also go up here inside the anchor tag and add overflow. And now when I go and hover over the link, you can see the blue background moves up until it covers the button completely and the image is animated and gives us this really cool wavy effect. We have one thing left, which is changing the color of the text inside the button when hovering so that we can see it. I'll do that quickly. So when hovering over the link, I will make the color change to white. Then to make this change happen smoothly, we'll go up here and add transition 0, 0, five seconds. And also I will go inside the wave div and add Z index negative one so that the text will appear in front of it. And now when I go back and hover over the button, you can see the text color changes to white while the wavy effect is happening. And that's it for this lesson, everybody, and I will see you in the next one. 33. 34 - creative 2 cuts button effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this nice button hover effect. You can see we have this button and it has this cut in the top and bottom borders. And when I hover over it, this effect happens where a black background appears and grows, covering up the button. So let's see how we can create this effect. I will start here in my HTML by adding an anchor tag. And I will say button. Then below that, I will add a span. Then I will go to my CSS and target the link. And I will add text decoration. None. Width, 160 pixels, height, 60 pixels, color black. Then, in order to set to the text horizontally and vertically, I will add line-height, 60 pixels. Then text align, center. Then I will add text transform. Capitalize. Font size, 25 pixels, position, relative. And finally, transition, all 0.2 seconds. And now you can see we have our link sitting in the center of our page. All right, Let's keep going. I will target the span inside the link. And I will add position, absolute width, 100%, height, 100% as well. Then top 0, left 0. Then I will add background color, red and border. Two pixels, solid black. And now you can see we have a red background that has the same width and height as the button. And it's rounded with a two pixel black border. We want the borders only. We don't want this red background. So I will go back and change the color of the background from red to transparent. Alright, now we want to create the cuttings that exist at the top and bottom borders. We will use the before pseudo element of the span to create that. So I will target it. Then add content. Empty strings, position, absolute width, just 8%, height, 500 percent. Then background color, red for now. And now you can see we have this red background that has a width of 8% of the span and a height of 500 percent. And it's sitting right here. So let's go back and centered inside the button. I will add top 50%, left. 50 percent. Then transform. Translate, negative 50 percent and negative 50 percent. And now you can see the red background is now centered inside the button, but you can't see it's covering up the text inside the button. I want to make the text appear in front of it. So I will go back inside the span selector and add z-index negative one. I will also go right here inside the before pseudo element and I will add rotate negative 60 degrees. And now you can see the text is now appearing in front of the red background, which is now rotated by 60 degrees counterclockwise. Alright, now, let's work on the hovering effect. When hovering over the link, I want this red background to have a width of 100% instead of 8%. So it will cover up the link completely. So I will go back here. And when hovering over the link, I will target that before pseudo element of the span. And I will set its width to 100%. I will also set its background color to black instead of red. Then, in order for this change to happen smoothly, I will go up here inside the before pseudo element and add transition or 0.2 seconds. And now when I go and hover over the link, you can see the width of the red background gets wider until it covers the link and the color changes to black as well. That's why we are not able to see the text anymore. So I will go back to my CSS and when hovering over the link, I will have its color change to white so that we can see it. And now when I hover over the button, you can see we are able to see it because it's color is white now. All right. Now I'm hovering. I want to make the red background rotate as well, not just have its width increase, I wanted to rotate by 60 degrees, for example. So I will go here and copy this line of code and paste it on the hover effect and just change negative 60 degrees to 60 degrees. And now you can see when I go and hover over the link, the red background rotates by 60 degrees while its width is increasing. All right, now, the only thing left is to change the color of the red background and make it white like the body, so that we will have these two cuttings. So I will go back and change this red color to white. I will also go up here inside the link selector. And I will add overflow hidden. And now you can see we have these cuttings at the top and bottom borders because the color of the background is now white, like the body color, not red. And when I go and hover over the button, you can see this effect happens where the white background changes to black and its width increases while rotating from negative 60 degrees to positive 60, giving us the effect we want. 34. 35 - creative 2 parts skewed button effect: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice button hover effect. You can see we have these two parts are red part on the left and the blue part on the right. And the two parts are skewed along the x-axis. And you can also see the red part is shifted a little to the top, while the blue part is shifted to the bottom. And when we hover over the button, this effect happens. You can see the two parts change their positions. The blue part moves to the left side and the red one moves to the right side. And the skewed degree of both of them becomes 0 again. So let's create this effect. I will start here in my HTML by adding an anchor tag and say button. Then I will go to my CSS and target the anchor tag and add text transform. Uppercase, text, decoration. None. Font-weight, 700, position, relative. Then letter spacing, seven pixels. Padding, 18 pixels from top and bottom, and 30 pixels from left and right. Then I will add background, transparent, font size, 28 pixels. And finally, color white. Now you can see the link looks the way we want, and it has a transparent background because we will use the before and after pseudo elements to create the red and blue backgrounds. So let's go back and do that. I will target the before pseudo element of the anchor tag and add content. Empty strings. Position, absolute, then height. 100% as it has the same height as the anchor tag, the width 50 percent, because it has half of the link width. Then I will add left negative 1 percent. Then top negative five pixels. So this will be the red part that sits on the left side and it's shifted a little to the top. Then finally, I will add background color, this red curve. And now you can see the red part is sitting right here and taking up 50% of the link widths. Let's go back here. And in order to skew the red background, I will add Transform Skew 30 degrees. I will also add z-index negative one so that the text will appear in front of the red part. Then finally, I will add transition or 0.3 seconds. And this cubic Bezier value. And now you can see the red part is skewed and the text is appearing in front of it. All right, let's go back and work on the hover effect. When hovering over the link, we want the red background to move to the right side and return to a 0 skew degree. So I will go here and say when hovering over the anchor tag, I will make some changes to the before pseudo element. I will add Transform Skew back to 0 degrees, then left 50 percent. So it will move to the right side. And finally top 0. And now when I go and hover over the link, you can see the red part moves to cover the right side and it's skewed degree becomes 0. All right, let's go back and work on the blue part. I will go here and copy this code, paste it again, and change before to after. Then I will change Top 25 pixels, so it will be shifted five pixels to the bottom. I will also change left, 251%, so it will sit on the right side, not the left. I will also change the background color to this blue color. And now you can see the blue part is sitting on the right side. Let's work on the hovering effect. I will go back here and change before to after. And I will just change left to 0 instead of 50 percent so that the blue background moves to cover the left side. And now you can see guys, when I go and hover over the link, the blue part moves to cover up the left side along with the red background. And this is the exact effect we want, which looks really cool. 35. 36 - creative pulsing button effect: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice button hover effect. You can see when I hover over the button, this effect happens when we have a white background that gets bigger, well fading away. And the link itself moves a little to the top and some box shadow appears below it. And when clicking on the link, it moves a little to the bottom and the shadow value changes. So let's see how we can create this effect. I will go here and add an anchor tag. And I will say, hover me. And I will go to my CSS to target the anchor tag and add position. Absolute. Text decoration. None. Text transform. Uppercase. Padding, 25 pixels from top and bottom, and 50 pixels from left and right. Background color. White color. This gray color. Then border-radius, 100 pixels. Font size 24 pixels. And finally transitioned or 0.2 seconds. And now you can see the link is looking exactly the way we want. Let's go back and work on the hovering effect. We will create the white background that gets bigger using the before pseudo element. So I will go here and select the before pseudo element of the anchor tag. And I will add content, empty strings, position absolute, top 0 and left 0 as well. Then we want it to take up the full width and height of the link. So I will add width 100% and height 100% as well. And then I will add background color, white, and border-radius 100 pixels. Then finally transition 0, 0. And now you can see we have a white background that sits in front of the link and is covering it up. And that's why the text is not visible. So let's go back here and add Z index negative 1. And now you can see the text is visible again. Alright? I will say when hovering over the anchor tag, I will select the before pseudo element. And we want the white background to get bigger. So I will add transform scale x 1.4 and scale why 1.6. Then below that, I will add opacity 0. And now you can see when I hover over the link, this effect happens with the white background gets bigger while its opacity decreases, giving us this cool effect. All right, I'm hovering. We also want to link to move a little to the top and to have some shadow below it. So I will go back here and say, when hovering over the anchor tag, I will add transform, translate y negative 3 pixels. So the link will move three pixels to the top and box-shadow, 0 along the x axis, then 10 pixels along the y-axis, then a blur value of 20 pixels. And finally, the color of the shadow will be RGBA, 0.2000. And now you can see when I go back and hover over the link, it moves a little to the top and we have a shadow that appears below it. We only thing left is when clicking on the link, we wanted to move a little to the bottom again and the box-shadow to be smaller. So I will go back here and say a colon active. So that means when clicking on the link, then inside that I will add transform, translate Y negative one pixel. And I will copy the box shadow property. Paste it again and change 10 pixels to five pixels, 20 pixels to 10 pixels. And now when I go and click on the link, you can see it moves a little to the bottom and the box-shadow decreases, giving us the exact effect we want. 36. 37 - diagonal swipe button effect using borders: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice button hover effect. You can see when I hover over the link, this cool effect happens. We will create this effect using the border property and you will see how. So. Let's go to our HTML file, then add an anchor tag. Then inside that anchor tag we will say button. Then I will go to my CSS and target the anchor tag. Then add text decoration. None. Position, relative. Two 150 pixels and height 80 pixels. Then in order to center the text inside the link, we will add text align, center, and line height, 80 pixels. Then I will add color. This nice purple color and border. For pixels. Solid. Our purple color. Then to make the font size bigger, I will add font-size 24 pixels. Then letter spacing, three pixels to get some spacing between the letters. Then text transform, uppercase, and finally transition or 0.5 seconds. So now you can see the link is looking exactly the way we want. All right, let's work on our hover effect. Will create this using the before and after pseudo elements. But let's start with the before pseudo element first and understand how the effect is happening. Then we will use the after pseudo element to create it. So I will target the before pseudo element of the anchor tag. And I will add content empty strings, position absolute 0, left 0, bottom 0, and write 0 as well. Then I will add a temporary green background color. So now you can see we have this green background that covers the link completely because we said the top, left, bottom, and right properties to 0. All right, let's go back and remove this green background. And instead of backgrounds, we will border top 40 pixels, solid red for now. So as you can see, we now have this red border that has a width of 40 pixels. And we chose 40 pixels specifically because the height of the link is 80 pixels. The border is now covering up half of the link height, as you can see. Alright, I will go back here and add border bottom, 40 pixels, solid, green. And now as you can see, we have a green bottom border that has a width of 40 pixels and it's covering up the bottom half of the link. All right, Finally, I will go back and add border, right? 40 pixels, solid yellow. And now you can see we have this right yellow border that has a width of 40 pixels as well. And I think this is pretty much the flag of South Africa or something. All right, what if I go back here and change the right border color to transparent instead of yellow. You can see now that this right border is transparent and it's showing the link behind it. All right, I will go back again and add transition or 0.5 seconds. Then in order to make the text visible behind the background, I will add z-index negative one. Then I will finally add transform translate x negative 100%. And now you can see the before pseudo element is now shifted to the left and the borders are shifted with it. Because we said they're Translate function to negative 100. Alright, when hovering over the link, we want to make the before pseudo element go back to its original position to cover up the link. So I will go here and I will say when we hover over the anchor tag, I want to make some changes happen to the before pseudo element. I will add transform, translate X back to 0% again. And now you can see when I hover over the link that before pseudo element goes back to its original position. Alright, The one thing left is changing the color of the borders to our purple color. I will go here and change the top border color to purple. And I will do the same for the bottom border as well. Awesome. Now let's create the after pseudo element to complete our effect, I will go here and copy the before pseudo element, paste it again and change before to after. Then I will change border to border left so that the transparent part will be sitting on the left side, not the right. Then I will also change the translate function value to 100% instead of negative 100% so that the after pseudo element moves to the right, not the left. I will also copy the hovering effect. Paste it and change before to after. And now you can see the after pseudo element is located on the right side of the link and it has the transparent part on the left. When hovering over the link, the two parts come in to cover up the link, giving us this cool effect. Finally, let's change the color of the link text to white. When we hover over it. I will say when hovering over the anchor tag, I will change the color to white. I will also go up here inside the link and add overflow hidden to make the two parts hidden outside of the anchor tag. And now you can see when I go back and hover over the link, the two pseudo elements come in together to cover up the anchor tag and they give us our really cool effect. 37. 39 - creative image effect 1: Hello everyone. In this new lesson in the course, we will be creating this cool-looking fade in hover effect for this image. So when I hover over the image, you can see it is zooming in and rotating a little bit to the right. And the caption is fading in with a semi-transparent black background heading and a paragraph. So let's see how we can do that. I will go to my HTML and inside the body, I will add a div and give it a class of container. This div will hold both the image and the caption, meaning it will be the outer container for them. Then inside of it, I will first add our image. So I will say image source, and we will add our image. Great. Now we need to add our caption. I will go below the image and add a div with a class of caption. And then inside of it we will add an H1 and we will just say amazing caption. Then I will add a paragraph tag. And inside of it, I will just say you can write anything you want here. Now, when we view this in the browser, you can see that this isn't looking so good. We need to add some styles to make it look better. So back to our CSS. You can see I've already added some styles to the body to just center anything in it vertically and horizontally using Flexbox. Also, I've added this Leto font family, which I got from Google fonts as well. Now, let's start by targeting the div with the class of container. I will add width, 500 pixels, height 500 pixels as well. Position relative. And now you can see the image is actually too big for the container. We can fix that by simply going back to our CSS and targeting the image and adding width 100%. So it resizes to take up the full width of its container. And you can see it's now looking better. And we have a caption sitting below it right here. Now, let's keep going. I will target the div with the class of caption, which contains the H1 and the paragraph. Then I will add position absolute, top 0, left 0, then height 100% to take up the full height of the container. And width 100% to take up the full width of the container as well. And now you can see the caption is sitting on top of our image taking its full width and height. So for example, if I go right here and add background color, black for the caption. You can see it's taking up the full width and height. Good. Let's go back and remove this black background and continue working. Now, we need to send to the content inside the caption, meaning the H1 and the paragraph. We will do that using Flexbox. So I will go right here and add display, flex, then flex direction column, so that the H1 and the paragraph will kind of stack up one above the other. Then I will add justify content center. Align items center as well, so that the content will be centered vertically and horizontally inside the caption. And then I will go and add color white. Now, let's add some styles to the H1 and the paragraph. I will target the H1 inside the caption. And I will add text transform, uppercase and the margin 0, so that it looks much nicer and tighter. Then I will target the paragraph inside the caption and add font size 18 pixels. Then text transform. Capitalize. Great. Now we have everything exactly like we want and we need to focus on the fade in hover effect. So if we take a look at our demo, you can see the caption is invisible and when hovering over it, the capturing phase in with a blank background that has some transparency. So let's actually do that. First of all, we need to make the caption invisible. So I will go right here inside the caption selector and I will add opacity 0. And now you can see the H1 and the paragraph are not visible anymore. And I want them to be visible again when I hover over the div. So I will go right here. And when I hover over the container, I want to make some changes happened to the caption div and wanted to make opacity one again. And in order to see the change smoothly, I will go up here inside the caption and add transition. All zeros. Five seconds. Good. Now when I go and hover over the div, you can see the capturing fades in beautifully. And now we want to add the background too. So I will go inside the div with the class of caption and add background RGB, 0, 0, 0, 0. So this will be a black color with an opacity of 0, meaning it will be transparent. I will copy that and go down here, paste it again. And I will change the opacity to 0.5, so it won't be visible anymore. And now when I go back and hover over the div, you can see the background fades in with the caption. Good. Now we want to make the image zoom in and rotate on hovering. So I will go down here and copy this. I want to make changes happened to the image this time. So I will add transform scale by 1.3. So the image will scale up 1.3 times, giving us the Zoom in effect. Then I will add rotate by 15 degrees. Now, when I go back and hover over the div, you can see that the image scales up and rotate, but it's overflowing going outside the container. And we can fix that easily by going back to the container and adding overflow hidden so that the image stays within the confines of the container. Now, let's try it out. Awesome. Now we have the fade in effect with the zooming and rotation. And it looks great. 38. 40 - creative image effect 2: Hello everyone. In this lesson, we will be creating this interesting swipe hover effect. So when I hover over the image, the caption swipes from left to right with a semi-transparent black background. And the image zooms in and rotate, just like in the previous lesson. So let's see how we can do that. We will continue working with the same image and caption we created in the previous lesson. For this and some future lessons, we only change will be in the effect itself. So here in my CSS, I have the same styles we added before, but I've just removed the styles responsible for the hover effect. So you can say these will be the starting styles for the next few lessons, and we will enter them to create a different effect and each lesson. So if we take a look at this in the browser, you can see that we have everything in place. The image is taking up all of the container width in the caption that sits on top of it. Good. Now let's start working. I will go here inside the caption selector and I will add background color R, G, B a 0.500, so that it will take a semitransparent background color. Now, if we take a look at our demo, you can see that the caption is translating from the left side of the container into the container again. So the initial position is at the left of the container. So I will go back to my CSS and inside the caption div, I will add transform translate X minus 100 so that it moves to the left by 100% of its width. Then I will go down here. And when I hover over the container, I want to make some changes happened to the caption. I want it to return back to its original position. So I will add transform, translate X 0. And now when I go back and hover over the container, you can see the captions white smoothly from left to right. Now, one thing left, making the image zoom in and rotate. We actually did that in the previous lesson. So let's do the same thing here. Here in my CSS. When we hover over the container, I want to make some changes happened to the image. I will add transform scale by 1.3 and I will rotate by minus 15 degrees this time. So when I go and hover over the container, you can see the swipe effect is happening with the Zoom In and the rotation of the image occurring at the same time. Now that we understand the concept behind this swipe effect, we can easily make the swipe happen from right to left or from top to bottom. So let's say we want to make it swipe from top to bottom. The initial position should be on top of the image. So we will just change that. So I will go to my CSS and go to the caption div and change this, translate x to y. And I will go down here and change this x to y as well. And by doing this, the caption will sit above the image and we'll move vertically to cover the image when I hover over the container. So I want you to try and make the caption swipe from right to left and then from bottom to top. And you can tell me if you are able to do it in the Q and a section. 39. 41 - creative image effect 3: Hello everyone. In this lesson, we will create this wipe effect. So when I hover over the div, you can see the image moves from its position to the right and the caption comes in from the left to take its place. This is very similar to the previous lesson, but there are a few differences. First, the background color here is a solid black. It's not semi-transparent anymore. And the image behavior is different. I think you remember in the previous lesson the image with zoom in and rotate. But in this lesson, the image actually translates in, kind of gives its place to the caption. So let's see how we can do that. Here. I have my starting CSS file and here's what we get from it. So first of all, I will go to the caption right here and add background color black. Then in order to make it take its initial position on the left side of the div, we will add transform translate X minus 100% so that it moves to the left. Good. So now you can see the caption moved to the left and isn't above the image anymore. Now, we wanted to return to its position. When we hover over the div, I will go down here. And when we hover over the container, I will add transform translate X 0, so it returns to its position. And I want the image to move to the right, leaving the place open for the caption. So I will go right here and add transform, translate X 100% this time. And now when I go and hover over the div, you can see the image moves to the right, leaving its place for a caption which comes from the left. And this is exactly how we want it to look. We can also make this happen from top to bottom. All we need to change is all the Translate X in our code to translate y. So I will go back to my CSS and do that. And now you can see it's happening from top to bottom. Now, I want you to try to make it happen from right to left and from bottom to top. And let me know in the Q&A section, if you are able to do it. 40. 42 - creative image effect 4: Hello everyone. In this lesson, we will learn how to create this image hover effect. So if you look at it, you can see the caption is moving from the bottom and it's not taking up the full height of the div, it only takes up the full width. You can also see that the image is moving upward by the same distance that the caption moves upward. So let's see how we can do that. So here in my co-editor, I have the starting files for all of our image effects. And here is what it looks like in the browser. So let's start working on this specific example. First of all, I will go right here in the caption give, and I will add background color. Black. Remember, we caption isn't taking up the full height. So I will go up here and change height to only 30 percent of the container height. Now you can see that the caption is taking up only 30 percent of the height of the div. But there's a problem. The card is appearing at the top of the div and we want it to appear at the bottom. Not a big problem. We can fix it easily by going right here and changing top to bottom. Now you can see the caption is at the bottom of the div. Good. Now we want it to move downward so that it returns to its position when I hover over the div. So I will go to the caption and add transform, translate y 100%. So what will move downward by 100% of its height, which is actually 30% of the container height. Now you can see it's not visible anymore as it moved behind the div. Now, when we hover over the div, we want it to return to its original place. So I will go right here and add transform, translate Y 0. And now it goes back. We also want to move the image upward by the same distance. So I will go right here and add transform, translate y minus 30 so that it moves upward, leaving a space for the caption. And now you can see the image moves upward, giving us this nice effect. 41. 43 - creative image effect 5: Hello everyone. Welcome to this new lesson of the course. In this lesson, we will learn how to create this interesting image hover effect. So when I hover over the image, you can see that a semitransparent background appears from the bottom and moves upward to the top and the caption appears above it. But if we watch closely, we can see the catch and appears a little bit later than the background. And when we hover away, the caption disappears first before the blue background. So we will be using some transition delays to do this. All right, so as usual, let's start by writing the markup of our HTML. I will start right here by adding a div and giving it a class of fig. Then inside of it, I will add an image tag, and we will add our image. Then we need to add the caption. So below the image, I will add another div and give it a class of caption. And inside of this div, I will add an H3, say amazing caption. And below that, I will add H5 and say you can write anything here. So when we view this in the browser, you can see this is looking ugly. So let's go to our CSS and make it look a little nicer. First, I will target the div with the class of fig. And I will add width 500 pixels. Then color, white, font-family, railway, border-radius 10 pixels. Position relative. Right, let's keep it moving. I will target the image inside the fig div. And I will set its width to 100%. So it will take up the full width of its parent div, which is 500 pixels. Right now it's looking much better. We have our image and the caption sits below it. Coup. Now let's work on the semitransparent background that slides in from the bottom to cover the image. We will create it using the before pseudo element. So I will go to my CSS and safe vague colon before. And I will add content, empty position, absolute, top, 0, left 0. And we want it to take up the full width and height of the fig. So we will say width 100% and height 100% as well. Then background color, this greenish color. And because it's semi-transparent, we will add opacity 0.5. There we go. You can see the background is now taking up the whole width and height of the fig so that it even covers the caption. Now let's work on the caption and center it horizontally and vertically inside the fig. So I will go back to my CSS and target the div with the class of caption inside the fig. Then I will add position, absolute, top, 0, width 100%, and height 100% as well. Next, we will send to the H3 and H5 inside it using flexbox. So we will add display flex, then flex direction column to make the H3 and H5 sit one below the other. You see it's set to row by default, which will display them side-by-side in a row. But we want them to be in a column. Then in order to center them, we will add a line items center. And finally, justify content center as well. And now you can see the caption is centered horizontally and vertically inside the fig div. But the content inside the caption, which is the H3 and H5 right here. And looking good. So let's target them and make them look better. I will go to my CSS and add fig H3 comma, and then fig H5. And I will add margin 0, then letter spacing. One pixel. Then below that, I will target the H3 individually. Then I will add text transform, uppercase, and font-weight 400. Then we need a little bit of spacing below it. So we will add margin bottom, just five pixels. And below that, I will target the H5 this time. And we want to add a little background to it. So I will add background color, this brownish color. And I will also add a padding of three pixels from top and bottom and five pixels from left and right. Awesome. So here is how the fig looks. You can see the semitransparent background is covering and the caption since right there at the center. Now we need to work on the hovering effect. So if we take a quick look at our demo, you can see the background is moving from the bottom to the top. And we can do that. No problem. I will just go back to my CSS and go inside the before pseudo element. And we want to position the background below the fig so that when we hover, it will return to its original position. So I will add transform, translate and why? 100%? So now you can see it moved downward by 100% of its height. And because its height is equal to 100% of the fig height, it moved a distance equal to the fig height. So it's now positioned right below the fig. Alright, next, let's make it invisible. Outside the fig. I will go to the figs elector, and I will add overflow hidden. And now you can see it's not visible anymore. Now I'm hovering over the fig. We want the background to slide up again to its original position. So let's get that done. In my CSS, I will go right here. And when hovering over the fig, I want to make some changes happened to the background, which is the before pseudo element. I want to make it returned to its original position. So I will add transform, translate Y 0. And of course we want that to happen smoothly. So I will go up here inside the before pseudo element selector, and I will add transition all 0.25 seconds so that the upward movement will happen smoothly. And now when I go and hover over the fig, you can see the background is moving from the bottom to the top covering the fig. And when I hover away, it returns and sits below the figure again. But if we take a look at our demo again, you can see that I'm hovering. The background moves immediately to cover the fig. But when hovering away in waits a very short time until the caption disappears and after that, it disappears as well. Are you seeing that? All right. We can do that using the transition delay function. So back to our CSS. I will go inside the before pseudo element again, and I will add transition delay, just 0.25 seconds. And now when I go and hover over the fig, you can see the background weights for a very short time, 0.25 seconds to be exact, then appears. And when hovering away in weight 0.25 seconds then disappears. But we want it to wait only before disappearing. We don't want it to wait when we hover over the fig. In other words, we want it to appear immediately, but wait the 0.25 seconds before disappearing. So what we should do is we should go right here. And I'm hovering over the fig, we will add transition delay 0 seconds for our background. So now what will happen here is when I hover over the fig, the background will start moving immediately because I said the transition delay to 0 right here. When I hover away, it will wait and 0.25 seconds and then it will disappear. Let's take a look. Cool. Now, we need to work on the caption. If we take one last look at our demo, you can see that when we hover, the caption waits until the background covers the fig and then it appears. So we will use transition delay to make it wait 0.25 seconds before appearing. You can also see that it's fading in from the top by a distance of about 20 pixels or so. And finally, when we hover away, it disappears immediately. Now. All right, so let's go to our CSS and go to the caption selector. Then add transform, translate y minus 20 pixels, so it will move upward by 20 pixels. Then we want it to be transparent. So we will add opacity 0 and finally transition our 0.25 seconds. All right, now, when hovering over the fig, I wanted to make some changes happen to the caption. I want the caption to fade in again. So I will add opacity one, and I want it to return to its position. So I will add transform translate Y 0. And I wanted to wait before it appears. It should appear after the background appears. So I will give it transition delay 0.3 seconds. And now when I go and hover over the fig, you can see the caption fades in nicely from top to bottom. 42. 44 - creative image effect 6: Hello everyone. In this lesson, we will create this nice zoom in effect, when hovering over an image. You can see it zooming in and rotates a little. And we can do that using the scale function and the rotate function. So first of all, I will go right here in my HTML and add a div. And inside of it, I will add my image. You can see the image size is so big that it's taking up the whole screen. So let's go to our CSS. I will target the div which contains the image. Then I will set its width to 300 pixels and its height to 400 pixels. Then I will add border, 50 pixels, solid white. Then I will target the image and set its width to 100, so that it gets 100% of its container, which is 300 pixels, then I will set its height to 100% as well. Yes, now it's looking much nicer. Then I will add transition transform 1 second. And next, when I hover over the image, I wanted to get bigger in size and rotate a little bit clockwise, like in our demo. So I will say image on hover transform scale, Let's say 1.2. So the width and height will increase by this ratio. Then I will add a space and add rotate just nine degrees. Now, when I go and hover over the image, you can see it's getting bigger and goes out of the container div, don't worry, we can fix that easily by going right here inside the container and adding overflow hidden so that the image will not go out of the container anymore. And now when I go and hover over the image, you can see we're getting the nice zoom in rotation effects. We wanted. 43. 45 - creative image effect 7: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this nice image hover effect. You can see when I hover over the image, this effect happens where we have a gray background that comes from the bottom right corner until it covers the image. Then this text appears. We have a heading that comes from the top right side, a paragraph that comes from the bottom left side, and a link that comes from the bottom. We will learn how to create all of this. So let's first start by creating the layout of this example. I will start in my HTML and I will add a div, give it a class of container. Then inside it I will add an image. So this will be our image. Then below it, I will add another div, give it a class of caption. So this would be the div that contains all the other elements. And inside it, I will add an h2 and say image hover. Then below that, I will add a paragraph and add some demo text. Then finally I will add an anchor tag and say Read more. Alright, let's go to our CSS to make these elements look the way we want. I will target the div with the class of container that has all the elements inside it. And I will add width, 450 pixels, height 300 pixels. Then position relative. Then I will target the image and add width 100%. And now you can see the container now has a width of 450 pixels and a height of 300 pixels, and the image is contained within it. All right, Let's continue working. We will create the overlay background using the before pseudo element of the container. So I will target that and add content. Empty strings. Position absolute, top, 0, left 0, width 101%, 100%. Background color. This gray color. Opacity, 0.8. And finally transition or 0.25 seconds. And now you can see the gray background now has the same width and height as the container and is covering it up. But if you remember, this gray background doesn't appear until we hover over the image and it appears from the bottom right corner. And it was also rotated by 45 degrees. So let's change its position and rotate it. I will go back here and add transform. Translate 550 pixels on the x axis and 300 pixels on the y-axis. So now you can see the gray background is sitting in this new position. All right, Let's also rotate it by 45 degrees. I will go back here and add rotate 45 degrees. Now it's rotated. And finally, when hovering, we want it to move over the image and cover it up completely. So I will go back here and I'm hovering over the div with the class of container. I will make changes happened to the before pseudo element, which is the gray background. I will add transform, translate, negative 50 pixels on the x axis and negative 150 pixels on the y-axis. Then we want to keep it rotated. So I will also add rotate 45 degrees. And now when I go back and hover over the container div, you can see the gray background moves towards the image, but it doesn't cover it up completely. It covers only a small part of it. So we need to increase its width and its height so that it will cover it up completely. So I will go back and change the width to 120% and the height to 205%. And now the gray background is much bigger. And when I hover over the image, you can see the gray background comes in and covers it up completely, giving us the effect we want. Alright, now let's work on the caption and style it. I will target the div with the class of caption. Then I will add position, absolute, top, 0, left 0 as well. Then width 100%, and height 100% as well. Then I will add a red temporary background color. And now you can see the caption is sitting on top of the container div, because we said it's position property to absolute. So it's positioned relative to the container div that has a relative position property. And it also has the same width and height as the container div because we set its width and height to 100%. All right. Now we want to give the capturing the layout of our demo. We want the H2 at the top, then the paragraph in the center, and the link at the bottom. And all of them to be centered and have proper spacing between them. We can do that using Flexbox. So let's go here and add display flex. Then to align the elements above each other vertically, we will add flex direction column. Then to separate them, we will add justify content space around. Then color, white and text transform uppercase. So now you can see the elements in the Catherine Deneuve are sitting one above the other and have some space between them. Let's keep going. I will target the H2. Then to center it, I will add text align, center. Then font size, 17 pixels, padding, 20 pixels, margin top 20 pixels. And finally, background color, RGB, 0.8000. And now you can see the H2 is sitting in this position at the top of the container div. Alright? If you remember, when hovering over the image, the H2 would move from the top right corner and comment to this position. So let's go back and do that. I will go here and add transform, translate 200 pixels on the x axis. So it moves to a 100 pixels to the right and negative 200 pixels on the y-axis. So it moves 200 pixels towards the top. Then I will add transition 0, 0, 0.25 seconds. Then when hovering over the container div, we want the H2 to move back to its original position. So I will say container hover H2. And I will add transform, translate 0 and 0. And now you can see the H2 element is sitting on top of the container div on its top right corner. And when we hover over the container, it returns back to its original position. All right, let's work on the paragraph I will target it. Then add font size 16 pixels, width, 80% of the container width. And to align it in the center, I will. Align self, center, then text align, center to center the text. And finally transition 0, 0. And now you can see the text is centered inside the container div and is taking up 80 percent of its width. And in our effect, the text comes in from the bottom left corner. So let's go back and do that. I will go back and add transform, translate negative 200 pixels on the x axis. So it will be shifted to the left by 200 pixels and 200 pixels on the y-axis. So it will be shifted 200 pixels toward the bottom. Then I will go down here. And when hovering over the container, I will make some changes happen to the paragraph. I will add transform, translate 00. And now the paragraph is sitting on the bottom left side. And when we hover over the container, it goes back to its original position. Alright, now what's left is the button or the link. So let's dial it. I will target it. Then add text, decoration. None. Background color, black color. White. Width 100 pixels. Then padding, 15 pixels. Margin, bottom 20 pixels. Then again to center it horizontally, I'll add align self, center. Then finally transition or 0.25 seconds. And now you can see the button looks exactly the way we want, and it's sitting on the bottom. All right. We know that the button comes in from the bottom when hovering over the container div. So let's position it at the bottom. I will go back here and add transform, translate y 100 pixels. Then when hovering over the container, I will make some changes happen to the link. I will add transform, translate Y 0 again, so it returns to its position. And now when I go back, you can see the button is sitting 100 pixels below the container div. And when I hover over it, the button returns to its original position. Now we have one thing left, and that is to hide all of these elements. So they appear only when hovering. I will go back inside the container div and I will add overflow hidden. And now you can see all of them disappear. And when hovering over our container div, they appear again and our effect happens. But you can see when hovering, all of them appear immediately. At the same time. It would be nice if we have some transition delays. So we want the overlay background to appear immediately with no delay. Then after that, we want the H2 to appear. Then the paragraph and finally the link at the bottom. So let's go back and add that. I will go here and add transition delay 0.3 seconds. So that means when I hover over the container, we'll wait 0.3 seconds. So it will appear after the background is completely visible. Then I will go here and add transition delay 0.4 seconds this time so that the paragraph appears slightly after the H2. Then finally here and add transition delay 0.5 seconds. So the link will appear after 0.5 seconds of hovering over the container div. And now when I go back and hover over the image, you can see the background appears immediately. And then after that, all three elements appear, one after the other with a very slight difference in time. And when hovering away, they all disappear immediately at the same time. They don't wait because the transition delay property is applied when hovering only. So the delay happens when we hover, and it doesn't happen when we hover away. That's why all of the elements disappear immediately. And by doing that, we have finished this effect, and in the next few lessons we will see more effects like these in this example. So see you in the next lesson. 44. 46 - creative image effect 8: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create another image, hover effect. You can see when I hover over the image, this effect happens when we have the overlay background come in from the right to a position and you can see it was rotated while it was a way. Then when it comes back, it's rotation degree becomes 0. So it's not rotated anymore. Then we have the link come up from the top to this position. Then the paragraph comes from the right to its position and also rotated while it was a way. Then finally, the H2 comes from the top to its position. So let's start creating this effect. You can see we have our styles from the previous lesson. So everything is in its place and we will only add the styles responsible for our effect right here. So let's start with the overlay background. I will target the before pseudo element of the container. And I will add transform, translate 650 pixels. So it will be translated 650 pixels to the right along the x axis, then negative 100 pixels. So it will be shifted 100 pixels towards the top. On the y-axis. I will also add rotate 180 degrees. So it will be rotated by 180 degrees when it's away. And finally, I will add transition 0, 0. Then below that. And when hovering over the container div, I will make some changes happened to them before pseudo element. I will add transform, translate 0 and 0. So it will return back to its original position, then rotate 0 degrees. So it will rotate back to 0, giving us the effect we want. And now you can see the background is sitting in this position, 650 pixels to the right and 100 pixels towards the top. And it is also rotated by 180 degrees. And when I hover over the image, you can see the background returns to its original position while rotating back to 0 degrees, giving us this nice effect. All right, let's work on the H2. I will target it and add transform, translate y negative 150 pixels. So the h2 will be shifted to the top by 150 pixels. Then I will add transition all 0.2 seconds. Then when hovering over the container div, I will target the H2. And add transform translate Y 0 pixels so that it returns to its position. I will also add transition delay 0.5 seconds so that it will appear after the background appears. And now you can see the H2 is sitting on top of the image. And when I hover over the image, it weights 0.5 seconds, then moves to its position again. And notice that when I hover away, it immediately moved to the top again. It doesn't wake 0.5 seconds when hovering away because we added the transition delay only on hovering. Alright, let's move to the paragraph. It was shifted to the right and rotate it. So I will target it. Then add transform, translate X 300 pixels, then rotate 90 degrees. Then I will add transition or 0.2 seconds. Then when hovering over the container div, I will target the paragraph. Then I will add transform, translate X back to 0 again and rotate back to 0 as well. Then below that, I will add transition delay 0.4 seconds. And now you can see the paragraph has moved to the right by 300 pixels and it's rotated by 90 degrees. And when hovering over the image, it weights 0.4 seconds. Then it rotates back to 0 degrees while moving back to its original position. And when I hover away, it returns immediately back to the rate and rotates. Finally, let's work on the link. I will go back and targeted. Then I will add transform, translate y negative 300 pixels. So it will be shifted to the top by 300 pixels, then transition 0, 0, 0.2 seconds. And again, when hovering over the container div, I will target the anchor tag and add transform, translate Y 0 pixels, so it returns to its position. Then I will add transition delay 0.3 seconds. And now you can see the link is sitting on top of the image. And when I hover over it, the link weights 0.3 seconds and then moves down to its original position. Now right now, I will go back and target the container div and add overflow hidden. And now you can see all of the elements are invisible. And when we hover over the image, they appear again. And the effect that we want happens perfectly. 45. 47 - creative image effect 9: Hello everyone, welcome to this new lesson in the course. In this lesson, we will continue with image hover effects and we will create this nice hover effect. You can see when I hover over the image, it scales down to 0 until it disappears. And the background skills up while rotating and all the elements fade in nicely. So let's create this effect. You can see we have all the styles from the previous lessons that are responsible for locating the elements in their positions like so. All right, we will start adding the styles for this lesson right here. And we'll target the div with the class of container. Then I will add background color. This gray color. Then border 10 pixels, solid and white. When I will go back and target the image inside the container div. And I will add transition 0, 0, 5 seconds. Then below that. And when hovering over the container, I will target the image and add transform scale 0. And now when I hover over the image, you can see it scales down to 0 and disappears. And when hovering away, it comes back to its original size. All right, let's keep going. I will target the before pseudo element of the container, that is this gray background. And I will change this background color to this green color. We saw that it expands while rotating. So add transform, scale 0, rotate negative 180 degrees, and finally transition 0, 0, 5 seconds. Then below that, I will say when hovering over the container, I will make some changes happen to the before pseudo element. I will add transform, scale one, and rotate 0 degrees so that it scales up from 0 to one while rotating back from 180 degrees to 0 degrees, giving us the effect we want. And now, when I go and hover over the image, you can see while the image is scaling down, the green background is scaling up and rotating, giving us this nice effect. But it would be better if the green background scaled up only after the image scaled down to 0. So we will add some transition delays to the green background. When hovering over it. I will go back here and add transition delay 0.5 seconds. And we added this value specifically because the transition duration of the image is 0.5 seconds, meaning that the image will be scaling down to 0.50 seconds. So the green background will appear after the image disappears completely. And now when I hover over the container, you can see the image scales down to 0 first, then the green background scales up while rotating. After that. We now need to make the text fade in as well. So I will go back and target the H2 element. Then I will add opacity 0 and transition or 0.5 seconds. Then when hovering over the container, I will target the H2 and add opacity one again. So it will fade in nicely. And I want to do the same for the other two elements as well. So I will go here next to the h2 element and add the paragraph as well as the link. And I will do the same for the hovering effect. And now you can see the three elements are now hidden because their opacity is 0. And when I hover over the image, they appear again. But as you can see, they appear immediately. We want them to appear only after the green background appears. So we will add some transition delays to them. So I will go back and under hovering effect, I will add transition delay 1 second. When hovering over the image, these elements will wait 1 second, then they appear. And I chose 1 second because the image takes 0.5 seconds, then the green background takes another 0.5 seconds. So both of them combined take up 1 second before they appear. That is why I used 1 second as a transition delay value for our three elements. And now when I hover over the container div, you can see the image scales down first, then the green background scales up while rotating. And finally, the three elements fade in nicely. But when hovering away, you can see all the elements disappear immediately, altogether. Better if the green background and the three elements disappear first, then after that, the image comes in and appears again. So when hovering away, we want to make the image wait until the green background and the three elements completely disappear. Then after that, the image should scale up again. In order to do that, we will go here inside the image selector and add transition delay 0.5 seconds. And now when I go and hover over the container div, then hover away. You can see the green background and the three elements disappear first. Then the image scales up again. So the image is just waiting 0.5 seconds, then scales up, but there's a problem. The image also weight 0.5 seconds when hovering over the container. But we want it to appear immediately. So we want it to wait 0.5 seconds only when hovering away from the container, not one hovering over it. We can do that by going back here and add transmission delay 0. So that means when we hover over the container div, the transmission delay of the image will be 0. So it will appear immediately because we added transition delay 0.5 up here to the image. It will work only when we hover away, and that is exactly what we want. So when I go and hover over the container div, the image scales down immediately, then the green background scales up while rotating. And finally, the three elements fade in. And when hovering away, the green background and the elements disappear immediately and the image appears after that, giving us the effect we want. So I hope you are now more familiar with the transition delay property and how it's used in different situations. Whether you want it to make your element weight on hovering only or on hovering away only, or in both cases. So if you want to apply it only when hovering, you can do that easily by adding it in the hovering block of code. And if you want to apply it only when hovering away, you can apply it in the element code. Then in the hovering code, you can set it to 0. So it will be 0 when hovering only. So it will be 0 only when hovering, and when hovering away, it will have the value you apply it in the element code. And finally, if you want to apply it in both cases, on hovering and when hovering away, you just add it in the element code. 46. 48 - creative image effect 10: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create another image hover effect. You can see when I hover over the image, the green background fades n and the H2 and the paragraph fade in as well. You can see they were bigger than when hovering. We get smaller and return to their original size and the link moves in from the bottom to its position. So this is going to be a nice effect. Let's see how we can create it. So here you can see we have our styles from the previous lessons and we will just add the styles responsible for our effect. So first of all, we will create the background fading. In effect, I will target the before pseudo element of the container. And I will add opacity 0, then transition or 0.3 seconds, then below that. And when hovering over the container div, I will target the before pseudo element. Then add opacity. One again. And now you can see the green background has disappeared. And when I go and hover over the image, it fades in nicely. All right, let's work on both the H2 and the paragraph. We'll target them both. Then I will add transform scale 10, so that there will be 10 times bigger. Then below that, I will add opacity 0. Then finally transition. All three seconds. Then below that, when hovering over the container div, I will target the H2 tag, and I will do the same for the paragraph. Then I will add opacity one, then Transform Scale one again. And now you can see the H2 and the paragraph are now hidden. And when hovering over the image, they appear again. You can see they get smaller until they go back to the original size. Finally, we want to work on the link. We want it to move from the bottom to the top when we hover over the image. So I will go back here and target the link. Then I will add transform, translate y, 150 pixels. So the link will be shifted to the bottom by 150 pixels. Then I will add transition or 0.3 seconds. And below that, when hovering over the container div, I will target the anchor tag and add transform. Translate Y 0 again, so it returns to its original place. And now when I go back, you can see the link disappears as well. It's actually sitting behind the image, but it's not appearing because we had overflow property set as hidden in the container div. And when I hover over the image, you can see the link comes from the bottom to the top, giving us this nice effect. And all the elements now have the hovering effect we want. But let's add some delay to our elements when hovering so that they will appear slightly after the green background. I will add a 0.2 delay for each one of them. So I will go here and add transition delay, 0.2 seconds. Then below here I will add transition delay 0.2 seconds as well. And now when I go and hover over the container div, you can see the elements appear slightly after the green background. And when hovering away, all of them disappear immediately together. The delay doesn't apply in this case because we set it for hovering only. 47. 49 - creative image effect 11: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create another image hover effect. You can see when I hover over the image, it scales down to 0 while rotating and its opacity decreases to 0 as well. Then a green background fades in. Then the three elements move from the top to their original position, one after the other. The link appears first, then the paragraph, then the heading. We will use the transition delay property to make the green background appear after the image disappears. We will also use it to make our elements appear one after the other. So let's see how we can create that. You can see we have the styles from the previous lessons. So we have our elements sitting in their positions. Let's now go back and create the styles for this lesson. First of all, I will target the div with the class of container. And I will add background color. This dark gray color, so that it will appear when the image scales down and border 10 pixels, solid white. So now you can see we have this white border around the container div, and we also have a gray background. All right, I will go back and target the image inside the container. And I will add transition 0, 0, five seconds. Then below that, when hovering over the container, I will target the image. And we want to make the image scale down while rotating. So I will add transform, rotate 720 degrees, then scale 0. We also want it to fade away while the effect is happening. So I will add opacity 0. And now you can see when I go and hover over the container, the image scales down while rotating and its opacity decreases until it disappears. All right, let's work on the green background. I will target the before pseudo element of the container. And I will add a background color. This green color, then opacity 0 and transition 0, 0. Then below that. And when hovering over the container, I will make changes happen to the before pseudo element. I will make it opacity. One again. So it will have this nice fading effect, and I want that to happen after the image disappears. So while we'll add transmission delay 0.5 seconds. And now you can see the overlay background just disappeared because we set its opacity to 0. And when hovering over the container, it appears again above the gray background of the container after the image completely disappears. All right, let's go back and create the effect of our three elements. I will start with the link. I will target it. And we want it to move from the top to its original position. So I will add transform, translate y negative 300 pixels, then transition or 0.2 seconds. And below that will hovering over the container. I will target the anchor tag and add transform. Translate Y 0 again, so it returns to its original position. I will also add transition delay 0.5 seconds. And now you can see the link is sitting on top of the container. And when I hover over the container, the link weights 0.5 seconds and then goes back to its position. Let's quickly do the same effect with a paragraph and the heading. I will go back and copy this code. Then paste it again two times. Then I will target the paragraph. This time. I will also target the paragraph here in the hovering effect. And I will just change the transition delay to 0.7 seconds. So it will appear slightly after the link. Then below that, I will target the heading this time and change the transition delay to 0.9 seconds. So it will appear after the paragraph. Then I will go up here inside the container div and add overflow hidden so that the elements will be hidden outside of the container. And now you can see everything outside the container div is hidden. And when I hover over it, the three elements appear one after the other. So what we did guys is simple. We just made the image scale down while rotating. Then we made the green background fade in. And finally, we made our elements appear one after the other. And that gives us the effect we want. 48. 51 - creative growing borders menu effect: Hello everyone. In this lesson, we will create this menu hover effect. When I hover over any link in the menu, you can see two lines are scaling. The top when we scale from the left and the bottom one whisker from the right. The idea behind this effect is simple. We will just use the before pseudo elements to create the top line, which will be the full width of the link. Then we will add scale x 0 for it, so it will disappear. When we hover over the link, we will make it so the scale x is one. So it appears again. But we will make the transform origin left. So it will grow from left to right. Cool, but let's build in style our menu first, I will go to my HTML and add a UL LI and an anchor tag inside of it. And I will say home. Then I will copy that and paste it again many times. And I will change the text. Now you can see our menu and it's centered horizontally and vertically inside the body, thanks to some Flexbox styles that are added to the body right here. Good. Now let's work on the menu itself. I will target the UL, then add padding 0 and margin 0, and then display flex to make the list item sit beside each other. And finally, flex wrap. Wrap so that the list items will drop to the next line when they have no available space. Then I will target the list items inside the unordered list. And I will add list-style none to get rid of the bullet that appear next to the list items. Then I will target the links. And I will add text decoration, none to remove the underlines. Then color this nice dark gray color and font size. 22 pixels. Then display block padding, ten pixels from top and bottom, and 15 pixels from left and right. Then finally, position relative. And look at that. Amazing. Now our menu looks exactly the way we want and we are ready to work on the hover effect. So I will go right here and add a colon. Before. Then I will add content, empty string, then position absolute, top, 0, left, 0, width, 100%. Height. Just two pixels. Background color. Our nice dark gray color. Now you can see the line is appearing at the top and it has the full width. And it's a small height of two pixels. Let's continue working. I will go right here and add transform scale x 0 so that its width will be 0. And I will add transition 0, 0, 5 seconds. Then when we hover over the link, I want the line to appear again. So I will go right here and add a colon, hover colon before. And I will add transform scale x one again. And now when I hover over any link, you can see the line is growing again. But it's growing from its center because the transform origin is set to center by default. But we want it to scale or grow from its left side. So I will go back to the before a pseudo element add transform origin left. And now when I go and hover over any link again, you can see the line is now growing from its left end point, giving us the exact effect we want. Lastly, we need to create the bottom line is, well, don't worry, it'll be very easy. What I will do is I will copy the entire before pseudo element, paste it again, and I will just make some changes. So first of all, I will change the word before to after. Then I will change this top to bottom. So the line will be at the bottom of the link. Then I will change the transform origin to write so that it will grow from its right side, not left side. And of course, I will go right here and included in the hover effect. So when I hover over the link, the after pseudo element should grow as well. And that's it. If I go and hover over any link, you can see the effect is exactly what we were going for. 49. 52 - creative background and borders menu effect: Hello everyone. Welcome to this new lesson in the course where we are going to create this hover effect when hovering over menu items are links. So you can see we have a background that fades in along with these two borders from the top right and bottom left corners. Got it. So let's see how we can create this effect. I will go here in my HTML and I will add a UL LI inside of it and an anchor tag inside the LI. And I will say home. Then I will copy this, paste it four times. And I will say about portfolio services and contact. Then we will go to our CSS to add some styles. First, I will target the UL, add margin 0, padding 0, and display flex in order to display all the list items side-by-side. And finally, to get rid of the bullets, we will add list-style-type. None. All right, let's keep it moving. I will target the anchor tag and I will set its color to this dark gray color. Then we want to make the font size a little bit bigger. So I will add font-size 20 pixels. Then text-decoration. None to remove the underlines. Text transform. Uppercase to make all the letters capital. Padding, five pixels from top and bottom, and ten pixels from left and right. And we want to add some spaces between the links. So we will add margin 0 pixels from top and bottom, and ten pixels from left and right. Okay, now we will add position, relative and transition. 0, 0, 5 seconds. Good. Now our links are sitting side-by-side with some spaces between them and they look nice. Next, let's work on the hover effect. We will create the borders that appear in the top right corner and in the bottom left corner using the before and the after pseudo elements. So I will go right here and say a colon before. Then inside of it, I will add content. Empty strings, position absolute. And this will be the border that appears on the bottom left corner. So we will say bottom 0 and left 0. Then we will make this before pseudo element or square and add borders to it. So I will add width, 12 pixels, height 12 pixels. Then in order to see what we have now, let's add a temporary background color. So I will add background color, blue, for example. So here you can see the before pseudo elements sits right here on the bottom left corner, and it has a width and height of 12 pixels and a blue background color. Now we want to add a border to it around just the left side and the bottom side. So let's do that. I will go back to the before pseudo element, and I will add border, three pixels solid. And I will add this nice red color. Now, this line of code we just added will put a border around all the sides of the blue background. So if we take a look, you can see we now have a red border around the blue background here, but we only want the border to be around the bottom and left sides. To do that, we can use the border width property. So I will go back right here inside the before pseudo element, and I will add border width. And the border width property accepts four values. The first value indicates the top side, then the right side, the bottom side after that, then finally the left side. So top, right, bottom, left. And because we only want borders on the left and bottom sides, we will add 0 for the top side, then 0 for the right one, then three pixels, and three pixels for both the bottom and left sides. And there it is. Now you can see we have the border we want, which means we don't need this blue background anymore. So I will go right here and remove it. Now. Right now we want to create the border on the top right corner. This will be really easy. We just copy this before pseudo element, paste it and change before to after. Then instead of bottom and left, we will add top and right. And we know we want a border at the top and right corners. So we will fix this border width right here and make it three pixels. Three pixels, 00, instead of 003 pixels, three pixels. There we go. Now we have the two borders, and they are set up in the top right corner, in the bottom left corner. Next we want to work on the hover effect. So we want to shift the borders a little bit inward, then set the opacity to 0 in order to make them invisible. And on hovering, we will make them shift back outward and we will make the opacity one again. All of this will make sense once we do it. So let's get to it. I will go right here inside the before pseudo element, which is the bottom right corner here. And I will change left and bottom to 12 pixels instead of 0. So now you can see this pushes the border inward towards the link itself. And I will add opacity 0 to make this invisible. Right? Now, I'm hovering over the link. We want to make the border move outwards again and show up for us. So I will say a and I'm hovering over the link. I want to make some changes happen to the before pseudo element. I will add opacity, one. Then bottom. We want it to be outwards. So let's say minus eight pixels and left minus eight pixels as well. Now we want this change to happen smoothly. So we will go up here inside the before pseudo element, and we will add transition all zeros. So now when I go and hover over the link, you can see the bottom left corner appears in moves outward, giving us the effect we were aiming for. Now. All right, Let's quickly do that for the top right corner. I will go here and change top and right to 12 pixels and 12 pixels instead of 00. Then I will add opacity 0, then transition our 0.3 seconds. And after that, we will copy this. Paste it again, change before to after, bottom to top, left to right. And now when I go and hover over the link, you can see the borders are moving outward, giving us this nice effect. Now, one thing left, which is changing the background of the link when we hover. Let's do that quickly. I will go right here and say, I'm hovering. I will add background color, the same red color as the border, and color white to make the text color white, of course. And now when I go and hover over any link, you can see we've got the effect we want, which is, as always, very nice. 50. 53 - creative splitted background menu effect: Hello everyone. Welcome to this new lesson in the course where we are going to create this nice menu hover effect. So you can see that when we hover, we have this really nice action going on. The background splits into four parts and they move from top to bottom, one after the other, giving us this result. So in order to create this effect, we will first create the four parts of the background, then scale them from top to bottom using the scale y function. And finally, use the transition delay property to make the delay for each one of them and make them appear one after the other. So let's get to it. I will start right here in my HTML by adding a UL LI anchor tag. And I will say home. Then in order to create the four parts, we will use spans. So I will add four spans inside the anchor tag. And each span will be a part of the gray background that appears when we hover. Then I will copy the entire LI, paste it four times. And I will just change the text every time. So I will say about services, team, and contact. So here we have our URL, but let's make it look better. I will go to my CSS target, the URL. And I will add margin 0, padding 0. And in order to make the list item sit side-by-side, we will add display flex to the URL. Then we want to get rid of the bullets. So we will add list-style-type, none. Alright, now let's style the links themselves. I will target the anchor tags, and I will add display block so that we can add width and height to them. And that's what I will do next. So I will add with 120 pixels, height, 40 pixels. Then in order to center the text vertically and horizontally, we will add line-height, 40 pixels and text align. Center. Cool. Now we will add color red for now. Then text transform capitalize. And to remove the underlines, we will add text decoration. None. Then position relative. And finally transition or 0.5 seconds. All right, now we have our link setup side-by-side and looking nice. Next we will work on the spans to create the background. So I will target the spans inside the anchor tags. And I will add position, absolute. And because we have four spans, we will set the width to 25 percent for each one of them. Then we will use the left property to control their positioning. So I will add width, 25 percent, then height, 100% of course, because they take up the full height. Then background color, this dark gray color. And we don't want them to cover up the text on the link. So we will add z-index minus1, then left 00. And what this will do is it will make the four spans take up 25 percent of the link width from the left. So all of them will be stacked up on top of each other. We will target them individually to change the position of each one. So when I go and reload the page, you can see for the first link, for example, there is a dark gray background taking a 25 percent of the link with and those are actually the forest spans, but they're all sitting on top of each other. All right. Let's go and change their positions to cover the whole width of the link. We will target each span individually. I will go right here and say span nth child too. And I will add left 25 percent. So it will start at 25 percent of the link width from the left. So now you can see it's now shifted to the left and we are covering 50 percent of the link, not 25 percent anymore. So I will copy this, paste it again two times. And I will target the third span. Change left to 50%. Then the fourth span and change left to 75 percent. So now you can see the four spans are located side-by-side. Each one of them has 25 percent of the link widths. And together they are 100% and covering the link. Right now we need to work on the hover effect. I will go right here inside the general span selector and I will add transform scale y 0 so that the spans will disappear. Then below that, I will say when we hover over the links, we will make some changes happen to the spans. We will add transform scale y, one to return them to their original size again. And in order to make the effect happens smoothly, we will go up here and add transition or 0.5 seconds. Now, right? Now, when I go and hover over the links, you can see the spans are scaling up to their original position. But this is happening from the center point. And we want it to happen from the top center. So we will go to the span selector and we will add transform origin tab. And now when we hover again, they're scaling from the top, not from the center anymore. But right now all the spans are scaling at the same time. So it looks like it's all one dark background, not four separate ones. We want them to scale one after the other, and we can handle that no problem using the transition delay property. So I will go right here inside the second span. And I will add transmission delay zero-point 15 seconds. Then inside the third one, I will add transition delay 0.3 seconds. Then for the fourth, I will add transition delay zero-point for five seconds. And now when I go and hover over the link, you can see they're scaling one after the other, bringing us closer to our completed effect. Now, one thing left, which is changing this red color on the link text. So I will go to the anchor tag selector, change this red color to dark gray. And below that, I will say that when we hover over the link, the color will change to white. So there you have it, a really nice hover effect. And the cool thing about it is you can easily control it the way you want. For example, you can add more than four spans in change the width. And you can even change the color of each span. So let's just play around a little and change some values and see what we can get. Instead of making the width 25 percent and the height 100%, Let's reverse that. I will change the width to 100% and the height to 25 percent. And now each span will have the full width and a height equal to 25 percent of the link height. In this case, we want them to sit below each other. So we will go right here and change these lefts to top. And just like that, we now have a totally different effect where the span sit below each other, taking up the full width and 25 percent of the height. Let's also go and change scale y to scale x and see what we'll get. So now the spans will scale along the x axis, not the y-axis. So if I go and hover, you can see it gives us a totally different effect, which still looks really good. And maybe we can change the transform origin to left instead of tab so that the spans will scale up from the left and not from the top. And just like that, by using CSS transforms, we can get a wide variety of effects with very minor changes in our code. 51. 54 - creative 2 moving bottom borders menu effect: Hello everyone, welcome to this new lesson in the CSS animations course. In this lesson, we're going to create this nice menu hover effect. So you can see when I hover over the menu, these two underlines appear nicely and give us this effect. So the blue underlined appears from the left and moves to the right, while the pink one appears from the right and moves to the left. This is an easy but nice effect. So let's create it together. I will start here in my HTML by adding a UL. Then inside it, I will add an L, then anchor tag inside of that. And I will copy this and paste it four times. Then I will say home about services, portfolio contact. Okay, now I will go to my CSS to style this menu. I will target the UL and add padding 0. Then display flex to make the list item sit beside each other. Then below that, I will target the LI inside the URL, and I will add list-style-type, none to remove the bullets that appear besides the list items. Then I will add padding, 10 pixels from top and bottom, and 20 pixels from left and right. Cool. Now let's target the anchor tags themselves and add text decoration. None to remove the underlines. Then text transform. Uppercase. Font size 20 pixels. Color. This dark gray color. And finally, position. Relative. Awesome. So now you can see our menu is looking exactly the way we want. Now, let's work on the underlines that appear and move. When we hover over any menu item, we will use the before and after pseudo elements to create those underlined. Let's start by creating the first one using V before pseudo element. I will go right here inside my CSS and I will say UL LI a colon before. And I will add content. Empty string, width, let's say 15 pixels for now. And height, five pixels. Background color. This nice blue color. Position. Absolute. Top, 120% Left 0. So now you can see we have our blue line with the width of 15 pixels and a height of 50 pixels. And it's sitting below our links because we said it's top property to 120%. Okay, now let's add the other pink line. I will just copy the before pseudo element. Paste it again and change before to after. And I will change the background color to this pink color. And instead of left, I will change it to rate. And just like that, we now have the pink one on the right side of our links. Cool. Now, let's work on the hover effect. When hovering over any of these links, we want the blue underline to grow until it becomes 50% of the link widths and move to the right at the same time. And we also want the pink one to grow to 50 percent of the link widths and move to the left. So let's do that. First of all, I will go up here inside the before pseudo element and change the width to 0 instead of 15 pixels so that it will disappear. Then I will do the same for the pink line. Then I will go down here and say UL LI, a colon, hover colon before. And I will add width 50 percent and transform translate X 100%. And in order for this effect to happen smoothly, I will go up here inside the before pseudo element and I will add transition or 0.5 seconds. So now when I go and hover over any link, you can see the blue line moves from left to right and its width becomes 50 percent of the link widths at the same time. Cool. Now, let's do the same for the pink line. I will copy this block of code. Paste it again, change before to after to target the pink line. And just change the Translate X function to negative 100% instead of 100% because we wanted to move to the left, not to the right. And finally, I will go up here inside the after pseudo element and add transition 0, 0, five seconds. And now when I go and hover over any link, you can see the blue line moves to the left and the pink one moves to the right, giving us this cool effect. 52. 55 - creative blurry menu effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this nice menu hover effect. As you can see, when I hover over any link in our menu, it gets bigger and has an orange background. But the cool thing is that the other links get blurry. So the link we're hovering on comes into focus and the other links get blurry. Alright, let's create this effect. I will go here in my HTML and add a URL. Then inside it I will add an LI, then an anchor tag. And inside that I will say home. Then I will copy that again four times. And say about services, portfolio and contact. So here you can see all the list items are there. Alright, I will go to my CSS and target the UL. Then I will add margin 0, padding 0 as well. Then in order to display the items side-by-side, I will add display flex. Then I will target the list items inside the UL and add list-style none. Margin, 0 pixels from top and bottom, and 20 pixels from left and right. Then I will add transition 0.5 seconds. All right, now I will target the anchor tags inside the list items and add display block so that we can control its size and make it bigger. Then after that, I will add position. Relative. Text decoration. None. Padding. Five pixels. Font size, 22 pixels, color white. Then text transform, uppercase. And finally transition 0, 0, 0.3 seconds. As you can see, the menu is now looking exactly the way we want. All right, let's work on the hovering effect. We want the links to get bigger and have an orange background when we hover over them. So I will go here and say when we hover over the link, I will add transform scale 1.5 so that it will get bigger by 1.5 times its original size. And now you can see when I hover over any link, it gets bigger. All right, Let's go back to create the orange background. We will create it using the before pseudo element. So I will say a colon before. And inside that, I will add content. Empty strings, position absolute, top, 0, left 0 as well. Then we want it to take up the full size of the anchor tag. So we'll add a width, 100%, and height 100% as well. Then we'll add background color, our orange color. Then finally, transition zero-point three seconds. And now you can see we have this orange background and it's covering up all the links, but we only want it to appear when we hover over the links. So I will go back here and add transform scale 0. Then below that, I will say when we hover over the link, Our make some changes happened to the before pseudo element. I will add transform. Scale back to one again. So now you can see the orange background is now hidden. And when we hover over it, it becomes bigger again. The problem is, is covering up the text. So let's go back here inside the orange background and add z-index negative one. So now you can see the text appears in front of the orange background. Now we have only one thing left, and that is blurring the other links when we hover over any link. So let's go back and do that. I will go back here and Add Filter Blur, five pixels. So this just means that when we hover over the well, we will apply this blur filter to the anchor tags. We also want the links to be a little bit transparent. So I will add opacity 0.2. And now you can see when I hover over the links, all of them get blurry and they become semi-transparent because we set the opacity to 0.2. But we want this to happen to the links that were not hovering over. So we want the link that we hover over to appear clearly. So I will go back here and add opacity one so that it becomes visible again when Filter blur 0. So this means that the length that we're hovering over, we'll have an opacity of one and the blur filter will be 0, meaning it will be clearly visible again. And now, when I go back and hover over any link, you can see that it gets bigger and has an orange background while the other links get blurry. And this is the exact effect we're looking for. 53. 56 - creative menu effect using the transition delay property: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this nice menu hover effect. You can see when I hover over the menu items, the link moves up to the top and another link comes from the bottom and takes its place. Then a green background grows from left to right. Then when hovering away, the green background shrinks from right to left. And that drew it disappears. The link moves to the bottom and the other one comes in from the top. So let's start creating this effect. I will start here in my HTML by adding a UL. Then inside it, I will add an LLI, then an anchor tag inside that. And inside the anchor tag, I will add a span and say home. When I will add another span and say home as well. So the first band is the one that we'll move to the top and the second span will move from the bottom to take its place. All right. I will copy, paste it four times. And as you can see, I've just changed the text. So we have about services, portfolio and contact. All right, let's go to our CSS and start styling our menu. I will target the UL. Then add display, flex. Then we want all the list items to sit one above the other. So I will add flex direction column. Then justify content center, and align items center as well. All right, I will target the list items inside the UL. Then I will add position, relative, list-style, none, and margin, five pixels. Now I will target the anchor tag inside the list items. Then add position, relative. Display, block, height, 40 pixels. Text decoration. None. When padding. Five pixels from top and bottom, and ten pixels from left and right. When I will add font weight of 300, letter spacing to pixels. And finally, overflow. Hidden. Alright, let's work on the spans inside the anchor tags. I will target them when add position, relative width. 100% Height 100%. So they take up the full width and height of the anchor tag. Then in order to make the second span go to the bottom of the first span, we will add display flex. So what this will do is it will make the second span sit side-by-side with the first one if there is a space. But since we set the width of our spans 2 100%, the second span won't have a space to sit next to the first one. So it will move to the bottom and sit below it. Then I will add align items center and justify content center. So as you can see, the second spans are shifted and sit below the first ones because they don't have enough space and we can't see them because we said overflow in the anchor tag here to hidden. So if we remove that, you can see the second spans are now appearing below the first ones. All right, I will add overflow hidden again so that the second spans will disappear again. Let's continue styling the spans. I will go here and add transition 0.5 seconds. Then color white, font-size 20 pixels. And finally, text transform. Capitalize. Now the spans are looking much better. Now when hovering over the anchor tag, we want the first span to move from its position upward to the top, and the second span to move from the bottom and take its place. So I will say when hovering over the anchor tag, I want to make some changes to the first span. So I will say span nth child one. And I will add transform, translate Y negative 100%. So now when I go and hover over the first band, you can see it moves up to the top and disappears. Now we want the second span to move from the bottom and take its place. So let's go back and do that. I will copy this block of code pasted and target the second span instead of the first one. And I won't change anything. So when I go and hover, now you can see when the first span moves upward, the second span comes from the bottom and takes his place. And this is the exact effect we want. All right, let's work on the green background. I will go here and say a colon before. And then I will add content. Empty strings, position, absolute. Top 0, left 0. And we wanted to take up the full width and height of the anchor tag. So we will add width, 100%, height, 100% as well. Then background-color, our green color. And now you can see we have a green background that has the same width and height as the anchor tag. All right, we want the green background to only appear when hovering over the anchor tag. So I will go back here and add transform scale x 0. And we wanted to grow from left to right. So we'll add transform origin left. Then finally transition 0.5 seconds. And when hovering over the link, we wanted to grow again and appear. So I will say when hovering over the link, I will make some changes to the before pseudo element. I will add transform scale x one again. And now you can see the green background is invisible. And when hovering over the link, it grows again from left to right because we set its transform origin property to left. And on hovering away, it also shrinks from its left side, but we wanted to shrink from its right side. So what we can do is we can go back here and add transform origin, right? And now you can see when I hover over the link, the green background grows from left to right. And when hovering it away, it shrinks into its right side. Alright, now we need to add some transition delays to mix the green background, wait until the first band moves to the top. So I will go here and add transition delay 0.5 seconds. And now when I go back and hover over the link, you can see the link moves first. Then after that, the green background appears giving us the effect we want. The problem is when we hover away, we want the green background to shrink first. Then after that we want the span movement to happen. So we want to apply some transition delay to the span when hovering away. So I will go back here inside the span selector and add transition delay 0.5 seconds. But this will cause the span movement to be delayed when hovering as well. So to prevent that and make the anchor tag appear immediately when hovering, we can go here and say transition delay 0. Then I will also do the same here on the second span. So what this will do is it will make the two spans animate immediately when hovering. And it won't have any delays. But when hovering away, it will wait 0.5 seconds because we set the transition delay to 0.5 seconds here. So when hovering, they animate immediately. When hovering away, we will wait. And now when I go and hover over the links, the spans move immediately and the green background appears. And when hovering away, the green background shrinks, then the span movement happens after that. And this is the exact effect we want. 54. 57 - 2 borders and a background menu effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create another image, hover effect. You can see when I hover over the image, this effect happens when we have the overlay background come in from the right to a position and you can see it was rotated while it was a way. Then when it comes back, it's rotation degree becomes 0. So it's not rotated anymore. Then we have the link come up from the top to this position. Then the paragraph comes from the right to its position and also rotated while it was a way. Then finally, the H2 comes from the top to its position. So let's start creating this effect. You can see we have our styles from the previous lesson. So everything is in its place and we will only add the styles responsible for our effect right here. So let's start with the overlay background. I will target the before pseudo element of the container. And I will add transform, translate 650 pixels. So it will be translated 650 pixels to the right along the x axis, then negative 100 pixels. So it will be shifted 100 pixels towards the top. On the y-axis. I will also add rotate 180 degrees. So it will be rotated by 180 degrees when it's away. And finally, I will add transition 0, 0. Then below that. And when hovering over the container div, I will make some changes happened to them before pseudo element. I will add transform, translate 0 and 0. So it will return back to its original position, then rotate 0 degrees. So it will rotate back to 0, giving us the effect we want. And now you can see the background is sitting in this position, 650 pixels to the right and 100 pixels towards the top. And it is also rotated by 180 degrees. And when I hover over the image, you can see the background returns to its original position while rotating back to 0 degrees, giving us this nice effect. All right, let's work on the H2. I will target it and add transform, translate y negative 150 pixels. So the h2 will be shifted to the top by 150 pixels. Then I will add transition all 0.2 seconds. Then when hovering over the container div, I will target the H2. And add transform translate Y 0 pixels so that it returns to its position. I will also add transition delay 0.5 seconds so that it will appear after the background appears. And now you can see the H2 is sitting on top of the image. And when I hover over the image, it weights 0.5 seconds, then moves to its position again. And notice that when I hover away, it immediately moved to the top again. It doesn't wake 0.5 seconds when hovering away because we added the transition delay only on hovering. Alright, let's move to the paragraph. It was shifted to the right and rotate it. So I will target it. Then add transform, translate X 300 pixels, then rotate 90 degrees. Then I will add transition or 0.2 seconds. Then when hovering over the container div, I will target the paragraph. Then I will add transform, translate X back to 0 again and rotate back to 0 as well. Then below that, I will add transition delay 0.4 seconds. And now you can see the paragraph has moved to the right by 300 pixels and it's rotated by 90 degrees. And when hovering over the image, it weights 0.4 seconds. Then it rotates back to 0 degrees while moving back to its original position. And when I hover away, it returns immediately back to the rate and rotates. Finally, let's work on the link. I will go back and targeted. Then I will add transform, translate y negative 300 pixels. So it will be shifted to the top by 300 pixels, then transition 0, 0, 0.2 seconds. And again, when hovering over the container div, I will target the anchor tag and add transform, translate Y 0 pixels, so it returns to its position. Then I will add transition delay 0.3 seconds. And now you can see the link is sitting on top of the image. And when I hover over it, the link weights 0.3 seconds and then moves down to its original position. Now right now, I will go back and target the container div and add overflow hidden. And now you can see all of the elements are invisible. And when we hover over the image, they appear again. And the effect that we want happens perfectly. 55. 58 - border sniper menu effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this nice menu hover effect. You can see when we hover over any link in this menu, this cool effect happens where we have these four little yellow borders that show up. So let's see how we can create this effect. I will start here in my HTML by adding a UL. Then inside that, an LI, then an anchor tag. And I will say home. Then I will add two spans inside the anchor tag next to the text. So we will use these spans degree the four border surrounding the links, and we will see how. Then I will copy this list item, paste it again four times. And I will say about services. Contact. Here are the menu items. Let's go to our CSS and style them. I will target the UL. When I will add padding 0. Then in order to make the list item sit side-by-side, I will add display flex. Then I will target the list items and add list-style none. Then padding 10 pixels from top and bottom and 40 pixels from left and right. Then I will target the anchor tag and add text decoration. None. When text transform. Uppercase. Font size 24 pixels, where in color, white, position, relative. And finally, padding, five pixels. And now you can see the menu is looking so much better. Now, I want the links color to change to yellow when hovering over them. So I will say where hovering over the link. I will change the color to this yellow color. All right, let's keep going. Let's create the four little borders that surround the links. We will do that using the before and after pseudo elements of the two spans we added inside the link. So I will say span. First child, colon before. So this selector here targets that before pseudo element of the first span. And inside this I will add content, empty strings, position absolute. And this will be the border that sits on the top left corner. So we will add top 0 and left 0 as well. Then width eight pixels and height eight pixels. Then I will add background color. Transparent because we don't want the background to appear. We just want the borders. We now add border, two pixels, solid yellow. And border left. Two pixels solid. Our yellow color as well. And finally, I will add transition 0.2 seconds. So now you can see we have these two little borders on the top left corner, and they are the left and top borders. Alright, let's create the borders on the top right corner. So I will go back and copy this block of code, paste it again, and change before to after. So we will target the after pseudo element of the first span. When inside that I will change left to right to position it on the right. Then I will also change the border left here to border rate. So you can see we now have these borders on the top right corner. Alright, let's create the border that sits on the bottom left corner. I'll paste them before pseudo element code again. Then I'll target the before pseudo element of the last child, not the first. Then inside that I will change top to bottom because we want these borders to appear at the bottom left corner. Then I'll also change the border to border bottom. And as you can see, we have the border sitting on the bottom left corner. Let's create the last border that sits on the bottom right corner. I will copy this code. Then paste it again and target the last child of the after pseudo element. Then change left to right. And also change border left to border right. And now, as you can see, we have the final border that sits in the bottom right corner. Okay? Finally, we want to create our hover effect. When hovering over the links. We want the borders to change their position to give us the effect we want. So let's do that. I will say when hovering over the link, I will target the before pseudo element of the first span. And if you remember, this is the border that sits in the top left corner. When inside that I will change top to negative 10 pixels and left to negative 10 pixels as well. And now when I go and hover over the link, you can see the border on the top left corner moves and changes its position to this new position. All right, Let's also do the same for the other borders. I will go back to my CSS and copy this code. And again and target the after pseudo elements this time. And if you remember, this is the border that sits in the top right corner, then I will change left to right. When I will paste the code again. And Target D before a pseudo element of the last child with time, then change top to bottom. So this is the border that sits on the bottom left corner. And I will paste the code one more time and target the after pseudo elements of the last child. And I will change top to bottom and left to right. And now when I go and hover over any link, you can see the four borders are changing their position, giving us the effect we want. We only thing left is making the borders invisible. Then make them appear only when we hover. So let's go back and do that. I will set the opacity for all the borders to 0. And when hovering, I will set the opacity back to one. And now you can see the borders are invisible. And when hovering over any link, they appear again and move from their position to this new position, giving us our cool effect. 56. 59 - creative menu border rotation effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this nice menu hover effect. You can see when I hover over any link in the menu, this effect happens where we have the top and left borders rotate by 360 degrees and they shrink at the same time until they become smaller. The same effect happens to the right and bottom borders as well. So let's see how we can create this effect. I will start here in my HTML by adding a UL. Then inside that, I will add an LI, then an anchor tag inside that. And I will say home. Then I will copy the URL, paste it again four times, and say about services, team and contacts. When I will go to my CSS target, the UL, and I will add margin 0, padding 0 as well. Then in order to make the link sit side-by-side, I will add display flex. Alright, now I will target the LI inside the UL and add list-style none. Then I will target the anchor tag and add position relative. Then display block, padding, 15 pixels from top and bottom, and 30 pixels from left and right. Then I will add margin, 0 from top and bottom, and 15 pixels from left and right. Then I will add text decoration. None. Text transform, uppercase. And finally, color, this yellow color. All right, you can see the links are now looking much better. Let's go back and create the borders. We will start by the borders that sit on the top and left sides of the links. And we will use the before pseudo element to do that. I will go here and select the before pseudo element of the link. Then I'll add content. Strings. Position absolute, top 0, left 0 as well. When width 100%, and height 100% as well. Let's add the borders. I will add border top two pixels. Solid. This yellow color. When border left, two pixels, solid yellow as well. Then I will add transition 0.5 seconds. And finally box sizing border box. And as you can see, we now have the borders on the top and left sides. All right, Let's start creating our effect. I will go back here and I will say when hovering over the anchor tag, I will make some changes to the before pseudo element. I will set its width to 15 pixels and its height to 15 pixels as well, so that the before pseudo element will shrink and the borders will shrink with it. So now when I go and hover over the links, you can see the border shrink and become smaller until they have a width and a height of just 15 pixels. Now, let's rotate the borders while shrinking them as well. I will go here on the hovering effect and add transform, rotate 360 degrees. Then I want it to rotate along the left side. So I will go up here inside the before pseudo element and add transform origin left. And now you can see when I hover over the links, we rotate while shrinking, giving us this cool effect. All right, let's create the right and bottom Borders. I will use the after pseudo element to create them. So I will just copy the before pseudo element, paste it and change before to after. I will also change top to bottom and left to right. I will also change border top two border bottom and border left to border rate. Then we want to rotate it along the right side. So I will change the transform origin property to right instead of left. So now you can see we have created the right and bottom borders using the after pseudo element. Let's create the hovering effect. I will go back and copy the hovering effect on the before pseudo element. Paste it and change before to after. And now when I go back and hover over the links, you can see the right and bottom borders are also shrinking while rotating around the right side. And now we have the exact effect. We want. 57. 60 - creative colorful layered menu effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this nice menu hover effect. You can see we had these links and their color is transparent and we have a text stroke around them. And when I hover over any link, this effect happens where we have three layers of the links. The original white layer whose color changes to white, and a red layer on top of that, then a light blue layer on top of both of them. This is a really cool effect. So let's start creating it. I will go here in my HTML, add a UL. Then inside that, I will add an LI, then an anchor tag, and say home. Then I will add data text, home as well. Then I will copy this list item, paste it again four times, and say about Services, Team and contact. Then I will go to my CSS, target the UL and add margin 0, padding 0 as well. Then I will target the list items inside the UL and add list-style none. Then I will target the links and add position relative display block. And we just want a stroke around it, so we'll add color, transparent. And then we will add webkit. Text stroke, one pixel white. I will add font size, 80 pixels, font-weight, 900. And finally, text decoration, none. And now you can see the links look exactly the way we want. They have a transparent color and a white stroke around them. Alright, let's create the red layer that sits on top of the link. And we'll create it using the before pseudo element. So I will go here and target that and add content. A TTR. Data text to grab the text inside the data text attribute of each link. Then I will add position, absolute, then top 0, left 0, and transition 0.5 seconds. Alright? When hovering over the link, we want the before pseudo element to appear and take the red background. So I will say when hovering over the anchor tag, I will select the before pseudo element and add color. This red color. Then Z index one, then webkit text stroke one pixel black. So we will have a black stroke around the red background. Then finally, I will add transform, translate 10 pixels along the x axis to the right and negative 10 pixels along the y-axis towards the top. And now you can see when I hover over the links, this red background appears and moves to the top right side by ten pixels, giving us this nice effect. All right, let's work on the light blue layer. We will create it using the after pseudo element. So I will go here and add a colon after, next to the before pseudo element. Then I will copy the hovering effect. Paste it again, and select the after pseudo element instead of the before. And I will change the color to this light blue color. Then I will change the z-index to two instead of one. Then I will modify the transform property to 20 pixels and negative 20 pixels. So it will be shifted more to the top and the right. Now you can see when I hover over the links, the light blue layer appears and moves to the top right corner of the red layer, giving us this cool effect. The only thing left now is changing the first layer color to white instead of transparent on hovering. So I will go back and say, when we hover over the link, I will add color white. Then webkit text stroke, one pixel, black. Then finally transition 0.5 seconds. And now you can see when I hover over the links, the first layer now has a white color and a black text stroke. And this is the exact effect we want. 58. 62 - background translation card effect: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create another card hover effect. You can see we have this card that is a white background with some box shadow around it, separating it from the white body background. And it contains some content. And we also have this thin pink line that sits on the bottom. And when hovering over the card, the pink line gets bigger and covers up the card and the text color becomes white at the same time. So let's start creating that. I will go here in my HTML and add a div, give it a class of card. Then inside it, another one with a class of content. And inside that, I will add an H2 and say design. Then below that I will add a paragraph and add some Lorem Ipsum text. Then finally an anchor tag. And say Read more. All right, let's go to our CSS and select the card div. I will add position, relative width, 320 pixels. Then panning, 40 pixels. Background color, white. Then finally, box-shadow, 010 pixels, 30 pixels. And finally RGBA, 0, 0, 0, 0, 0.1. So now you can see we have this white background that has this box shadow around it. Alright, let's work on the pink background that sits at the bottom of the card. We will create it using the before pseudo element. So I will target it and add content. Empty strings. Position absolute, left, 0, bottom. And we want to position it just five pixels above the bottom line of the card. So I will add calc negative 100% plus five pixels. And then we wanted to take up the full size of the car. So we will add width, 100%, height, 100% as well. Then background color, this pink color, then z-index one, and finally transition, 0.5 seconds. All right, you can see the pink background is sitting at the bottom. Let's go up here inside the card div and add overflow hidden. And now you can see the pink background is positioned at the bottom and only five pixels of it are visible. Now, when hovering over the card, we want the pink background to move to the top and cover up the white card. So I will go back here and say, when hovering over the card. I will select the before pseudo element, which is the pink background. And I will add bottom 0. And now when I go back and hover over the card, the pink background moves in, sits exactly above the card. All right, Let's continue working and we'll go back and target the content div. Then I will add position, relative, text transform, capitalize, color. This gray color. Then in order to make the content appear in front of the pink background, I will add Z index 2. And finally, I will add transition 0.5 seconds. And now the content has this gray color. And when we hovered, the content appears in front of the pink background. All right, let's go back and select the H2. Then add margin bottom ten pixels, and margin top 0. Then font size 30 pixels. Then I will target the paragraph and add font size 18 pixels. Then finally, I will target the anchor tag and add margin top 10 pixels. When font size 14 pixels, display inline-block text decoration. None. Color. This gray color. Padding. Six pixels from top and bottom, and ten pixels from left and right. Then font-weight, 600, background color, white. And finally, box shadow 0, two pixels, 20 pixels, RGBA, 0, 0, 0, 0, 0.05. And now you can see the link is looking much better. Finally, when we hover over the card, we want the text color of the content to change to white. So I will go here and I will say, when hovering over the anchor tag, I will change the color of the text to white. And now when I go back and hover, you can see that the text color changes to white, giving us the exact effect we want. 59. 63 - creative expandable card effect: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice card hover effect. You can see we have this image that sits on top of a white background. And when we hover over that, the card expands vertically and the image moves to the top. Then this text comes in from the top and moves to its position. This is a really cool effect. So let's see how we can create it. I will start here in my HTML by adding a div and giving it a class of card. Then inside that, I will add another div and give it a class of image box. So obviously this will be the div that contains our image. Then inside it we will add our image. Then below the image box div, we will add another one with a class of content to add the text that appears when hovering inside this div. Then I will add an H2 and say card hover. Then finally a paragraph with some dummy Lorem Ipsum text. All right, let's go to our CSS to style that. We will create the white background that sits behind the image using the card div. So I will target that. And I will add position relative. Then width, 300 pixels, height 260 pixels. Then I will add border-radius, 10 pixels. Then in order for the white background to be visible in front of the white body, we will add box-shadow, 0 pixels, five pixels, 20 pixels. Then RGB a, 0, 0, 0, 0, 0.5. And finally, I will add transition 0.3 seconds. All right, as you can see, the white background is not showing up because the image is covering it up, but it is there. So if I go back and change its width to 800 pixels, for example, you can see that it's now visible. Alright? I will go back and set the width to 300 pixels again. Then I will add padding, 20 pixels from top and bottom and 40 pixels from left and right. And you can see the white background is visible now due to the padding we added to it. Alright, let's target the div with the class of image box to style the image. I will add position, relative width, 100%, height, 100% as well. Then I will target the image itself and add width, 100% of its container width and border-radius, 10 pixels. As you can see, the image is now scaled down. 60. 64 - creative captain marvel card effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this nice card hover effect. As you can see, we have this card that has a Captain Marvel image in the center. And when hovering over the card, this effect happens where the image gets bigger and moves to the right. And at the same time, this text on the left appears and moves from the center to be positioned on the left. And as you can see, it contains a heading, a paragraph, and a link. So let's see how we can create this effect. I will start here in my HTML by adding a div and giving it a class of card. Then inside that, I will add another div with the class of content. And inside that we will add the content. I will start by adding an H2 and saying Captain Marvel. Then below that I will add a paragraph and add some dummy text. Then finally an anchor tag. And say read more. That's it for the content, I will go below the content div and add an image. Then I will add our image. So as you can see, we have the content at the top and our image is sitting at the bottom. All right, let's move to our CSS and target the card div. Then I will add position, relative width, 500 pixels and height 300 pixels. Then I will add display flex to make the content and the image sit side by side, like so. Then we want to send to them vertically. So I will go back and add align items. Center. I will also add background linear gradient. And I will add this gradient value. Then finally, I will add border-radius 20 pixels. And now you can see the card div now has this gradient background and some border radius around the corners. All right, let's work on our image and center it inside the card. I will target it and add position absolute bottom 0. And in order to center it, I will add left 50%. Then transform, translate X negative 50 percent. Then we want to decrease its height a little. So I will add height 400 pixels. And finally, transition 0.5 seconds. And now you can see the image is centered inside the Cardiff and its height is smaller. All right, let's work on the hovering effect. When hovering over the card, we want the image to get a little bigger and then move to the right. So I will go here and say, when we hover over the card. I will make some changes happened to the image. I will set its height to 450 pixels instead of 400 pixels. I will also add left 80 percent to move it to the left. And now when I go back and hover over the card, you can see the image gets bigger and moves to sit on the right side and the left side becomes empty because this is where we are going to position the content. So let's go back to our CSS and target the content div. Then we will add position relative 40% of the card width. Then left, 20 percent. Color, white. Text transform, capitalize. And finally, transition 0.5 seconds. And now you can see the content is sitting 20% of the card width from the left, so we want to hide it. And when hovering over the card, we want it to appear again and move to sit on the left. So I will go back inside the content div and add opacity 0. Then below that, I will say when hovering over the card, I will select the content and add left 5% instead of 20%. And opacity one again. And now you can see the text is hidden. And when hovering over the card, the text appears again and moves to sit on the left. We only thing left now to do is style the elements inside the content. Did so I will target the H2 and add margin 0, padding 0 as well. Then I will target the paragraph and add margin-bottom 20 pixels. Then finally, I will target the anchor tag and add position. Relative. Display. Inline-block color. This dark gray color. Then padding, five pixels from top and bottom and ten pixels from left and right. Then background, white, text decoration, none. And finally, border-radius 10 pixels. So now you can see the content elements and the link are looking much better. And we have now completed this nice card effect. It was a simple but cool one. So I will see you in the next lesson. 61. 65 - creative border card effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we will create another card hover effect. You can see we had this dark blue background with the number 88 on it. And when hovering over that, the blue background shrinks and converts into a small circle with a blue border around it. And the number 88 becomes smaller and its color changes to dark blue. Also, this text here appears, and we have a heading, a paragraph, and a link. Alright, let's create this effect. I will go here in my HTML and add a div, give it a class of card. Then inside it, I will add another div with a class of face and face one. So this will be the div that contains the heading and the paragraph and the link. All right, inside it I will add an H2 and say services. Then below that I will add a paragraph and add some dummy text. And finally an anchor tag. And say read more. Then below that div, I will add another div with the class of phase and phase two. So this will be the div that has a dark blue background. And inside it I will add an H2 and add the number 88. Okay, then I will move to our CSS and target the div with the class of card. And add position, relative width, 300 pixels, 400 pixels, then background, white. And finally transition, 0.5 seconds. All right, now we have a white background that is centered inside the browser. When hovering over this card, we wanted to have some box shadow. So I will say when hovering over the div with the class of card, I will add box-shadow, 030 pixels, 50 pixels, and RGBA. 0, 0, 0, 0 point to. And now when I hover over the card, we have this nice box shadow below the card. All right, let's keep going. I will target the div with the class of face. And this class is applied to both the first and the second phase. So it's a common class. Then I will add position absolute, top 0, left 0 as well. Then we wanted to take up the full size of the card div. So we will add width 100% and height 100% as well. I will add display flex. Then justify content. Center to center the text horizontally and align items center to center it vertically. And as you can see, the text is now centered horizontally and vertically. Alright, let's work on the first phase that has our content. I will target the div with the class of phase one, and I will add padding, 20 pixels. Then text align center to center the text background color white. And finally, color, this dark blue color. Then I will target the H2 inside this div. And I will add margin top 80 pixels. So there will be enough space above the H2 for the number 88 to sit inside. Let's also style the anchor tag. I will target it. And add display, inline-block. Then margin top 20 pixels to get some spacing between it and the paragraph. Then padding five pixels from top and bottom and ten pixels from left and right. Then text-decoration. None. Color. This dark blue one. And finally, border. Two pixels, solid. Our dark blue color. Var1 text transform. Capitalize, font-weight, bold. And finally transition 0.3 seconds. And as you can see, the anchor tag is looking much better. All right, let's style the second phase. Now, I will target it and add background color. Our dark blue color, then transition 0.5 seconds. And now you can see we have this dark blue background that sits on top of the first one. Let's also sell the H2 inside it. I will target it and add font size, 120 pixels, color white. And finally transition 0.5 seconds. Okay, let's work on the hovering effect. Now. We'll hovering over the card. We want this blue background to scale down and become a circle. So I will say when hovering over the card, I will select the second phase and add tight 80 pixels. Width 80 pixels, then border-radius, 50 percent to make it a circle. And as you can see, when we hover, the background becomes smaller, enters into a circle. Let's position it properly. I will go back again and add top 40 pixels. Left. 50 pixels. Then transform, translate X negative 50% to center it horizontally. Then I will add background color, transparent. And finally, border, two pixels, solid, our dark blue color. And now when I hover over the card, you can see the circle is now positioned properly on top of the content div. Now, let's now the H2. When hovering, I will say when we hover over the card div, I will select the H2 that is inside the second phase. And I will change its color to our dark blue color. And I will add font-size 32 pixels. And now when I go back and hover, you can see the heading color becomes blue and its size gets smaller, giving us the effect we want. Finally, we just want to change the link background when we hover over it. So I will go here and say when hovering over the anchor tag, I will change the background color to dark blue. And I will change the color to white. And now when I go and hover over the link, you can see its background color changes to blue, and the text color changes to white. And that's it, everybody. We have now created the card effect. We want. 62. 66 - creative double face card hover effect: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice card hover effect. You can see we have this dark gray background that has some box shadow around it. And it also has an image and the word design below the image. And when we hover over it, it moves to the top and its color changes to this pink color. And another white background that contains a paragraph and a link moves to the bottom and sits behind this pink background. All right, let's start creating this card effect. I will go here in my HTML and add a div, give it a class of card. Then inside that, I will add another div with a class of phase one. So this will be the card face that contains the image and the word design. So inside it, I will add another div with a class of image box. And inside that I will add an image tag and add our image. Then I will add an h3 and add the word design. Then below that I will add another div with the class of phase 2. And inside it, I will add a div with a class of content. Then a paragraph inside that div with some Lorem Ipsum text. Then finally an anchor tag below that. And I will say read more. Now, I will go to my CSS and target the card div. Then I will add position, relative, cursor, pointer, and width 300 pixels. So now you can see the card div has a width of 300 pixels and it sits in the center of the browser. All right, let's go back and target the div with the class of face one that contains the image and the h3. Then inside it, I will add position, relative width, 300 pixels, 200 pixels. Background color, black for now. Then I will go back and add display flex, flex direction column to make the image and the H3 sit one above the other. Then to center them horizontally and vertically inside the face one div I will add justify content center, and align items center as well. Then finally I will add transition 0.5 seconds. All right, now let's target the second div with the class of phase 2. Then inside it, I will add position. Relative width, 300 pixels, height, 200 pixels. Background color, white. Then also display flex, flex direction, column. Justify content, center. Align items center as well. Then box-sizing, border-box, and finally padding 20 pixels. So now as you can see, we have this white background that contains the paragraph and the link, and it sits behind the black one. All right, Let's also add some box shadow to this white background. I will go here and add box-shadow, 020 pixels, 50 pixels, RGB, 0.8000. Then finally, I will add transition 0.5 seconds. And as you can see, the white background now has this shadow around it. Alright, now let's work on the hovering effects. We want the two phases to sit one above the other. And when hovering, we want the first phase to move up to the top and the second phase to move to the bottom. So to do that, I will go here inside the div with the class of phase 1 and add transform, translate y 100 pixels. Then below that, I will say when hovering over the card div, I will select the face one div. Then I will change the black background to this pink color. I will also add transform, translate y back to 0 again. And now you can see the black background has moved to the bottom by 100 pixels. And when we hover over the card, it goes back to its position at the top and its color changes to this pink color. Let's do the same for the second div. At the bottom, I will go inside the div with the class of phase 2, and I will add transform, translate Y negative 100 pixels, then below that. And when hovering over the card, I will select the face to div. And add transform. Translate Y 0 again. And now you can see the white background is shifted towards the top and it's covering up the black one. And when hovering over the card, this effect happens where the white background moves to the bottom and the pink background moves to the top, giving us the exact effect we want. But we want the pink background to appear in front of the white one, not the opposite. So I can go back here inside the face one div and add z-index 1. Let's also change the background color from black to this dark gray color. And as you can see, the face one div has this gray color and it's sitting in front of the White did, and when hovering over the card, are effects still functions properly. Alright, now let's work on styling our card. I will target the div with the class of image box that contains our image. And I will add opacity 0.2 and transition 0.5 seconds. Then below that I will say, when hovering over the card, I will select the image box div and add opacity one again. And as you can see, the image and the H3 are now a little bit transparent. And when hovering over the card, they become completely visible again. Let's go back and target the image inside the face, one div. Then I will add width 100 pixels. Then I will also target the H3, which is the word design, and add margin ten pixels 00. Then I will add padding, 0, color, white, text, align, center. And finally, font size, 25 pixels. So now you can see the image and the H3 are looking much better. Next, let's work on the paragraph and the anchor tag inside the second phase div, I will target the paragraph first. Then I will add margin 0, padding 0. Well, then I will target the anchor tag and add margin 15 pixels 00. Then I will add display, inline-block, then text-decoration. None, font-weight, 900 color. This gray color. Then padding five pixels. And finally border. One pixel, solid, this gray color as well. And now you can see when I hover over the card, the paragraph and the anchor tag are looking much better. Let's just do one final thing and that is changing the background color of the link when hovering over it. I will go here and say, when hovering over the anchor tag, I will add background color, our gray color, then color white. And now when I go and hover over the link, you can see its background color changes and its color changes to white as well. That's it, everyone. We have now finished this cool card effect, and I think it's looking amazing. 63. 67 - creative layered card hover effect: Hello everyone, welcome to this new lesson in the course. In this lesson, we will create this layered card hover effect. You can see when I hover over the card, this effect happens where to white layers of the card are rotated by a specific degree, giving us this effect. Also, there is a whitespace at the bottom that appears and it contains this text. All right, let's start creating this effect. I will go here inside my HTML and add a div, give it a class of card. Then inside it, I will add another div with the class of image box. So this will be the div that contains the image. Then below that, I will add another div with a class of details. And inside it I will add an H2 and say John Doe. And then I will add a line break tag. And I will add a span and just say founder. Then I will go to my CSS and target the car div. Then I will add position, relative width, 320 pixels, height, 350 pixels. Background, white, border radius, four pixels. Then box-shadow, 02 pixels. Ten pixel's, RGBA, 0, 0, 0, 0, 0.2. And now you can see we have this white background that sits in the center of the browser. All right, let's create the two white layers that sit below our card. We will create them using the before and after pseudo elements. So I will select V before pseudo element of the card div. I will also select the afternoon. And I will add content. Empty strings. Position, absolute, top, 0, left, 0, width, 100%, height, 100% as well. When border-radius. For pixels, background color, red for now. Then finally transition 0.5 seconds. And now you can see we have this red background that sits on top of the card. Let's go back and change the background color to white. Again. I will also add z-index minus1. To make the white background sit behind the card. All right, now, when hovering over the card, we want the before and after pseudo elements to rotate so that we can get our effect. So I will go here and say when hovering over the card, I will make some changes happen to the before pseudo element. I will add transform, rotate 20 degrees. I will also add box-shadow, 02 pixels, 20 pixels, RGB, 0, 0, 0, 0 point 2. Let's do the same for the after pseudo element. I will copy that, paste it again and change before to after. Then I will just change the rotation degree to ten degrees instead of 20. And now you can see when I hover over the card, this effect happens when we have two white backgrounds that rotate by different angles, giving us this layered card effect. All right, let's work on the image box div that should contain our image. I will target it and add position absolute, top 10 pixels, left, 10 pixels, bottom ten pixels, right? Ten pixels as well. So this div will have ten pixels of space around it. Then I will add background color. This dark gray color. Then finally transition 0.5 seconds. So here we have a dark background that is surrounded by V card div. Then when hovering over the card, we want this dark gray background to be shifted a little towards the top. So I will go here and say, when hovering over the card, I will select the image box div. And I will change bottom to 80 pixels instead of 10 pixels. And now you can see when I hover over the card, the dark gray background shrinks a little from the bottom, leaving this whitespace. And this is where we are going to position our content. So I will go back here and target the div with the class of details. Then I will add position, absolute, left, 10 pixels, right? Ten pixels, bottom, ten pixels as well. Then I will add height, just 60 pixels. And finally, text align center. And now you can see we have our details sitting on the bottom. All right, Let's continue working and we'll go here and target the H2. Then I will add margin 0, padding 0 as well. Then font-weight, 600. Font size, 20 pixels. Color. This gray color. Then finally, text transform uppercase. And now you can see the H2 has this gray color and is sitting exactly at the position we want. Let's keep going. I will target the span inside this H2, which is the word founder. Then I will add font weight, 500. Font size, 16 pixels. Then color this red color. And now the details are looking exactly the way we want. And when hovering over the card, the gray background shrinks and the details appear. Let's just hide the details behind the gray background. I will go back here inside the image box div. And I will add z-index too. And now you can see the details are hidden. And when hovering over the card, they appear again below the dark gray background like we want. Cool. Now let's go back and add our image. I will go to my HTML and I will go inside the image box div and add image. Then I will add our image. Then I will go to my CSS and target the image and add position. Absolute, top, 0, left, 0, width, 100%, height, 100%. Then finally, object fit, cover. And now you can see our image now appears inside the div. And when hovering over the corner of the image, DIV shrinks towards the bottom and the details of the card appear giving us the exact effect we want. 64. 68 - creative scaling card effect: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice card hover effect. You can see we had this image and this text at the bottom says post title. And when we hover over the card, this effect happens where the title expands and takes up the full size of the card In this paragraph and link appear below the title, the image also disappears. So let's start creating this effect. I will go here in my HTML and add a div, give it a class of card. Then inside that, I will add another div, give it a class of image box. So this will contain our image, but we will add that later. Then below that, I will add our content. I will add a div, give it a class of content. Then inside that, I will add an h3 and say post title, then a paragraph tag, and then some Lorem Ipsum dummy text. And finally an anchor tag. And say Read more. Next, I will move to my CSS and target the div with the class of card. And add position. Relative width, 300 pixels, height 400 pixels. Then I will add a background color. And finally, box shadow, 0 pixels along the x axis, then 30 pixels along the y-axis, so that we have some shadow below our card when a blur value of 30 pixels as well, then the color of the shadow will be RGBA, 0.5000. And now you can see we have this card with a black background and some texts shadow below it. All right, let's work on styling the contents so it looks how we want. I will go here and target the div with the class of content. Then I will add position Absolute to position it relatively to the car did then we want to position it at the bottom of the card. So we will add bottom 0 pixels. Then width, 80% of the card width, and height, just 80 pixels. Then I will add background color, white. So now you can see we have this white background that contains our heading and our paragraph, and it sits the bottom corner of the card. All right, Let's center this white background horizontally. Since it has a width of 80 percent of the card width, this means that the remaining space right here is 20% of the card width. And if we shift the content to the right by 10% of the card width, there will be 10 percent space remaining on the left and 10 percent space remaining on the right. And this will sent to the content. So let's do that. I will go here and add left 10 percent to shift the content div to the right by 10 percent. As you can see, it's centered now. All right, let's go back and continue working. I will add text align center to center the text inside the content div. Then finally, transition 0.5 seconds. Alright, in order to see what we're doing, Let's just make the height of the content div 100% instead of 80 pixels. Okay, let's style the elements inside the content div. Now, I will target the H3 and add font size, 30 pixels. Text transform. Uppercase, the margin, 25 pixels. All right, let's style the paragraph I will targeted and add width. 80% of the content width when margin ten pixels from top and bottom and from left and right to center it horizontally. Then font size 18 pixels. And finally, transition, 0.5 seconds. Cool. Now let's target the anchor tag and add text, decoration. None, background color, black, color white. Then padding, 10 pixels from top and bottom, and 15 pixels from left and right. Then display inline-block margin, top 10 pixels. When finally transition, 0.5 seconds. All right, you can see there is not enough space, but this is because we set the width of the content to just 80% of the card debt. But when we set it to 100%, our content div will look much better. So I will go back here inside the content div, and I will set the height back to 80 pixels again. And I will also add overflow hidden to hide the text outside of the 80 pixels of our content div. Cool. Now we want to make the content div expand and take up the full width and height of the card div when we hover over the card. So I will go here and say, when we hover over the card. I'll make some changes happen to the content div. I will set its height to 100% and its width to 100% as well. And now you can see when I hover over the card, the white background gets bigger and takes up the full size of the current does. But you can also see it's shifted to the left. And this is because we set its left property to 10 percent in order to center it horizontally, if you remember. So we can fix that easily by adding left 0% instead of 10%. And now you can see the white background fits in the card div perfectly and covers it up completely. All right, let's add some final touches to this effect. We want the paragraph and the anchor tag to be visible and appear only when we hover over the card. So I will go inside both the paragraph and a link and set the opacity to 0. Then I will go right here and say, when hovering over the card, I will select the paragraph. I will also select the anchor tag with that. And I will add opacity one, then transition delay 0.5 seconds so that it will take a little while before appearing. And now when I go and hover over the card, you can see that the paragraph and the anchor tag appear after the white background fully shows up, giving us this cool effect. All right, let's go ahead and add the image to this card. I will go back to my HTML. And here inside the div with the class of image box, I will add our image. Then I will go back to my CSS and target the div with the class of image box. Then I will add position, absolute, top 0, left 0 as well. Then width, 100%, height 100%. And finally, transition 0.5 seconds. Alright, let's tell the image. I will target it and add width, 100%, height, 100% as well. Then object fit, cover. And finally, transition 0.5 seconds. And now you can see the image is taking up the full size of its container and looking exactly the way we want. Alright, Finally, when hovering over the card, we want the image to become transparent. So I will go here and say when hovering over the div with the class of card, I will select the image and add opacity 0. So that's it, everyone. You can see when we hover over the card, the image gradually becomes transparent. And now we have finished this cool looking card effect. 65. 69 - smoky text effect using css transforms: Hello everyone. In this lesson we will create these creative smoky fading out effect for the text. So we will start here in our HTML, and I will add a UL. Then LI. And I will put every letter inside an ally. So I will add S right here. Then I will copy that and paste it again many times. And then I will add all the letters grade. So now let's add some styles. I'll go to my CSS and I will start by adding a dark gray background color to the body. Then I will target the UL. And I will add margin 0, padding 0 as well. Then I will add display flex so that all the letters will be displayed side-by-side, like so. Now we will target the list items which contain the letters. And I will add list-style none to get rid of these bullets. Then I will add color, white, then font size, 100 pixels, font-weight, bold, letter spacing, ten pixels. And finally, transition to seconds. And now the word is looking better. If we take a look at a demo, and if you look carefully at the movement of the letters, you can see that they are moving upward and rotating at the same time. So we will use the translate function to make the letters move upward and the rotate function to make them rotate obviously. So let's go to our CSS and when I hover over the UL, I want to make some changes happen to the ally. The first change is I want to add transform, rotate 45 degrees. Then a space. I also want the letters to be translated vertically on the y-axis by minus 200 pixels, so they will move upward. Now, when I hover over the UL, you can see the letters move upward and rotate at the same time. Now, I also want the opacity of the letters to be 0. So I will go right here and add opacity 0. And now when hovering again, the letters in that being transparent. Now in order to make this smoky or blurry effect, we can use a CSS property named filter. So I will go right here inside the list items and Add Filter blur 20 pixels. So this is a CSS property that will make the texts blurry and give it this nice smoky effect. And the higher number you add here, the blurrier it will get. So now when I hover over our word, you can see we're getting exactly the effect we wanted. Now, one thing left. We don't want this effect to happen to all the letters at the same time. We want the first letter to disappear first, then the second, then the third, and so on. We can do this easily using the transition delay property, which will delay the occurrence of the transition. So what I will do is I will go right here and say LI, colon. Dash child, open parentheses, 1, close parenthesis. This will target the first child of the list items, which is the letter S. Next, I will copy this and paste it four times. And I will change the number every time. So two for the second letter, three for the third, for, for the fourth, five for the fifth. Then I will go right here to the first letter and add transition delay 0 because we want it to disappear immediately. Then we will copy this and make it 0.4 seconds for the second letter than 0.8 seconds for the third, 1.2 seconds for the 4.6th, one seconds for the fifth. And now when I go and hover over the word, the letters should disappear one after the other. Like so. 66. 70 - Fill Text Effect On Hover: Hello everyone. In this lesson we are going to create this text fill effect. When hovering over this word, you can see this nice fill in effect is happening. So let's actually do that. I will start here in my HTML by adding an H1. And we will just say text. Then we will go to our CSS to add some styles. We will target the H1. Then add margin, 0, padding, 0, font family. Daniel. Font size, 120 pixels. Color. This light gray color. Text transform uppercase to make all the letters capitals. And finally, position relative. So here you can see it's bigger and all the letters are capital. All right, now let's create the darker text that will come in when we hover over this light gray text, we will use the before pseudo element. So I will go right here and add one colon before. And I will add content. Texts. Position, absolute, top, 0, left, 0, color. We want it to be darker. So we'll use this dark gray color. Right? So here you can see we have the dark text sitting on top of the light texts and covering it up. This is because we said left and top right here to 0. So for example, if I changed tab 100% instead of 0, you can see that it's now sitting underneath the light text. Alright, let's change it back to 0 again. Now, we want to make the fill and effect on this darker text happen when we hover. So we will transition the width property, meaning we will make the width of the dark text 0. And then on hovering, we will make it 100% again. And we will smooth out the action by using the transition property. Got it. Let's get to it. I will go right here inside the before pseudo element and add width 0, overflow hidden. And finally transition. All 0.5 seconds. Then on hovering over the H1, I will make some changes happened to the before pseudo element. I will change the width back to 100 again. So it will appear with its full width, giving us that fill effect we're going for. And there we go. That is how you can do a nice text fill in effect in a very quick and easy way. 67. 71 - social media icons hover effect with css transforms: Hello everyone. In this lesson we're going to create this nice hover effect for the social media icons. So when I hover over any icon, you can see that a green background kicks in, the icon color changes and it gets bigger. So let's see how we can do that. Right? So here in my HTML, you can see I have a link to the Font Awesome icons library that will give us access to all the Font Awesome icons. I will start by adding a div and giving it a class of container. Then inside of it I will add a link and given a class of icon. Then inside that, I will add i for Font, Awesome icons. And I will give it a class of f, a, b, f a Facebook. This class we'll just display the Facebook icon. Then I will copy this link, paste it four times. And I will add the other icons we want, like Twitter, Google, YouTube, and Instagram. So here you can see our icons are all sitting in a row and they're looking pretty ugly. So let's go to our CSS and make them look a little better. I will start by targeting the container. And I will add display flex. Then I will target the links with the class of icon. Add width 90 pixels, then height 90 pixels as well. Then I will add a background color. This white color, margin, ten pixels, border radius, 30 percent. And finally, color are a nice green color. Let's keep it moving. I will go right here inside the container and add text align center to center the icon, like so. Then I will go to the icon and add box shadow and add some box shadow. Then position relative. Right? Now, we need to work on the icons inside our link. So I will say icon, I to target the icons. Then I will add line height, 90 pixels so that the icon will be centered vertically. Then font size 25 pixels, and transition or 0.2 seconds. Good. Now our icons are looking exactly like we want. So let's move on to the next step. When hovering over any link, I want to make the icon change colors to match the background. And I want the icon to become a little bigger. So let's do that. I will say icon on hover. I will make some changes happen to the Font Awesome icon. I will add transform, scale 1.3, so it will become bigger and color this white color, just like the background color. So now when I go and hover over any icon, you can see the color becomes the same as the background, which is why we aren't able to see it anymore. But let's go on to the next step. We need to create the moving green background that shows up when we hover over the icons. So let's create that. I will go right here and add icon colon before. And I will add content, empty position, absolute, width, 120 percent, and height 120% as well. Then background color or green color. Then I will add left minus 110 percent and top 90 percent. So now you can see we have our green background and it's sitting in this position because of the top and left values we added to it. Let's go and add transform. Rotate 45 degrees to rotate the green background. Alright, now we need to make it move across our link when we hover over it. So if we take a look at our demo, you can see that when I hover over the link and the green background comes from its starting position, then moves across the link until it goes up toward the top right a little bit, then returns and covers the link. So we are going to use CSS animations to create this effect. We will have three stages of animation. In the first stage, the background will be at its original position. Then at the second stage, at 50% of the animation duration, the background will be shifted a little to the top right corner of the link. Then we move to the third stage. At 100% of the duration, it will go back to cover the link. So let's do that. I will go right here in my CSS and create a new animation. And just name it animation. And inside of it, at 0% of the animation duration, I will say left minus 110 percent and top 90 percent. If you remember, those are the values that we already applied up here. So that should make the animation start from the original position of the green background. Next, I will copy that. Paste it again. And at 50% of the animation duration, I will change the left to 15 percent and the top to minus 30 percent. Then add 100%. I will make the left minus 10 percent and the top minus 10% as well. Now, we need to add this animation to the green background. So I will go up here. And when hovering over the icon, I will make some changes happen to the green background. I will add animation, then the animation name, which is animation, then animation duration 0.7 seconds. And animation iteration count one, because we want this to happen only one time when we hover. And finally, animation film mode forward because we want the green background to stay in its final position after the animation finishes. And one thing left, which is hiding the parts of the green background outside of the link by going up here inside the icon selector and adding overflow hidden. And now when I go and hover over the link, you can see are green background comes from the bottom left corner, then moves up until it shifts a little beyond the top right corner and then returns and covers the link. And while all that is happening, the icon itself gets bigger and it's colored changes to match the background. 68. 72 - creative rotated text border effect using CSS transforms: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice border hover effect. You can see when I hover over this text, this effect happens where the top and bottom borders appear, then the left and the right ones. Then we have rotated borders that appear one after the other as well. So let's see how we can create this effect. I will start here in my HTML by adding a div and giving it a class of box. Then inside that I will add a span and give it a class of rotated. So this will be the span that has rotated borders. Then below that, I will add an H1. And inside that I will say CSS. Then I will add a line break element so that the coming texts will sit on the following line. Then I will add another span and inside it I will say border. So we wrap this word span just to be able to style it individually. Then after this span, I will add another line break element. And I will say hover, then another line break element and say effect. All right, then I will go to my CSS and target the outer div with the class of box. Then I will add position, relative width, 200 pixels, height 200 pixels as well. Then box-sizing, border-box. And finally, background color, yellow. So now you can see we have this yellow box centered in the browser. All right, let's work on the H1. I will go back and targeted. Then I will add margin 0, padding 0 as well. Then color, this dark gray color. And in order to center the text, I will add position absolute, top, 50 percent. Left, 50 percent as well. Then Transform. Translate, negative 50 percent and negative 50 percent. Then I will add text align, center, font size, 24 pixels. And finally, text transform, uppercase. All right, let's just add a different color to the word border. You remember that we wrapped it inside the span. So let's target this span. And add color. This green color and font size, 30 pixels. Awesome. Let's work on the borders of this yellow box. We will create these borders using the before and after pseudo elements. So I will go here and target the before pseudo element of the box div. Then inside that, I will add content empty strings, position absolute 0, left 0 as well. Then we want it to take up the full width and height of the box div. So we will add width 100% and height 100% as well. Then we will add border top four pixels solid. Our green color. And border bottom four pixels solid. Our green color again. Then box-sizing, border-box, and finally transition 0.5 seconds. So now you can see we have these two borders of the before pseudo element on the top and the bottom of the yellow background. And this is because we set the height and the width of the yellow background to 100%. So if taking up the full width and height of the box div, alright, now let's go and animate these two borders. I will go back here and add transform scale x 0. Then in order to make the borders grow, again, when hovering, I will go here and say, when we hover over the box, I want to make some changes to the before pseudo element. I will add transform scale x back to one again. And now you can see the two borders are now hidden because we set x to 0. And when I hover over the box div, the two borders grow again until their scale x becomes one again. All right, Let's work on the left and right borders. Now. We'll create them using the after pseudo element. So I will just copy the before pseudo element. Paste it again and change before to after. Then. Inside that, I will change border top two border right. And border bottom to border left. I will also copy the hovering effect. Paste it and change before to after. Then I will change the transform property from scale x to scale. Why? And now you can see when I go and hover over the text, this effect happens where we have left and right borders that appear and grow along the y-axis along with the after pseudo elements. Alright, now let's work on the rotated borders. If you remember, we added a span in our HTML markup with a class of rotated, and we said that we will use it to create the rotated borders. Let's see how we can do that. First, I will target it and add position, absolute. Then width, 100%, height, 100% as well. Display block and background color. Yellow. Then we want to transform it by 45 degrees. So I will add transform, rotate 45 degrees. Then finally, box sizing border box. And now you can see we have this yellow background that is rotated by 45 degrees and sits on top of the first background. All right, now let's create the border effect for this rotated background. I will go here and copy all of this code of the box div and it's hover effects. Then I will paste and target the rotated div, not the Box 1. So that will select the before and after pseudo elements of the rotated. Then I will go here and target the before pseudo element of the rotated div when hovering. And the after pseudo element of the rotated div when hovering as well. And now you can see when I hover over the text, this effect happens where the four borders of the rotated backgrounds grow and get bigger, giving us this really cool effect. Finally, we want to add some transition delays between the borders so that they appear one after the other. And we'll go here when hovering over the after pseudo element of the box div. And I will add transition delay 0.5 seconds so that when hovering the right and left borders of the box div, we'll wait 0.5 seconds. Then I will go here and add transition delay 1 second. And then finally here and add transition delay 1.5 seconds. And now when I hover, you can see that the borders are appearing one after the other, giving us the exact effect we want. 69. 73 - animation introduction: Hello everyone. Welcome to this new section of the course where we will be talking about CSS animations and keyframes. Now, the way CSS animations and keyframes work is very simple. First, you have to define or create a CSS animation rule and name it any name you want. Second, you add this animation rule. You create it to any HTML element in the page so that the animation works on it. This will be much easier if we see it in action. So here in my HTML, I have this div all by itself. I've added some styles to it in my CSS. I've just added a width, height, and a red background color. So when we view this in the browser, we can see our empty div is sitting right here. Now let's go back to our CSS and see how to use keyframes and animation on this div. So we said that the first thing we need to do is to define the animation rule. And in order to do that, we write it like this at Mark keyframes. Then the animation name, let's say moving. And then inside of it we use keywords like from and to. So I will say from add, transform, translate X 0, and then to transform translate x 1, 0, 0, 0, 0. So what's going on here is we created an animation rule. And what this animation rule will do is it will take the element from one state to another. So it will take the element from translate X 0, meaning from its original position to translate x 1, 0, 0, 0, 0, gray. Now, if I go to the browser and reload my page, you can see nothing changed. Element is just sitting in its place and no movement has happened. And that is because we created the animation rule right here, but didn't tell the browser which element will receive this animation. So if you're familiar with any programming language, this is very similar to functions where you create a block of code that should do something. And then you add that block of code to the elements you want that block of code to effect. So what we should do here is we should tell the browser what element this animation should work on. And this can be done easily by going to the element itself, which is the div. So there are two properties required to make the animation work on this element. The first is the animation name, which is moving. And the second is the animation duration. Or how many seconds we want this animation to take from start to finish. Let's say three seconds. And now, when I go to the browser and reload, you can see that the div is now starting from translate X 0, in other words, from its original position and moves to translate x 1, 0, 0, 0, 0 over a period of three seconds. This is it for this lesson. That was an introduction to CSS animation and keyframes. We learned what they are and how they work. And in the next lessons, we will learn more properties that will give us further control when using CSS, animations, and keyframes. So see you then. 70. 74 - create css animations with more stages: Hello everyone. In this lesson we'll learn how to create animations with more than two stages. So let's jump right in. Here is the code from the previous lesson. If you take a look at the keywords we're using here, you can see we have from and to. And this means that the element will change from this first stage to this final stage over a specific duration, which in our case is three seconds. Now, what if we want to add more changes and more stages? For example, instead of making the element move horizontally from the first position to the second one, what if we want it to move from the first position to a second one, and then 2 third 1. So we would have three stages. Well, we can do this easily by using the percentage method instead of the keywords from N2. So what we can do here is we can remove this from keyword and add 0% instead. So this 0% means the starting point of the animation duration. Then I will remove this two and add 100%. In this means at 100% of the animation duration, or three seconds. So what I'm doing here is I'm just saying that at 0% of the animation duration, meaning the point I want the animation to start at, I want to add this transform, which will actually change nothing for the element. So the element will start from where it originally was on our page. And then at 100% of the animation duration time, meaning at the end of second three, I want the element to be at this position. So during these three seconds, the element will move from the first position to the second position. And nothing should change from the previous lesson. So I will go to the browser and reload. And you can see the div is moving from its original position to its new position over three seconds, just like we did in the previous lesson. Let's go back to our CSS. Now, this is still two stages. We want more stages than that. We can do that easily using the percentage method because it gives us many choices from 0% to 100%. So for example, if I go right here and change this 100% to 50 percent, and then below that, add 100%. Then Transform, translate 1, 0, 0, 0, 0 on the x-axis. And then let's say 500 pixels towards the bottom. So now we have three stages. The first stage, the second stage, and the third stage. So what will happen is from 0% to 50 percent of the animation duration, meaning from the beginning to the midpoint of the animation duration. Or During the 1.5th one seconds of the full three seconds, the element's position should change from its original position horizontally to this second position. And then in the remaining 1.5 seconds, the element will change from this position to this new position, which is 1, 0, 0, 0, 0 to the right, and 500 pixels toward the bottom of the page from its original position. So when I go to the browser and refresh, you can see the element is moving from its original place to a point 1, 0, 0, 0, 0 to the right during the 1.5th one seconds. And then moves to a new position, which is still 1, 0, 0, 0, 0 to the right, and 500 pixels toward the bottom during the 2.5th one seconds. And then after that returns to its original position once the animation duration is finished. Now we can make the change duration different for each stage. For example, if I change this 50 percent to just 10 percent, in this situation, the first stage will happen much, much faster because it will happen over a period of only 10 percent of the three seconds. While the second stage will happen slower because it will happen from 10 percent to 100%, meaning over a period of 90% of the three seconds. So let's go to the browser and see what that looks like. You can see the first stage is happening much faster now, while the second one is happening slower. So this is it for this lesson, everybody, if you have any questions about it, just leave it in the Q&A section and I will do my best to help see you in the next lesson. 71. 75 - animation fill mode property: Hello everyone. Welcome to this new lesson where we will be learning about the animation film mode property. All right, so what we did in the last lesson is we made this div moved to the right, one hundred, ten hundred pixels, then towards the bottom, 500 pixels, like so. And then after the animation ends, you'll notice that the div is just popping back into its original place. That may seem odd. So what if we want to make the div stay in its final position where the animation ends instead of popping back like that. Well, we can do that using the animation film mode property, which basically tells the browser what to do with the element outside the animation window, meaning before the animation starts and after it ends. So here we're dealing with the second case, which is after the animation ends. And there are two choices. The first one is the element will pop back to its original place, is the default. And the second is the element will stay in its final position. And we will do that using the animation film mode property. So back to our CSS. I will go right here inside the div selector and add animation film mode. And we have four values. The first one is none, which does nothing outside the animation window. It will just say, when the animation is finished, return the div to its original state before the animation. And of course, it's the default value. The second value is forwards, which should interest us in our situation because forwards tells the browser to take the last stage of the animation here and apply it to the element at the end of the animation. So now, when I go to the browser and reload, you can see that the element stays at its final position and doesn't pop back to its original place before the animation. Personally, I think this looks more realistic. Now, we can also use a value called backwards. So to demonstrate this, I will just go back to my CSS. I will go right here and add another property which is animation delay. And let's say three seconds. And what this will do is it will make the animation wait three seconds before it starts. So if I go to my browser and refresh, you can see the div wait three seconds and then starts to move back to our CSS. Now, let's say we want the animation to start from 500 pixels to the right and not from its original place on the page. I will go right here and change this to 500 pixels instead of 0. I will also change 10% to, let's say 50 percent. Because I want the horizontal movement to take a longer time so that we can really see it. And I will also change the transition duration to five seconds so that we can see what is happening clearly. Now, according to the code that we have right here, what should happen is the animation should wait three seconds, and then it should start from this point right here, which is 500 pixels to the right of its original position. And then the animation should go on until it's finished. And at the end, the div should stay in its final position because we said the animation film mode forwards. So when I go to the browser and reload, you can see the animation wait for three seconds. Then the element parts 500 pixels to the right. Then the animation starts and moves on like before. Now, this might not be what you expected. You may have thought that the div would begin here, 500 pixels to the right, and then wait three seconds. And then after that, the animation would start. I mean, that makes sense because we set the starting point of the animation at 500 pixels to the right. But this is not the default. Remember that the default is that before the animation starts and after it ends, the elements should be in its original place. We were able to change the position after the animation is finished and make it the final point of the animation using forwards as a value of the animation film mode property. And we can also do that and make the animation start at the starting point we defined in the key-frames and not in its original place by using another value which is backwards. So I will go back to my CSS and change this forwards, backwards. Then I will go to my browser and reload. And now you can see the animation is starting from the point 500 pixels to the right and not from its original position. But because we change forward, backwards, the div is no longer staying in his final place, it snapping back to its original position again, we can fix this easily by applying both forwards and backwards. So I will go back to my CSS and change this to both. And now when I go and reload the browser, you can see that the element stays on the starting point for three seconds, then moves to the final point, and it stays there are to the animation. So to wrap things up, the animation film mode property just tells us where the elements should start from and where it should end up. If we don't define it, the element, we'll just start from its original state before any animation takes place. And it will also return back to this original state after the animation is finished. But we can use forwards to make the elements day at the final step of the animation. Or we can use backwards to make it start from the starting point of the animation. Or we can simply use both to get the two results together. 72. 76 - animation iteration count property: Hello everyone. Welcome to this new lesson in the CSS animation transition and transforms course, where we will be talking about the animation iteration count property. So animation iteration count simply tells the browser how many times the animation should be repeated and it accepts values of numbers. So two means the animation will be played twice, and three means it will be repeated three times and so on. Great. So here in my CSS we have everything as it was at the end of the previous lesson. I will just remove this animation delay property so that the animation starts immediately. And I will go right here and add animation iteration count. Let's say three. And I will change the animation duration to three seconds so that it will be a little bit faster. And now, when I go to the browser and reload, you can see the animation will be repeated three times before it's finished. Awesome. We can also use the keyword infinite to make the animation play an infinite number of times or forever. So let's go back to our CSS and try that out. I will go right here and change this to infinite. And now when I go back to the browser and reload, the animation will be played forever and will never stop. And that's it for that property. It's very simple. It just specifies how many times the animation should be played. I also want to talk a little bit about another property, which is the animation timing function. This is similar to the transition timing function we learned in the first section of the course. And it accepts the same values which are 0s. Linear. Ease in, ease out and ease in out. So let's review those together. I will change this infinite to one and then add animation timing function yz. So what is does is it makes the movement starts slow, then go faster when n slow. All right, let's see what that looks like. But first, let's change the animation duration to five seconds again. To see what's going on. I will go to my browser and reload. And with the animation plane, you can see the effect of ease. All right, let's go back and try ease out, which starts fast. Wind slows down at the end. Like so. Then ease in, which if you remember, starts slow, then goes faster at the end. And ease in, out, which is very similar to ease as it starts slow, then goes faster in the middle, then returns to slow at the end. And finally, linear, which will make the rate of change constant so that the speed of the movement will be the same throughout the animation duration. And so guys, this is it for this lesson, and I will be seeing you in the next one. 73. 77 - animation direction property: Hello everyone. Welcome to this new lesson in our course, where we will be talking about the animation direction property. The animation direction properties pretty straightforward. It just specifies the direction of the animation and it accepts four values. The first value is normal, which is the default. And it tells the browser to start the animation from its beginning right here to its end, right here. So let's try that. I will go right here and add animation direction, normal. And when I go to the browser and reload, you can see the animation is playing normally from the beginning to the end. The second value we can use is reverse, which tells the browser to play the animation. In reverse, meaning it will start from the animations end and finish at its beginning. So I will change this to reverse and go back to my browser. And you can see the animation is playing in reverse from the end to the beginning. Great. Now the third value is alternate. And what alternate does is it makes the animation play from the beginning to the end, then go back from the end to the beginning. And then from the beginning to the end, and from the end to the beginning and on and on and on until the animation iteration count finishes. So I will change that to alternate. And I will also change the animation iteration count to infinite and the animation duration to just three seconds. And now, when I go to the browser and reload, the animation plays from the starting point to the finishing point, and then returns from the finishing point to the starting point and so on. And we also have alternate reverse, which does the same thing as alternate, but it just starts from the end to the beginning. This is the only difference. So let's check that out. I will add alternate rivers. And you can see it starts from the end to the beginning and then goes back to the end. And it will keep doing that forever. 74. 78 - animation shorthand method: Hello everyone. In this lesson, we will learn how to combine all of the CSS animation properties into one single property. Because if you look at them, there are many properties and they are confusing. So we can combine all of them into one property called animation. But how did we do that? I'll go right here and just say animation. And then the first property I usually add is the animation name. So I will say moving, then a space and add the animation duration, which is three seconds, then a space. And we can just put all of these properties side-by-side. It doesn't matter how they're ordered. They will do the same thing no matter which appears first or a second or whatever. But you have to keep something in mind if you want to use the animation delay property, you have to add the delay time after the duration time, because the browser always considers the first time value you add here as the animation duration, the following time value as the animation delay. So if I add five seconds here, what will happen is the browser will wait five seconds before the animation starts. And just like that, we've combined all the properties into one single property. And we've got the same animation that we wanted before. 75. 79 - floating text using css animation: Hello everyone. In this lesson, we will learn to create this text floating from right to left effect. It's an infinite or enlists animation. And when you look at it, you can see it rotates from left to right, then from right to left, and so on and so forth. We will start here in our HTML by adding an H1. Then inside of it, I will say coming, then BR tags. And inside of that, soon. Now let's go to our CSS. I will target the H1. Add text align center to center the text. Color. White. Then font-family. Arial. Font size, 90 pixels, line height, 90 pixels for that two letter spacing. Then text shadow. These values. And you can see now we H1 is looking exactly like we want. Next, we want to animate it. So I will go right here and create a new animation. I will say at mark key frames. And now we'll name it float. Then I will say from and inside of it, Transform, Rotate five degrees so that the initial state of the H1 will be rotated five degrees clockwise. Then I will say to transform, rotate minus five degrees, so that the final state will be rotated five degrees counterclockwise. And now let's go up here and add this animation to the H1. So I will say animation. Then the animation name float, then the animation duration, three seconds, and the animation timing function linear. Then the animation iteration count, which is infinite. Of course. Now, when I reload the browser, you can see the H1 starts five degrees clockwise, then moves until it rotates to five degrees counterclockwise, then parts back to its initial state. But we don't want that. We want it to move from the initial state to the final state. And then from the final state to the initial state. And keep doing that. We can fix that no problem by setting the animation direction to alternate. So I will go right here and add animation direction alternate. And now when I reload the browser, the H1 should animate the way we want from initial state to a final state. Final state, two initial state, and so on. 76. 80 - rotating loading effect using css animation: Hello everyone. In this lesson, we will create this nice CSS loading animation using keyframes as well as CSS Transforms. So here in my HTML, I will add a div and give it a class of loading. Then I will go to my CSS. Here we have some styles added to the body that will just send to the div and add a nice background color. So now I will target our div with the class of loading. Then I will set its width to 100 pixels. Then it's height to 100 pixels as well. Then I will add background color, white so that we can see it. Then border radius 12 pixels to give it a nice rounded corners. Now, when we go and take a look at a demo and made it slower and made the animation iteration count only one so that we can see clearly what is going on. So when I reload my page, you can see the div starts from its original position, then it rotates on its y-axis by a 180 degrees. And then when it's at 180 degrees on the y-axis, it rotates again on its x-axis by another 180 degrees. So now we have three stages of the animation. The first stage is 0%, and at this point, the rotate y and rotate x are at 0, meaning the element is in its original position without any rotation. Then the second stage is 50 percent, at which the element is rotated by 180 degrees along just the y-axis and the x-axis rotation is still 0. Then the final stage is 100%, where we add the rotation on the x axis by 180 degrees. So that at this stage, the element will be rotated on both its x-axis and y-axis by 180 degrees. So let's do that. I will go to my CSS and create a new animation and name it loading, for example. Then inside of it, I will add the first stage 0% and say Transform. Rotate X 0 degrees and rotate y 0 degrees there too, so that the animation starts from its original location. Then I will add the second stage of the animation at 50 percent. And I will say Transform, Rotate X 0 and rotate y 180 degrees. So at 50% of the animation duration, we want the div to end up rotated by 180 degrees along the y-axis. And then at the final stage, at 100% of the animation duration, I will add Transform, Rotate X 180 degrees, and rotate y 180 degrees as well. And now I will go up here and add animation. Then animation name, which is loading, then animation duration, two seconds, animation timing function, linear. And finally, animation iteration count, which is, that's right, infinite. And because we are using the rotate x, rotate y functions, which work on a 3D environment, we should define a perspective. So I will go up here to the body and add perspective to 100 pixels. And now when I reload my browser, you can see the div. We'll start by rotating 180 degrees on its y-axis, then 180 degrees on its x-axis. And we've got the effect we wanted. 77. 81 - driving a car and a motor bike using css animation: Hello everyone. In this lesson, we're going to create this nice infinite animation where we have a car and a motor bike riding on this road. The idea behind this example is simple. We have a background image, which is this road. And we have two images. One for the car and the other for the motorbike. The color and the motorbike images are not moving. They're fixed in their position. The movement here is coming from the background. So we are animating the background position for the bottom left corner of the image to the bottom right corner. So let's see how we can create this animation. I will go right here in my HTML and add a div with a class of background. Then I will go to my CSS, target the body and add margin and padding 0 for that as well. Then I will target the div with the class of background and add height 100 vh, then background URL, and we will add the road image. Then I will add background position, bottom left. So this is the initial point of our animation. We will animate the background position from the bottom left to the bottom rate so that we can get them moving background effect we want. So let's do that. I will go right here and create a new animation and call it driving. And inside of it. Remember, we want to animate the background position from the bottom left to the bottom right. So I will say from background position, bottom-left to background position bottom right. Great. Now let's add this animation to our background. I will go up here and say animation. Then the animation name, which is driving, then the animation duration, 15 seconds, then linear and infinite, of course, because we want the animation to continue repeating itself indefinitely. So now, when I go to my browser and reload it, you can see that the background position is changing from bottom-left, the bottom rate, and making the background move nice and smooth. And now we only need to add the images of our car and motorbikes. So I will go back to my HTML and go inside our div and add the first image with the class of car. Then the second image below that with the class of motorbike. You can see we have the images here, but they're looking weird right now. So let's add some styles to them. Our go to my CSS and target the car image first. Then I will add position absolute so that we can control the position of the image. Then I will add left 300 pixels and bottom minus 50 pixels. Then I will add with 200 pixels to make the car image smaller. And now you can see the car is looking much better. Now, let's do the same thing to the motorbike. I will go back to my CSS, copy this, paste it again, and I will target the motorbike in this case. Then I will change left to 700 pixels so that it will be a head of the car. Then bottom to 55 pixels. So it will be a little higher and give us that nice 3D feeling. And finally, I will change the width to 150 pixels. And now when I go to the browser and reload, you can see we have exactly the driving animation we wanted. And we can control it. So we can make it faster or slower by changing the animation duration. I will go back to my CSS and make it faster by making the animation duration ten seconds. And now you can see they're driving faster. Now. Before I finish the lesson, I just want to let you know that I got the background image from this side, three pic.com, which has tons of free images you can use. And I got it using this link. You can just find it in the Resource Files. 78. 82 - text rotator using css animation: Hello everyone. In this lesson, we will learn how to create this text rotator using CSS, animations, and keyframes. All right, So here in my HTML, I will add H one. And inside of it, I will say I love CSS. Then I will add an empty span. So this span will contain the different words that will change which our animation transition and transforms. But we will add them using CSS. Now, let's go to our CSS. You can see here I've added some style to the body in order to center the H1 horizontally and vertically. I've also added this background color to the body grade. Now let's target the H1 and add color. White. Then font size 50 pixels. Then I will target the span. And we will use the before pseudo element to add the content we want. So I will say content transitions first of all. And here it is. Then I will add text transform uppercase. When font-family, Arial. And color will be this nice blue color. Now, we want to change the word transitions. We can do this no problem by creating a new animation and naming it word switch. For example. When at 0%, I will set the content to transitions. Then at 50%, I will set it to animations. And that 100%, I will set it to transforms. And now let's go up here and add animation. Word switch. Five seconds, infinite. So now what will happen is this content will change from transitions to animations, to transforms over a period of five seconds. And that will go on forever because we set the animation iteration count to infinite. 79. 83 - animated image pattern using css animation: Hello everyone. In this lesson, we will learn how to create this animated background pattern using CSS animations, and keyframes. So let's do that. Here in my HTML, I will add a div and give it a class of banner. Then I will go to my CSS and target that div with the class of banner. And I will add height 100 vh, so it takes up the full height of the browser. Then I will add the background image. So I will say background URL, and I will add our image. Then I will add background position 00 so that the image position will be the top-left. And when we view that in the browser, you can see we have our pattern image and it's repeated. But because it's a pattern and other parts of the image look exactly the same. We're seeing it as if it's taking up the full width and height. But that's not true. The image is actually repeated vertically and horizontally. So we are actually seeing many repeated images right now, not one single image. Now the idea behind the animated background pattern is we animate the change in the background position from 0 at the left and 0 at the top to 0 at the left. And the number of pixels equal to the image height at the top. So I will go to my CSS and I will create a new animation and name it animated pattern. And I will say from background position 00 to background position 0 from the left and 600 pixels from the top. Now I've added 600 pixels right here, because the pattern height is 600 pixels. So if you want the pattern to move vertically, you should make the background position 600 pixels from the top grade. Now I will go up here and say animation, animated pattern. 15 seconds, linear and infinite, of course. And now when I go and reload my browser, you can see the image is now moving vertically until it moves 600 pixels, which is the end of one image and the beginning of another, and then moves another 600 pixels and so on and so forth. Now, it's really easy to make the pattern move horizontally. So I will go to my CSS and make this 600 pixels 0 so that it won't move vertically. Then I will add 800 pixels from the left. And I added a 100 pixels because it's the width of my image. My image is 600 pixels by 800 pixels. And now when I go to the browser and reload, you can see the background image is moving horizontally. And of course we can make it move horizontally and vertically at the same time by going back to my CSS and changing the 0 back to 600 pixels again. And now you can see the pattern is moving horizontally and vertically. At the same time. 80. 84 - button shaking hover effect with css animation: Hello everyone. In this lesson we will create this nice shaking hover effect for our button. And of course, we'll be using CSS animation to do it. So before we begin, we wanted to see how this shaking effect is working. Here in this demo, I've made the animation duration very high so that we can see exactly what is happening. So when I hover over the link, you can see it rotates a little bit to the right, then a little bit to the left, When a little bit to the right again, and then finally returns to its original position. So this should be very easy to do. All right, Let's do this. I will go to my HTML and I will add an anchor tag and just say hover me. Then I will go to my CSS and add some styles. I will add some dark gray background to the body. Then below that, I will target the anchor tag and add text decoration. None. Then color, white. Font family, Sans Serif. Font size 40 pixels. Border, three pixels. Solid white. Padding. 40 pixels from the top and bottom, and 80 pixels from the left and right. Then I will add transition or 0.3 seconds. Then when I hover over the link, I want the color and the border color as well to change. So I will copy this line of code, paste it here, and I will change the white color to this red color. Then after that, I will also change the color itself to read instead of light. So now when I go and hover over the link, you can see the border color and text color change. Now we want to create the shaking effect. What I'm going to do is I'm going to go right here and create a new animation. And I will name it, shake. And inside of it, I will say at 33 percent of the animation duration, I want the link to be rotated by 10 degrees to the right. And after a 66 percent of the animation, I want it to be rotated to the left by 10 degrees as well. So we will use minus 10 this time. And 100% of the animation duration. I want it to be rotated to the right again by 10 degrees. So what will happen here is the button will be rotated to the right, then to the left, then to the right, before it comes back to its original place. Great. Now let's add this animation to our button on hovering. We'll go right here and add animation. Then animation name, shake, and animation duration 0.3 seconds, then linear. And finally, the animation iteration count only one time when hovering. And now when I go and hover over the button, you can see the shaking effect is happening to the right, then to the left, then to the right again, and then returns to its starting position. And that is exactly the effect we want. 81. 85 - animated button with css animation: Hello everyone. In this lesson we will learn how to create this link. So if you take a look, you can see we have a red background which has a specific width and takes up the full height of our link. And this background is skewed and it's moving from left to right across the link. When I hover over the link, you can see that the red background will take up the full width. And when we hover away, it returns to moving from left to right. So how can we create this effect? Well, this is an easy 1. First, we will use the before pseudo element to create the red background. And we will give it the full height of the length and a specific width, and let's say 120 pixels. Then we will skew it a little using the skew function. And we will apply an animation to it so that it will keep moving from left to right infinitely. Then when we hover over the link, we will make it so that it removes the skew function, stops the animation, and makes it take up the full width of the link. So let's actually do that. Here in my HTML. I will start by going right here and adding a link. And inside of it, I will say hover me. Then I will go to my CSS to add some styles. I will add a dark gray background to the body. Then below that, I will target the anchor tag and add text decoration. None. Then color, white. Font family. San serif. Font size 40 pixels, border, three pixels. Solid white, padding, 40 pixels from top and bottom, and 80 pixels from the left and right. And finally, position relative. Now that the link is looking good, we need to create the red background using the before pseudo element. So I will go to my CSS and say a colon before. And I will make the content empty. Then I will make the background color red. Then I will say top 0, left 0 as well. Then width. Let's say 120 pixels and height, 100% when position absolute. And then when we look at it, you can see it has a red background, is taking up the full height of the link and has a width of 120 pixels. But you can see the letters are hidden beneath it. We can easily fix this by going back to the before pseudo element and adding z-index minus1. And now you can see the text is appearing in front of it. Good. Now we want to skew it a little. So I will go back and add Transform skew. And I will skew it by minus 15 degrees. And now you can see it's skewed nicely, like we want. Good. Now we want to create the animation that will make it move from left to right. So I will go right here and create a new animation name, moving, for example. And inside of it, I will say from and I want the red background to start from outside the link. So I will say left minus 120 pixels, which is the width of the red background. This way, it will start from outside the link. To make this idea clear, Let's try going up here and changing left from 0 to minus 120 pixels. You can see it's now located outside the link from the left. So this will be our starting point. And good. Now let's go back and make this 0 again. Then let's complete our animation. So I will go right here and say two left, 100%. So the red background movement will end at 100% of the link width to the left, meaning outside the link from the right edge. Great. Now let's add this animation to the red background. I will go up here and add animation. Then animation name moving. And animation duration 1.2 seconds, then linear, then finally infinite. And now you can see the red background is moving from left to right across the link. So k, Now we need to hide it outside the link. So I will go right here in the link selector and I will add overflow hidden. All right, Now when hovering over the link, we want to start the animation, remove the skew and make the red background take the full width. So I will go right here. And when we hover over the link, I want to make some changes happened to the before pseudo element. So first of all, I will make the width and 100%. So it takes up the full width of the link and then Transform Skew 0 degrees to make it return to its original shape. And finally, animation. None. To start the animation. Now we want these changes to happen smoothly. So I will go up here in the before pseudo element and I will add transition all zeros, five seconds. And now when I go and reload, you can see the red background. We'll keep moving from left to right until I hover over the link and make it stop. At this point, it takes up the full width. And when I hover away and we'll continue moving again. 82. 86 - lighting text with css animation: Hello everyone. In this lesson we will create this nice lighting texts using CSS animations. So this is an infinite animation and the change that is happening here, because a change in color and text shadow. So let's actually do that. First of all, let's start by adding the markup of our HTML. So I will go right here inside the body, and I will add an unordered list. And inside of it, I will add a list items, and each list item will contain a letter. Good, now let's go to our CSS and add some styles. I will add a dark gray background color to the body. Then I will target the UL. And we will add margin 0, padding 0 as well. And we will add display flex so that all the list items will be displayed side-by-side. Cool. Now let's add some styles to the list letters themselves. So I will target the LI inside the UL. And I will add list-style and then color. And I will add a lighter gray color when font size 18 pixels. And finally, letter spacing 15 pixels to get some space between the letters. Great. Now let's create the lighting animation. I will go right here and create a new animation and name it lighting. And inside of it, I will say at 0% of the animation duration, I want the color to be the gray color. And I want the text shadow to be none. So nothing will change. Then I will copy that, paste it again two times and just change 0% to 90 percent. Then at 100% of the animation duration, I will change the gray color to this yellow color. And I will add a text shadow right here. Now, before all this, I actually tried a lot of values until I figured out that I like this value. So now we want to add this animation to the letters. So I will go up here inside the list item selector and I will add animation. Then the animation name, lighting. When the animation duration 1.4 seconds, linear and infinite, of course. So what will happen here is from 0% to 90 percent of the 1.4 seconds, which is the animation duration. The letters won't change. Nothing will happen to them. But from 90% to 100% of the animation duration, the letters will be yellow and we'll have a text shadow. I made the change happen over a very short period of time to give it a feeling of lighting or a light bulb switching on and off quickly. But if the change happens slowly, it will look like lighting. It will be very smooth and boring. So let's actually see that. You can see the change is happening quickly, giving us the effect of lighting. But if we look at our demo, you can see the changes aren't all happening at the same time. The first letter lights up first, then the second, and then the third, and so on and so forth. We can set that up by simply using the animation delay function. I will go back to my CSS and I will target the first child of a list items. And I will say UL LI nth child one. So what this will do is it will target the first list item in the UL, which is the first letter. Next, I will add animation delay 0 because I want the first letter to light up immediately. Then I will copy all of that. Paste it again, target the second letter this time and change the animation delay to 0.1 seconds. This way, it will wait 0.1 seconds before lighting up. Then I will do that for all the letters. And every time I will increase the animation delay by 0.1 seconds so that they will light up one after the other. Good. Now that I've added all the animation delays, let's take a look. You can see the first letter lights up first, then the second, and then the third, and so on, until the last letter when the animation starts again, because we made it infinite. 83. 87 - heartbeat with css animation: Hello everyone. In this lesson we will learn how to create this heart in CSS and how to make it beat using CSS animation. This will be an interesting lesson. So let's see how we can do that. All right, I will start here in my HTML by adding a div and giving it a class of heart. Then I will go to my CSS. And I will start by adding a dark gray background color to the body. Then after that, I will target our div with the class of heart. And I will add some styles to it. I will start by adding position, relative. Then width, 100 pixels, height 100 pixels as well. Background color. This red color, of course. Good. Now you can see this is just a normal div with a red background. So let's continue working. I will go right here and I will use both the before and the after pseudo elements to create the heart. So I will start by the before pseudo element right here. And I will just make the content empty. Then I will add position, absolute, top 0, left 0 as well, the width 100% and height 100%. Then I will add background color. And let's add white for now. Good. Now you can see we've got the before pseudo element with a white background color sitting above our div with a class of heart. So what we need to do now is we need to make the white div moved toward the top by half of a tight. So I will go back to my CSS. And inside the before pseudo element, I will add transform translate. Why? Minus 50%. So now you can see the white div moves toward the top, a distance equal to half of a tight. Great. Now I will copy all of that. Paste it again. And I will just change before to after. And I will change the white background to, let say green. Now this time we want to move the after pseudo element to the left, not toward the top. So I will just go right here and change Translate Y to translate X. Now you can see it moves to the left, a distance equal to half of its width. Good. Now, I will go right here in the div with the class of heart. And I will add transform, rotate, and I will rotate it by 45 degrees. So now you can see the div rotates by 45 degrees and both the before and after pseudo elements rotate with it. Now I think you're saying to yourself, Hey, we're almost there and that is right. All we need to do now to get the heart shape is go right here to the before pseudo element and add border-radius 50 percent. Then I will do the same for the after. And now you can see we've got the heart shape we want. Let's go back and change the background color for both of them to read as well. Okay, Now we have it. Next, we need to work on the animation to make this heart beat. Here is a slow demo of our animation so that we can see it better. I will reload the page. And you can see the heart stays still for awhile. Then it scales up. When scales down a little, then scales up again, then scales down to its original size. Stays still for awhile. And then repeat the same process infinitely. So let's see how we can create that. I will go to my CSS, create a new animation and name it heartbeat. Then at the beginning of the animation, at 0%, I will add transform. Rotate by 45 degrees to keep the heart rotated. Then scale by one because we want it to start at its original size. Then I will copy all of that and paste it again five times. And I will add some percent intervals. So I will add 25 percent, 3050, 7100%. Good. So at 25 percent, I will keep the scale the same because remember, the heart stays still for awhile before the animation starts. So from 0% to 25 percent of the animation duration, I want the heart to stay static. Then at 30 percent of the animation duration, I will increase the scale to 1.4 times its original size so that the heart gets really big. Then at 50 percent, I will scale it down a little bit. So I will make a 1.2 and at 70 percent, I will scale it up again to 1.4. Then at 100%, I want to scale it down to its original size, of course, so I will leave it like that. Now, we need to add this animation to our div. So I will go up here and add animation. Heart beat. And the animation duration, more important for a seconds, linear and infinite, of course. And now you can see our heart is beating. If they still for awhile, then gets bigger, then a little smaller than bigger again, then returns to its original size, and so on and so forth. And that is exactly the effect we want. 84. 88 - animated text background with css animation: Hello everyone. In this lesson, we will be creating this animated texts background. So the idea behind this is we add a background image to the text and animate the background position property of that image. Easy enough, right? So let's see how we can do that. I will start here in my HTML by adding an H one, and I will just say CSS animation. Then I will go to my CSS and I will start off by adding a blue background color to the body. Then I will target the H1. Add font size, 200 pixels. Text align center to center the text. Text transform uppercase, background. And I will add our image as a background. You can see our image has been added to the heading, but we want it to appear as a background for the text itself. We can do that using a property called Bad ground clip. So I will go right here and add webkit background clip text. This will make the image become the background of the text. But we need to make the color of the text transparent. So you can see the text now has our image as a background. And now we want to animate this background. So I will go right here and create a new animation and name it, let's say text background. Then inside of it, I will say from background position 0 from the left and 0 from the top to background position, 100% from the left and 100% from the top. Then I will go up here and add animation. Texts, background, 20 seconds, linear and infinite of course. And now you can see the background is actually animated from one position to another, infinitely giving us the animation we want. 85. 89 - bouncing balls with css animation: Hello everyone. In this lesson, we will create this bouncing loading animation. So you can see we have five circles and they are bouncing randomly. So let's see how we can do that. I will start by going here in my HTML, and I will add a URL. Then I will add five list items inside it. And these list items will be the bouncing circles or balls. Then I will go to my CSS to add some styles. I will start here in the body by adding background color, this dark gray color. Then I will target the UL. And I will add margin 0, padding 0, then display flex. Now let's target the list items inside the URL. And now we'll add list-style. None. Width 30 pixels, height, 30 pixels as well. And then background color, white. Then margin 0 from top and bottom, and ten pixels from left and right, because we want some space between the list items. So here our list items sitting beside each other because we set the display property of the UL to flex. Let's keep going. I will go back inside the list item selector and I will add border-radius 50 percent so that the list items will be circles. Great. So now we need to work on our animation. If we take a quick look at our demo, you can see that the circles are moving from their original position upward to a new position. Then move back downward again to the original position. So the animation will contain three stages. In the first stage, the circles will be in their original position with no movement. Then at 50% of the animation duration, the circles will move upward by a distance equal to, let's say, 150 pixels. Then at the end of the animation duration, we will return to their original position. So let's see how we can do that. I will go right here and create a new animation. Then I will name it jumping. And inside of it, I will say at 0% of the animation duration, I will add transform translate Y 0. Then at 50% of the animation duration. Transform, Translate Y minus 150 pixels, so the circles will move 150 pixels towards the top. Then at 100%, Transform, Translate Y 0 again to make them return to their original position. Good. Now I will go up here inside the list item selector and I will add animation. Then jumping. Then the animation duration, 0.8 seconds, then linear and infinite, of course. So now you can see the circles are jumping up 150 pixels when returning to their starting position. Cu. Now we need to add a border at the bottom of the circles. So I will go inside the URL and I will add border, bottom. Ten pixels, solid white. So now you can see we have the border below the circles. Great. Now we have one thing left. The circles are now jumping together. We need to change that. We want to make it look like random jumping. So what we can do is we can add random animation delay values for each circle. So I will go right here and target the first list item. So I will say UL, LI and child one. And inside of it, I will add animation delay. And I will add any random value, let's say 0.45 seconds. Then I will copy all of this. Paste it again four times so that we can target each list item individually. Then I will change the number of the child here to two, then three, then 45. And I will add random values for each circle. So for the second circle, I will add, let's say, 0.6 seconds. And for the third circle, I will add 0.3 seconds and I will leave the fourth circle. Answer is, so it will move immediately. And finally, I will add 0.1 seconds to the fifth circle. Those are just random values that will make the circles move randomly. So now I will go back to the browser and reload. And you can see the circles are bouncing up and down randomly, giving us the effect we want it. So this is it for this lesson, everyone, and I will see you in the next one. 86. 90 - rain effect with css animation: Hello everyone, welcome to this new lesson in the CSS animations, transitions and transforms course. In this lesson, we will create this rainy effect using CSS animation. So let's start. I will start here in my HTML by adding a div and giving it a class of rain. Then I will go to my CSS to style that div. I will start by targeting the body. Then I will add padding, 0, margin 0 as well. The background URL. And I will add the background image. Then I will add background repeat. No repeat. And finally, background size. Cover. Good. So now you can see our image is set as a background for the body. Let's keep going. I will go back to my CSS and I will target the div with the class of rain. Then inside of it, I will add height 100% to make it take up the full height of the body. Then background URL. And I will add the rain image. The rain that is falling is actually an image that you can find in the resources for this lesson. So now when I go to the browser and reload, you can see we have our background and the rain image sits over it. Now we only need to animate the rain image. So I will go back to my CSS and I will create a new animation and name it rain. Then at 0%, I will add background position 0% from the left and 0% from the top. Then at 100%, I will add background position 20 percent from the left and 100% from a town. Good. Now we need to add the animation to the rain image. So I will go up here and add animation. Rain, 0.3 seconds, linear and infinite, of course. And now when I go to the browser and reload, you can see the rain image position is changing, giving us that rainy effect you're going for. 87. 91 - Icon Hover Effects with CSS Animations: Hello everyone and welcome to this new lesson in the course where we are going to create this nice hover effect on those Font Awesome icons. So when I hover over any one of those, you can see a dark blue background fades in and a border fades in as well, and has an animation around the background. So let's create that together. So here in my HTML, you can see I have a link for the Font Awesome icons library that will give me access to the icons we will use in this example. I will start here by adding a UL, then LI. And inside of it, I will add an icon tag and give it a class of FAS and FAA heart. Then I will copy this, paste it again three times. And I will change the icon class every time. So I will say glass martini, globe and gift. So now you can see we have our four icons listed here. Next, let's go to our CSS to add some styles. I will target the UL and I will add padding, 0, margin 0 as well, and display flex. Then I will target the LI inside it and add list-style-type. None. Width 120 pixels, height, 120 pixels as well. And we want some spaces between the icons. So we will add margin 0 and 20 pixels from left and right. Then I will add border, two pixels, solid. And this dark blue color. All right, now we want to make this border radius. So I will go and add border radius 50 percent. Then I will add transition 0, 0, 0.5 seconds, position relative. And in order to center the icons inside the LI, we will use flexbox. So I will add display, flex, align items center, and justify content. Center. Cool. Now let's add some styles to the icons. I will target them and add font-size. 48 pixels to make it bigger. Then color our dark blue color and transition. All 0.5 seconds. All right, We have our icons looking the way we want. So now it's time to work on the blue background that fades in. In order to create it, I will go right here and say UL LI before. And I will add content empty. Then position absolute, top 0, left, 0, width 100%, and height 100%. Then background color, the dark blue color. And in order to make it a circle as well, we will add border-radius 50 percent. So now you can see we have the dark blue background and it's covering the icon. Let's keep it going. In order to make the icon appear again, I will go back here and add z-index minus1, then transition all 0.5 seconds. And we will add opacity 0. Now you can see that the background disappeared because we set the opacity to 0. But we want it to appear again when we hover. So I will go back to my CSS and when hovering over the ally, I will make it. So there are some changes to the before pseudo element. I will add opacity, one to make it appear again. And I will add transform scale 0.8. So it won't take up the full width and height of the ally. And so then it will leave a free space for us to add the border in. So now when I go and hover over the icons, you can see the background appears again, and it doesn't take up the same amount of space as the list item. It takes up 80%, leaving some free space around it. But the icons themselves aren't appearing because they have the same color as the background. So let's make the color change on hovering. I will go right here and say UL LI on hovering. I will make some changes happened to the icons. I will add color white. All right, now let's create the animated border that appears around the dark blue background. I will copy the entire before pseudo element, paste it, and change before to after. Then I will make some changes to it. First, I will make the background transparent because we don't want any background color. Then I will add border, two pixels dashed. And this lighter blue color. And finally, box-sizing border-box. So if we change the opacity to one, you can see the border is now appearing around the border of the list items. So let's go back and change it to 0 again. Now, let's create the animation for the border. I will go right here and create a new animation. Name it rotating. And at the beginning of the animation, at 0%, I will add transform scale 0.92, which will shrink the after pseudo element down a little and put it between the border of the list items and the blue background. So next, I will add rotate 0 degrees. I will copy that, paste it again, and at 100%, I will make it rotate by 360 degrees. All right, that's good. Last, we will apply this animation to the after pseudo element for when we hover over the LI. So let's do that. I will say LI on hovering after. And I will add opacity one at first. Then animation, rotating, ten seconds, linear and infinite. Right? Now, when I go and hover over the icons, you can see the dark blue background fades in. Then the icon color changes to white, and the dashed border starts rotating. And that gives us a nice hover effect. 88. 92 - Loading Text Animation: Hello everyone. Welcome to this new lesson in the course where we're going to create this nice loading animation. You can see this is a nice looking animation where the colors of the word loading are changing and the letter spacing and the opacity are changing as well. So let's create it. Here in my HTML. I will start by adding a UL. Then inside of it, I will add an ally and add the first letter L. Then I will copy this and paste it six times and change the letter each time until we have the word loading. Then I will go to my CSS to add some styles to it. I will target the URL and we will reset the margin and padding for it. So I will add margin 0, padding 0 as well. And we want the letters to be displayed side-by-side. So I will add display flex. Now. All right, let's keep it going. I will target the list items inside the URL, which represents the letters. Then I will add list-style-type, none to get rid of these bullets. Then font size, 80 pixels to make the letters bigger, then letter spacing. 20 pixels. There we go. Here are our letters sitting side-by-side with 20 pixels of spacing between each one of them. Next, we'll work on our animation. I'll go right here and create a new animation. Name it loading. And let's make it simple at first. Let's just change the colors of the letters. So at 0% of the animation duration, we will make the color red. Then at 100%, the color will be blue. So this will give us a gradual change in color from red to blue. Okay, let's add the animation up here to the letters. So animation, loading, three seconds, linear and infinite. Alright, so here you can see the color of the letters is changing from red to blue over a period of three seconds. Next, let's change the position of the letters. I want to make the move from right to left. So I will go right here and at 0%, I will add transform translate X minus 50 pixels. And at 100%, I will add transform translate X 50 pixels. So the letters will start moving 50 pixels from the left of the original position to 50 pixels to the right. Just like that. Okay, Now, during this movement, we want to change the letter spacing so that the letters will get closer to each other and then spread apart again. So at 0%, I will add letter spacing. 20 pixels. Then I will add a new animation stage at 50% of the animation duration right here. And inside of it, I will add letter spacing minus 20 pixels. Then at 100%, I will add letter spacing 20 pixels again. So what will happen here is that during the movement, the letters will get closer to each other, then we'll move away from each other again, just like you can see here. Cool. Now, one thing left here. When we reload the page, we want the letters to quickly fade in, stay for awhile, then fade out. We can achieve this by controlling the opacity. So I will go right here in the animation duration and at 0%, I will add opacity 0. Then I want it to fade in quickly. So I will create a new stage at 10 percent, and I will add opacity one. So now when I go and reload, you can see the letters are fading in nicely. Good. Now we want them to fade out as well. So I will go to my CSS and at 50 percent, I will add opacity one as well. So they will stay sharp, invisible from 10 percent to 50%. Then at 100%, I will add opacity 0, so they will fade out nicely. So now when I reload the page, you can see they fade in, then fade out, giving us the loading effect we're looking for. Great. Now, one thing left. We want all the letters to hand this effect, but one after the other. So the first letter, then the second, then the third, and so on. What we can do is we can use the animation delay property on each of them. So I will go right here and add UL LI nth child one. This will target the first letter. And because we want the first letter to appear immediately, we will add animation delay 0 seconds. Then I will copy all of this. Paste it again six times. And I will change one here, 22. And add animation delay, 0.2 seconds. Then 3.40 seconds, 4.60 seconds, 5.80 seconds, 61 second, and finally, 7.21 seconds. So here we are. The letters are changing one after the other, giving us this great looking loading animation. 89. 93 - awesome pulse effect using css animations: Hello everyone. In this lesson at the CSS animations course, we are going to create this pulse effect. You can see we have a Font Awesome icon here for a phone. And it has a green background. And there are two borders that are pulsing. They're getting bigger and disappearing. So we will use CSS animations, and transforms for this lesson. All right, First of all, I will start by going right here in my HTML and adding a div and give it a class of pulse. Then inside of it, I will add an icon tag. Give it a class of FAS and FAS phone. So this will print the phone icon for us. And you can see up here that I'm using a CDN link for the Font Awesome library that will give us access to all the Font Awesome icons. Alright, so when we view that in the browser, you can see we have our icon sitting right here in the center of the page, and it has a color of black by default. So let's go to our CSS and add some styles. I will target the div with the class of pulse, which has our icon inside of it. And I will add width, 100 pixels, height 100 pixels as well. Background color, this green color, color white. And in order to make a circular, we will add border-radius 50 percent. All right, now let's enter the icon inside it horizontally and vertically. I will add text-align, center, and line height, 100 pixels to center it vertically. Then we need to make the icon a little bit bigger. So we will add font size 48 pixels. And finally, we will add position relative. Right? So now we have the icon looking exactly the way we want with this green circular background. And now we want to create the borders around it that will be animated. So let's handle that. I will go right here and say post colon before. And I will add content. Empty position, absolute, left minus 20 pixels. Top minus 20 pixels, rate minus 20 pixels, and bottom minus 20 pixels as well. Then we will add a border to this before pseudo element. So I will say border, one pixel, solid and our green color. All right, so now you can see we have our border around the before. And the space right here between the border and the pulse div is equal to 20 pixels. And that will because we added minus 20 pixels right here on the left, top, right, and bottom. So if we go and change these minus pixels on the left to 0, you can see the border is now touching the left edge of the pulse div. Let's make this minus 20 pixels again. And we want a circular border. So we will add border-radius 50 percent. And now we will animate this border to give us the pulse effect we're trying to make. So I will create a new animation and name it pulsing. And inside of it at 0% of the animation duration, I will add transform, scale 0.5 and opacity 0. Then at 50 percent. I will copy this and change the scale to one and the opacity to one as well. Then at 100%, I will change the scale to 1.2, so it will be bigger and the opacity to 0, so we will fade away. So what will happen here is the border will start at half of its size and an opacity of 0, then it will get bigger until it reaches its original size and an opacity of one, then it will become even bigger and the opacity will be 0 again, meaning it will fade away. So let's see if we can make this effect. First. Let's add the animation to the border. I will go up here and add animation pulsing 1.5 seconds, linear and infinite. So now you can see it's getting bigger, then disappearing. Okay, let's add another border. I will go right here and add comma. Then I will add an after pseudo element next to them. Before. Then we want them to start their animations one after the other. So I will go rank here and target the after pseudo element alone. And I will add animation delay 0.5 seconds. And now you can see they are starting one after the other, giving us the effect we were going for. 90. 94 - Simple Images Slider Show with css animations: Hello everyone. In this lesson, we will create this simple image slider using CSS animation. The idea behind this image slider is very simple, so let's see how we can do it. First of all, I will start here in my HTML by adding a div and giving it a class of slider. Then I will go to my CSS and I will go inside the body selector and add background color. This dark gray color. Then I will target the div with the class of slider. And I will add width 800 pixels, height 400 pixels, then background, URL. And I will add the first image. Now we need to create our animation, but instead of you guys watching me write it, I will pause the recording and add it in. Then I will explain how it works. So hold on. Welcome back. So you can see I created the animation and gave it the name change BG. The idea behind this simple slider is that we will change the background image of the div slider. So you can see that at 0%, the background will be the first image and it stays like that until 20% of the animation duration. Then from 20 percent to 25 percent, the background will change from the first image to the second one. And the second one stays until 45 percent of the animation duration, at which point it changes to the third image, and so on until all the images are displayed. So let's add this animation to the slider div. I will go right here and add animation. Then the animation name change BG, Then 10 seconds, linear and infinite. And now when I go to the browser and reload the first image to stay for awhile, then the second image appears and stays for a while. Then the third and so on, until the animation finishes. 91. 95 - Changing background color with CSS animations: Hello everyone. In this lesson, we will create this endlessly changing background color. As you can see, the background color of the body is changing smoothly. The idea behind this effect is very simple. So let's dive in and see how we can do it. First of all, I will go here in my HTML and I will add an H1. And inside of it, I will say changed, then BR tag, then background color. Then I will go to my CSS to add some styles to it. I will target the H1. Then I will add font size 70 pixels. Then I want to center the text. So I will add text, align, center, then tax transform, capitalize, and color white. Good. Now, in order to create this changing background color, we will need to create a new animation and create as many steps as we need. And on each step we will change the background color. So let's actually see how we can do that. I will go right here and create a new animation. And I will name it be G, change. Then at 0%, I will add background color, this nice color. Then I will copy this, paste it again, and 20 percent. I will change the background color to another color. Good. Now, I will pause the recording and add the other steps. And welcome back. Here, I've added the other steps with new background colors and 40%, then 60%, then at 80 percent, and finally at 100%. So we need to add our animation to the body. So I will go up here and add animation. Then the animation name BG change. When the animation duration. Let's try ten seconds. When the animation iteration count infinite, of course, grade. Now let's take a look at our animation. I will reload the page when the animation should start. So you can see the background color is changing smoothly from one color to the next, and so on and so forth. And it will keep doing this because we said the animation iteration count to infinite. A little note here. If you look closely here at the animation we created, you'll notice that the background color at the start of the animation is the same at the end of it. And this is because when the animation finishes its first cycle, it will start over again. And the last color right here would change to the first color. So if they are not the same color will change, won't be smooth. For example, let's change this last color to, let's say green. Then go and reload. Then we will wait until the animation finishes. And here you can see the change is not happening in smoothly. So we should change it back to the first color and everything will be fine. So this is it for this lesson. It was a very simple one and you can use as many colors as you want. So, for example, you can change the color every 10 percent of the animation duration. So you would end up with 10 different colors. And you can also control the time each color stays on the screen by changing the animation duration. 92. 96 - newton's cradle with CSS animations: Hello everyone. In this lesson, we will be creating this Newton cradle effect using CSS animations. I think this would be an interesting lesson, so let's see how we can make this happen. First of all, I will go to my HTML right here, and I will add a div and give it a class of cradle. Then inside of that, I will add five empty spans so that each span would be like an arm of the cradle. Then I will go to my CSS to make this look like our demo. We will start by targeting all the spans inside the div with the class of cradle. So I will say cradle span. And I will continue by setting the display property of these spans to block so that they become block elements. That way, we can add width and height to them. Then I will add width, three pixels. And that will be the width of the arms of the cradle, then height, 300 pixels and background color, white. So now if I go and reload my browser, you can see we have all the spans and they sit one above the other. Because we set the display property to block, we need to align them so they stand side-by-side and not top to bottom. We can easily do that by using our good friend, Flexbox. So I will go right here inside my CSS and I will target their container, which has the class of cradle. And I will just say display flex. So now you can see they all sit side-by-side. But we need to separate them. Meaning we need to add a little bit of space between them. So I will go inside the span selector and I will add margin 0 from top and bottom and 30 pixels from left and right. And now you can see they have some spacing. Great. Now let's go to the cradle selector and add border, top 10 pixels, solid white. And you can see we are getting closer to what we want. Now we need to work on the circles of the cradle. I will be creating them using the before pseudo element. So I will target the spans again. And I will say before. Then I will add content, empty, then position, absolute. And then let's actually go up here to span selector and add position relative so that the balls or circles will be relative to our spins. Then I will go down here and add bottom 0 because we want them to be at the bottom of our spans, of course. Then left 0 as well. Width 60 pixels, height 60 pixels. We need them to have the same width and height so that they will be squares y, because then we can easily make them circles by just adding border-radius. 50 percent. Then finally, I will add background color, white as well. Okay, so now when I go to the browser and reload, you can see we have the before pseudo elements for each span and they sit at the bottom of their span, of course, because we added bottom 0. But now we need them to be centered in each span. So what we can do is we can shift them to the left so there'll be centered, just like in our demo. So I will go right here and add transform, translate x minus 50%, so that they will be shifted to the left by half of their width, which is 30 pixels, and be centered just like that. But you can see there's a little bit of spacing between the circles that makes them look separated from each other. So let's go right here inside the span selector and decrease this 30 pixel margin to 29 pixels. There we go. They are touching each other and there is no space between them. Great. Now we need to work on our animation to make this cradle actually work. So I have a really slow demo right here of the cradle that will let us see what is happening clearly. I need you to ignore the right arm here for now and just pay attention to the left arm here. Take a look at its movement. I will reload the browser. And you can see the first arm starts from its original position and rotate 60 degrees clockwise, then rotates again to its original position. Days for awhile until the second arm returns and then just repeats the process. So we will have three stages for the animation of the first arm. In the first stage, the arm will rotate clockwise by 60 degrees, then returned to its original position in the second stage. And then in the final stage, it will stay still in its original position until the second arm goes and completes its rotation. So let's actually create these three stages. I will go right here and create a new animation. Name it left arm. Then inside of it, I will say that at 0%, I will add transform, rotate 0 degrees. Then a 25 percent transform rotate 60 degrees so that the arm will rotate 60 degrees clockwise. Then at 50 percent, I want it to return to its original position. So I will say Transform, Rotate 0 degrees. And I want it to stay in this position until the right arm finishes its rotation. So I will say that at 100%, Transform Rotate 0 degrees as well. So from 50 percent to 100% of the animation duration, I will tell the left arm to have rotation 0, meaning it will stay in its position. Cool. Now we want to add this animation to the left arm, so I will target the span. Then the first child, which will select the left arm for us, of course. Then inside of it, I will add animation, left arm and add an animation duration of two seconds. Then ease in. And infinite. Then I will go and reload. And you can see the left arm is rotating, but it's rotating on its center point. This is completely normal of course, because that's the default, but we want it to rotate from its top point right here. We can handle that. No problem by just going in right here inside the span selector and adding transform origin. And now you can see the left arm is rotating the way we want. It rotate 60 degrees clockwise, then returns to its position, stays for a while. Then repeats the process again. Alright. Now let's take a look at the right arm. I will go to our slow demo again. And this time I want you to watch the right arm. So when I reload, you can see the right arm stays in its position and doesn't move until the left arm rotates and returns. And once it returns, the right arm starts rotating counterclockwise by 60 degrees. That means that we will use the animation delay property on the right arm to make it wait until the left arm completes its action. Let's reload again. So it waits. Then starts rotating, finishes, and then stay still until the left arm finishes, then repeats the whole process. So let's create that animation. I will go right here and create a new animation. Name it right arm. Then I will, can't be all of that. Paste it again here and just change 60 degrees to minus 60 degrees. Then I will go up here, copy this, paste it again, and change first child to last child. Then I will change the animation name to right arm instead of left on. Leave everything as it is and add an animation delay of 1 second. So what will happen when I reload is the left arm will rotate immediately to the left and it will take 50 percent of the animation duration to rotate and return. In other words, it will take 1 second. Meanwhile, the right arm will wait this 1 second because it has an animation delay of 1 second. And then it will start rotating to the right, taking half of its animation duration, also 1 second to complete its action and return. During this time. This 1 second, which again is half of this animation duration. The left arm will be waiting and this wait for half moved her half process will continue forever. 93. 97 - nice colorful loading effect with CSS animations: Hello everyone, welcome to this new lesson in the CSS animations course. In this lesson, we're going to create this nice preloaded. You can see we have four squares. All of them are rotated by 45 degrees and they have this effect. They're moving away from each other, all rotating 90 degrees as a single unit, then come back together. And this will happen over. And this is a nice animation and it's easy to do. A basic summary of what we'll do is we'll create a container div that holds all four squares inside it. Then we will change the position values for each square to make the Foursquare's cover the outer div and take up all the available space. Then we will rotate the outer div, which will rotate all four squares with it. And after that, we will create our first animation in which we will change the height and width of the container div, which will make the four inner squares move away from each other and then come back toward each other. And finally, we will create our second animation that will rotate the four squares themselves. So let's see how we can create that. Maybe it sounded like a lot, but I promise it will be very easy once we start doing it. First, I will start here in my HTML by adding our div and giving it a class of container. Then I will add four spans inside it, and those will be the four squares inside the container div. After that, I will go to my CSS to add some styles. I will start by targeting the div with the class of container. Then inside that, I will add width 100 pixels, height 100 pixels. And we will add a temporary background color of red. And then I will finally add position relative. So now you can see we just have a red square with the width and height of 100 pixels. Moving ahead, we will now work on the four spans inside the container div. Let's first add some general styles to all of them. I will target the span, and I will add position. Absolute width, 50 pixels. Height 50 pixels. You can see nothing's changed because we didn't add any background color. So let's target each span individually. To do that, I will go right here and say span in child. And I will target the first one. Then I will add tab 0, left 0 as well. So the span will be in the top left corner of the container. Then below that, I will add a background color. This nice yellow color. So now you can see the first square sits on top of the red container with the width and a height of 50 pixels, which is half of the container width and height. And it's in the top left corner. Since we said left and top to 0, we will do the same for all three of the other squares, and we will position them in a way that will make them completely covered the red container. So we will position the next one next to this yellow square, and the remaining two will be positioned below them. Right? I will go back into my CSS to target the second square. So I will say span and child 2. And I will add top 0 and right 0. Then background color, this green color. So now you can see we have the green squares sitting next to the yellow one. Since we said it's right property to 0. Awesome. Now let's work on the other two squares. I will go back to my CSS and copy this block of code. Paste it again two times. And I will target the third span and change top here, bottom. This will position it on the left side of the container below the first square. I will also change its background color to this nice reddish color. Then I will target the fourth span and change top to bottom and left to right. So it will be positioned on the bottom right corner of the container below the green background. Then I will add color, this blue color. All right, so now you can see we have the four squares and they are completely covering the red container. Now, let's start working on animating the container. We will animate its width and height to make it bigger than smaller. Again, I will go right here and create a new animation. And I will just name it animate. Then inside it, at 0% of the animation duration, I will say width 100 pixels and height 100 pixels as well. So the container will start at its original size. Then I will copy that, paste it. And at 10 percent of the animation duration, I will leave the values of the width and height as they are, which is 100 pixels. This way, from the beginning of the animation until 10 percent of the animation duration, the container will stay at its original size before getting bigger. Then below that, I will paste this again. And at 50% of the animation duration, I will now make the container square bigger. I will change the width to 150 pixels instead of 100. And then the height to 150 pixels as well. Then paste again. And at 90 percent, I will make the width and the height 100 pixels. Then finally, at 100%, I will also leave the width and height as 100 pixels. So basically, the change in science will occur from 10 percent to 90 percent of the animation duration. It will get bigger, then go back to its original size. So let's add this animation to the red container. I will go up here inside the container selector. And I will add animation, animate 1 second, linear, and infinite. So now when I go and reload the browser, you can see the red container gets bigger and separates the four inner squares from each other, then get smaller again and returns to its original size. Cool, but we're not done yet. We want to rotate the red square by 45 degrees. So I will go back right here inside the container selector, and I will add transform, rotate 45 degrees. So now you can see the container rotates by 45 degrees and all four of the squares rotate with it because they're inside it. We don't need this red background anymore. So I will go back here and remove it. Awesome. Now we only have one thing left, which is rotating the squares while they're moving away from each other. This will be easy to do. So let's create the animation responsible for that. I will go right here and create a new animation. And I will name it, rotate. Then I will copy all the stages from the first animation and paste it inside the rotate animation. And at 0%, I will remove that and Transform Rotate 0 degrees. Then at 10 percent, it will be 0 degrees again. And at 50 percent, I will change it to 90 degrees so that each square will be rotated by 90 degrees. Then at 9100%, I will leave it rotated by 90 degrees again. I don't want it to rotate back. I just wanted to stay rotated by 90 degrees. Cool. Let's add this animation to our squares. I will go up here inside the span selector and add animation. Rotate. 1 second, linear and infinite. Awesome. So now you can see the four squares rotate by 90 degrees while they're far apart from each other, then go back toward each other, completing our cool little effect. 94. 98 - moving squares effect with CSS animations: Hello everyone, welcome to this new lesson in the CSS animations course. In this lesson, we will learn how to create this nice preload or animation. You can see we had three squares and they're moving like they're chasing each other. I want you to take a close look at only one of them. And you will notice that each one is just moving in a regular path, actually a path of another square. And they all move in the same path. The only difference is that all of them have a different animation delay property. So they're moving one after the other, creating this chasing effect. So let's start creating that. I will start here in my HTML by adding a div and giving it a class of loader. Then inside that, we will add three spans, and those are the three squares that create the pre-loaded. Then I will go to my CSS. First, I will target the container div, which has a class of Loader. And I will add width, 150 pixels, height 150 pixels as well. Position relative. Then below that, I will target the spans inside this container div. And I will add position. Absolute width, 50 pixels. Height 50 pixels as well. Background, white. And finally border radius, four pixels. So now you can see we have a square with a height and width of 50 pixels. And those are actually three spans that are sitting on top of each other. Now, let's work on creating our animations. I will go to my CSS and create a new animation and name it Chase. Then inside it at 0% of the animation duration, or at the start, I will add top 0, left 0. So this means the squares. We'll start at the top left corner of their container. Then below that, at 12.5% of the animation duration, I will add top 0 and left 50%. So now the squares will move to the right by 50% of the container width. Then below that. And at 25 percent, I will add top 0 left, 50 percent. So you can see the values don't change from 12.5% of the animation duration to 25 percent. And this is because we want the squares to stay in their place for a little while before moving to the next position. This will just make the effect look nicer. Now, I will pause the video and add the other stages. Then I will explain what I did. So Twenty-five percent of the animation duration, we added 37.5% and added top 50 percent and left 50 percent. So the squares will move from the top right corner to the bottom right corner, then stay for awhile in that place until we reach 50 percent of the animation duration. And below that, at 62.5% of the animation duration, we changed left to 0 again. So the squares will be at the bottom left corner of the container and stay in that position at 75 percent. Then they will return to the top-left corner again at 87.5% of the animation duration. And stay in that place until the animation finishes. And we'll keep doing that forever. So let's go up here inside the span selector and add this animation. I will go right here and add animation. Chase. Two seconds, linear and infinite. And now when I go to the browser and reload, you can see the squares move and a square path, and they all move together. So they're appearing as one square. Now, in order to make them appear as three separate squares, We can use animation delay. To do that. I will target the second square by going right here and saying span nth child too. And I will add animation delay, 0.700 seconds. Then I will copy that, paste it again, and target the third square and add animation delay 1.4 seconds. And now when I go to my CSS and reload, you can see the three squares start moving one after the other, giving us exactly the loading effect that we were going for. 95. 99 - text reveal effect with CSS animations: Hello everyone, welcome to this new lesson in the CSS animations course. In this lesson, we're going to create this pre-loaded texts animation effect. So you can see we have an H1 here, and it's kind of covered up by this yellow text on top of it. So let's see how we can do that. I will start here in my HTML by adding an H1. And I will just say loading. Then I will go to my CSS target, this one. And I will add font size 40 pixels. Margin, 0, padding, 0. Text transform, uppercase, letter spacing, ten pixels, color, white. And finally position relative. So now you can see we have our white H1 and it looks pretty good. Now, let's work on the yellow texts that covers it up. We will use the before pseudo element to create that yellow text. So I will go right here and say one colon before. And inside that I will add content loading because we want the same word. Of course. Then position absolute, top, 0, left 0 as well. Width 100%. And color. This nice yellow color. So now you can see the H1 is now yellow, and this is because it's now covered by the yellow text, which is the before pseudo element. All right, Let's continue working. I will go right here inside the before pseudo element and add overflow. Hidden. Then border, right? Four pixels, solid. And our yellow color. Cool. So now you can see the text has a right border that will move along with it and fill the white text with the yellow. And now we just need to work on animating this yellow text. I will go to my CSS again and create a new animation. And I will name it animate. Then inside it at 0% of the animation duration, I will add width 0. Then add 50 percent. I will make the width 100%. And finally, at 100%, I will set the width back to 0 again. So what this animation will do is it will make the yellow tags start at a width of 0, then its width will increase until it becomes 100% of the white text, which will make it cover it up. Then its width will be 0 again, and it will shrink by the end of the animation. And this will continue happening infinitely because of course we will set the animation iteration count to infinite. So let's add this animation to the yellow background. I will go up here and add animation. Animate. Five seconds, linear and infinite. So now you can see the yellow text is getting bigger and covering up the white text. Then it shrinks again. And it keeps doing that infinitely, giving us this nice preloaded. 96. 100 - rotating ring loading using CSS animations: Hello everyone. In this lesson, we will create this nice loader effect. You can see we have the word loading inside this ring that is rotating around it. So let's see how we can create that. I will start here in my HTML by adding a div, giving it a class of container. So this class will contain the ring and the text. Then inside it, I will add another div, give it a class of text. And I will write loading inside that div. Then below that, I will add another div, give it a class of ring. And this will be the ring that rotates around the text. Then I will go to my CSS to start creating this loading effect. I will start first by targeting the div with the class of container. Then inside it, I will add position, relative width, 200 pixels, height 200 pixels as well. So now the container div has a width and a height of 200 pixels, and it's centered horizontally and vertically inside the browser due to the Flexbox code here in the body. All right, now I will target the div with the class of ring. And I will set its width to 100% and it's height to 100% as well. So it takes the same width and height as its container. Then I will add a temporary background to this ring div. So I will add background color, red. After that, I will add border left. Four pixels, solid. This dark gray color. So now you can see the ring div has a red background and a dark gray left border. Let's make this ring div a circle. So I will go back here and add border-radius, the percent. And now you can see the ring div is now a circle which has a left border. And this left border will be the ring that rotates around the word loading. So we don't need this red background anymore. That's why I will go back and remove this line of code. Now, right? Now you can see we have this left border by itself. And this is how we create the ring, is just one side border of a circle. All right, Let's style this text to make it look better. I will target the div with the class of text. And I will add position, absolute, top, 0, left 0 as well. Then width, 100%, height 100%. And in order to center the text inside it horizontally, I will add text align center. Then in order to center it vertically, I will add line-height, 200 pixels. And now the word loading is centered inside the text div. Let's continue working. I will go back here and add font size, 22 pixels, font-weight, bold. And finally, text transform uppercase. So the text is now looking exactly the way we want. We have one thing left to do, which is rotating the ring here, of course. So let's do that. Go back to my CSS and create a new animation. Then I will name it, rotate. Then inside it at 0% of the animation duration, I will add transform, rotate 0 degrees. Then at 100%, I will add transform, rotate 360 degrees. So the ring will make one full rotation during the animation duration. Then I will go up here inside the ring div to add this animation, I will add animation, rotate, then animation duration of 1 second, then linear. And finally infinite, so that the ring will keep rotating around itself. And now when I go back and reload, you can see the left border starts rotating around the text and gives us the loading effect we want. 97. 101 - line loading effect using CSS animations: Hello everyone. Welcome to this new lesson in the course. In this lesson we will create this nice line loading effect. And in order to see what is happening, well, let's look at a slower demo of this loading effect. I will reload the page and you can see the line scales or grows up from left to right. Then it shrinks from left to right as well. Then it grows again from right to left. And finally, it shrinks from right to left as well. This will be an interesting effect, so let's see how we can create it. I will go here in my HTML and add a div. Then give it a class of loading. Then I will go to my CSS, target that class of loading. And I will add width, 300 pixels, height, three pixels, background color, white. So now you can see we have our line here, and now it's time to animate it. I will go back and create a new animation. Name it line. And inside that, at 0% of the animation duration, I will add transform scale x 0. So the line will start growing from a scale of 0. And we want it to start growing from left to right. That means that we need to change its transform origin property. It's centered by default, so we will make it left. So I will add transform origin left. Then at 45 percent of the animation duration, I will add transform scale x 1. So the line will be at its full width at 45 percent of the animation duration. It will scale from nothing to its full width in this duration, from the beginning of the animation to 45 percent of the animation duration. That's why we need to keep the transform origin as it is. So I will add transform origin left as well. Then at 50% of the animation duration, I want to keep the scale as it is. So I will add transform scale x morning. Then I will add transform origin. Left for now. Then finally, at 100% of the animation duration, we want the line to shrink again. So we'll add transform scale x 0, then transform origin. Left for now again. Okay, Let's go up and add this animation to the line. I will add animation line. And now let's go to the browser and reload. You can see the line starts growing from left to right because we set the transform origin property to left, then it shrinks back from right to left. So it shrinks into its left point as well. Because when shrinking, we also set its transform origin property to left. So it's shrinking based on its left point from right to left. But we don't want that. We want it to shrink from left to right or into its right side. So how can we do that? Well, once it's fully scale, we can just set its transform origin property to write so that when it shrinks, it will shrink into its right point and it will give us the effect we want. So I will go back here and that 50 percent of the animation duration, I will change the transform origin property from left to right. And I will do the same at 100%. And now when I go back and reload, you can see the line will shrink into its right point this time or from left to right. And that is the effect we want though right. Now we want this animation to go on forever. So we'll go back here and add infinite. And now when I go and reload the page, you can see the animation goes on and on and repeats itself forever. But there is one problem. Once one cycle of the animation is finished, it cuts off and starts again from the beginning at the left. But we want it to reverse after finishing. So after finishing, we want to go back from the end to the beginning. And we can do that by going right here next to the infinite property and add alternate. And if you remember, alternate is a value of the animation direction property. And it just tells the browser to make the animation start from its beginning and go to its end, and then from its end to its beginning, and so on and so forth. So now when I go back to the browser and reload, you can see that after the animation finishes, it moves in reverse. And this is exactly the effect we're looking for. 98. 102 - growing lines loading using CSS animations: Hello everyone, welcome to this new lesson in the CSS animations course. In this lesson, we're going to create this nice loading effect. It will be a very simple lesson. So let's get started. We'll start here in my HTML by adding a div and giving it a class of loading. Then inside it I will add another div, give it a class of OBJ. Then I will copy this div, paste it again seven times. All right, let's go to our CSS to create the loading effect. I will start by targeting the div with the class of 0 j. Then I will add width six pixels, height 40 pixels, and background white. So now you can see the eight divs are sitting below each other because they are divs and devs are block elements, meaning they're displayed below each other by default. But we want to make them sit side-by-side. We can easily do that. No problem by just going right here in my CSS and targeting their container, which is the div with the class of loading. And just adding display flex. So now you can see the eight divs are sitting side-by-side in a row, and each one of them has a width of six pixels and a height of 40 pixels. But we want to add some space between them. So I will go to the OBJ selector and I will add margin 0 from top and bottom and three pixels from left and right. So now you can see we're getting closer to our loader. We just need to make the corners a little bit rounded. So I will add border-radius 10 pixels. And here we go. We have the same loader we want. Okay, let's work on animating that loader. The idea behind this animation is really easy. We will just change the scale y function for each one of those eight divs. We will make it start at 0, then change to one, go back to 0 again. And we will use the animation delay property to make that change happen. And it will happen to the eight divs, one after the other, giving us the effect we want. So I will create a new animation. Name it loading. Then at 0% of the animation duration, I will add transform scale y 0, and I will copy that. Paste it again and add 50 percent. I will make the scale y one instead of 0. And finally, at 100%, I will change the scale back to 0. Again. Cool. Let's add this animation to the eight divs. I will go up here inside the div with the class of 0 BJ and add animation. Loading. Then animation duration of 0.8 seconds. Linear and infinite. Awesome. So now you can see the eight divs are getting bigger, then smaller, then bigger again. And they will keep doing this indefinitely. Now, in order to get the effect we want, we need to use the animation delay property on each div. So let's target each div individually. I will go right here and say, oh, BJ colon nth child to, to target the second div. Then inside it, I will add animation delay, 0.1 seconds. Then I will copy all of this. Paste it again six times. Then for the third div, I will add animation delay 0.2 seconds. Then for the 4.3rd 0 seconds and for the 5.4th 0 seconds. And for the 6.50 seconds, for the 7.6th 0 seconds. And finally for the 8.7th 0 seconds. And just like that, you can see the divs are animated to move one after the other, giving us this really nice effect that we wanted. And we can get another cool effect by adding only one line of code. I will go inside the OBJ div and I will add transform origin bottom. And that just makes the line scale from the bottom point, not their center point, which gives us another cool effect that you can use in your projects. 99. 103 - rings rotation loading using CSS animations: Hello everyone. In this lesson we are going to create this nice loading effect using CSS animations. You can see we have a small white circle in the center. Then we have a yellow ring that rotates around it. Then a green one in the middle and a red one surrounding them up. And you can also see the red and yellow ones are rotating in the same direction while the green one is rotating in the opposite direction, we will create these rotating rings using borders. So let's see how we can create them. I will go here in my HTML and add a div, give it a class of Loader. Then inside that, I will add another div, give it a class of outer. So this will be the red border that surrounds all of them. Then I will add another div and give it a class of middle. And this will be the green border in the middle that rotates in the opposite direction. Then another div with the class of Enter to create the inner yellow ring. And finally, a div with the class of data to create the white dot or a circle in the center. Then I will go to my CSS and targeted div with the class of loader that contains all of our classes. Then I will add width, 200 pixels, height 200 pixels as well. Then I will add position relative. Then I will target the div with the class of outer and add position absolute, so we can position it relative to its parent, the loader div. Then we wanted to take up the same width and height as its container. So we will add top 0, left, 0, right 0, and bottom. You guessed it 0 as well. So this will just make the outer div completely fill up the loader div and take up it's full width and height. Then in order to create the outer red border, I will add border left, five pixels solid. This red color. Then I will copy that, paste it three times. Then I will change left to right and leave everything else as it is. So we will have a rate red border as well. Then I will target both the top and bottom borders. And make their colors transparent, not red. So now you can see we have two red borders, just left and right ones. And we don't have top and bottom borders because we set the color to transparent so they're not appearing. All right, let's go back and make them circular borders. I will go here and add border-radius 50 percent. And now you can see the borders are a circular. And we've created our outer red borders. In order to create the borders in the middle, we will just copy this div, pasted and targeted div with the class of middle. Then we will just change the values of top, bottom, left, and right to 30 pixels instead of 0, so that this div will start from 30 pixels from the left side of the container and end at 30 pixels from the right side of the container. So its width will be 200 pixels minus 60 pixels, which is 140 pixels. And that way it will be smaller. And the same thing will happen with its height. It will also be smaller than the container div by 60 pixel. So now you can see we have these middle borders in the middle. All right, let's also create the inner borders. I will copy the middle div, paste it, and target the inner one. Then I will just change the positioning properties to 60 pixels instead of 30. So this div will start 60 pixels from its container on the left and end at 60 pixels on the right. And the same thing at the top and bottom. So you can see we have this enter border as well. Alright, now let's create the small circle that sits in the center of these borders. I will go and target the div with the class of dot. Then I will add position, absolute. Top 90 pixels, left. 90 pixels, rate 90 pixels. And bottom. That's right, 90 pixels. So the circle will be positioned 90 pixels from the container div in all directions all around. Then I will add background color, white. And finally, to make it a circle, I will add border-radius 50 percent. So now you can see we have the small white circle that sits in the center of the container div. Alright, now that we have created all the elements, let's start adding the animation to them. First of all, I will go right here and create a new animation. Name it, rotate. Then inside that, at 0% of the animation duration, I will add transform, rotate 0. Then at 100%, I will add transform, rotate 360 degrees. Then I will add this animation to our borders. So I will go first inside the inner div, then add animation, rotate, then animation duration of 1 second, then linear and infinite. Then I will copy this animation declaration and paste it inside the other two dibs. And now you can see the three divs are rotating together in the same direction, giving us this effect. But if you remember, we want the middle border to rotate in the opposite direction. So what we can do is we can go right here inside the middle div and add reverse as an animation direction property. So the animation will happen in the opposite direction. And now you can see the div in the middle is rotating in the opposite direction, giving us this nice loading effect. And the only thing left is changing the colors of the middle and inner borders. So I will go back inside the middle div and change the border colors to a green color instead of red. And I will also do the same for the inner borders. I will change its color to yellow instead of red. And now you can see the middle and inner borders have these new colors. And this is the exact effect we want. 100. 104 - fading out squares using CSS animations: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this nice loading effect using CSS animation. You can see we have nine squares that are fading away nicely giving us this effect. And you can see the first column on the left fades first, then the second, then the third. We have some little animation delay between each column. So let's start creating that effect. I will go here in my HTML and add a div, give it a class of loader. So this will be the class that contains the nine squares inside it. Then I will add nine spans, and each span will have a class of S. So from S1 all the way to nine. So we will have S1, S2, S3, and these nine spans are responsible for creating R-squares. Then I will go to my CSS and target the div with the class of Loader. Then I will add position, relative width, 90 pixels, height 90 pixels as well. Then display, flex, then flex direction column so that the nine divs will be aligned in columns. Then flex, wrap, wrap so that the squares will create a second column if they don't have enough space in the first one, then below that, I will target our spans. Then I will add width 30 pixels. Height 30 pixels as well. Then I will add a red temporary background. Then finally, position relative. And now you can see we have this square and actually it's our nine squares. But since they all have the same background color and they are sitting so close together, they appear as one big square. Alright? Now I will target the before pseudo element of our spans. Then I will add content. Empty strings. Position, absolute, top, 0, left, 0, width, 100%, and height. 100% as well. Then I will add background color, white. And now you can see the color of the boxes is now wait, because we now have nine before pseudo elements and they have the same width and height as the boxes. That is why they are covering up the box is completely alright. Now, I will go back and remove this red background because we don't need it anymore. Then I will create the animation responsible for our effect. So I will create a new animation. Name it loading. Then at 0% of the animation duration, I will add width 100% and height 100%. Then at the end of the animation duration, at 100%, I will add width 0 and height 0. Then I will go up here inside that before a pseudo element and add animation. Loading 1 second, linear and infinite. And now you can see the nine boxes have this effect where their width and height becomes 0 over an animation duration of 1 second. Now, we only thing left is to add some animation delay to the second, third columns to give us the exact effect we want. So I will go back and target the before pseudo elements of the spans better placed in the second column. And those are the span with the class of S4. Then the span with the class of S5 or the fifth span, then the span with the class of six or the sixth span. And inside that, I will add transition delay 0.1 seconds. Then I will copy that. Paste it again. Then I will target the before pseudo elements of the span in the third column, which are the span with the class of seven. Then as 89. Then I will change the animation delay to 0.2 seconds. And now you can see the effect happens for the first column first, then the second column after that. Then the third column giving us this nice loading animation. 101. 105 - growing lines loading with CSS animation: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice loading effect. You can see we have the six colorful parts of the loader and they have this effect in which they get bigger than, smaller, than bigger, and so on. And this is happening one after the other. So let's see how we can create that. I will go here in my HTML and add a div. Give it a class of Loader. And inside that div, I will add six spans. Then I will go to my CSS and target the loader div. Then I will add width 70 pixels. And in order to display them side-by-side, I will add display flex. Then I will target the spans inside the loader div. And add width 10 pixels. Height, 60 pixels, margin, 0 pixels from top and bottom, and one pixel from left and right. Then finally, background color, white. And now you can see the six bands are sitting side by side and have a one pixel margin between each one. Let's go back and work on the animation effect. I will go here and create a new animation. Name it loading. Then inside that, at 0% of the animation duration, I will add transform scale y 0.1. So the spans will start animating at 0.1 of its original size. Then below that, at 35 percent of the animation duration, I will add transform scale y back to one again. Then at 60 percent and at 100%, I will add transform scale y 0.1 as well. So what this animation will do is it will make our span start animating at 0.1 of their original size. Then they will get bigger until they reach their original size again. Then from 35 percent to 60 percent, they will shrink again to 0.1 of their size. And they will stay that way for a little while from 60 percent to 100% of the animation duration, then they will go back to the original size again, and so on and so forth. We will keep on animating infinitely. Alright, let's add this animation to our spans and we'll go here and add animation. Loading. 0.8 seconds. Ease in, out. And finally infinite. And now you can see the spans had this animation effect where they start at a small size, then get bigger, then becomes smaller again and stay there for a little bit, and then get bigger and so on. Now we need to change the background of each span and we'll also add some different animation delays to each span so that they appear one after the other. So I will go here and say expand nth-child one to target the first span. Then inside that, I will add background color. This green color, and animation delay, 0.2 seconds. Now, I will pause the video and target all the other spans and add different background colors and animation delays to each span. You can see I've added different backgrounds and animation delays. And when I go and reload the browser, you can see the spans now have different colors and they're animating one after the other, giving us this really cool effect. 102. 106 - background boxes moving using CSS animations: Hello everyone. Welcome to this new lesson in the course. In this lesson, we will learn how to create this animated background. So you can see we have a text here that says background animation. And in the background we have a lot of boxes. And if you look at any one of these boxes, you can see that it moves from the bottom of the screen, that comes up from the bottom. And then it moves upward while rotating. And its opacity decreases until it reaches the top of the screen. And beyond. Then, the opacity becomes 0 and it fades out. All right, let's start here in our HTML and add a div. Give it a class of container. Then inside that div, we will add another div and give it a class of square. So we will use this square div to create our boxes. But there are a lot of boxes. So we'll copy this square div and paste it a number of times equal to the number of boxes we have. So now we have 10 divs with the class of square that will represent the 10 moving boxes in the background. Then below that, I will add another div, give it a class of text. And inside it I will add the word background animation. All right, let's move to our CSS to add our styles. I will start with the container div that contains all the divs. So I will target it. Then I will add position, relative width, 100%, height, 100% as well. So it will take up the whole width and height of the body or the whole screen. Then I will add overflow hidden. Now let's style the text we have. So I will target the div with the class text. Then we want to center it horizontally and vertically. So we will add position, absolute, top, 50 percent, left, 50%. Then transform, translate, negative 50 percent and negative 50 percent. So now you can see the text is centered horizontally and vertically inside the container div. And since the container div has the whole width and height of the body, the text is centered horizontally and vertically inside the body. Let's go back and make this text look a little bit better. I will go here and add color, white text transform. Uppercase, font size 45 pixels. Then border top five pixels, solid white. And border bottom 50 pixels, solid white as well. So now the text looks much better and we are ready to create the animation of the boxes or the squares. Remember, there are 10 squares, so we will add all the styles that they have in common first. And then after that, we will target each one of the 10 individually and add their unique styles. So let's add the common styles first, I will target the div with the class of square. And I will add position absolute. Then in order to position them below the bottom of the container div, which has the same height of the body. That means they will move below the body or below the screen. I will add bottom, negative 100 pixels. Then I will add background color. This light gray color. All right, these are the common styles that all the boxes have. All of them are located below the bottom of the screen. And all of them have the same background color. But if I go to the browser and reload, you can see nothing appears on the screen because I haven't set any width or height for these squares. And even if I come back to the code editor and get here inside the container selector, then remove this overflow hidden property. Then go back to the browser and reload. You can see nothing appears either. So they are not hiding below the bottom of the screen due to their bottom property or something. We just need to set their width and their height in order for them to appear. And we'll do that for each square individually because they have different widths and heights. So let's do that with the first square. I will go here and target the first square by adding square nth child one. Then inside that, I will set its width to 75 pixels, then its height to 75 pixels as well because it's a square obviously. Then finally, I will set its left property to 7%. So now, when I scroll down, you can see we have our first square appearing here below the body. And it's appearing because we set a width and a height to it. And it's also sitting on the left because we said it's left property to 7% All right, We don't want it to appear when we scroll. So we will go back inside the container div. And we'll add overflow hidden again. And now it's not visible anymore, but it's still there now. All right, let's work on animating this box. You remember that the boxes moved from the bottom to the top of the screen while rotating and fading out at the same time. So we'll create an animation that will do that. So I will create a new animation here. Name it boxes. Then inside it at 0% of the animation duration, or at the beginning of it, we will add bottom negative 100 pixels as it is. So it will start from a position below the bottom of the screen. Then at 100% of the animation duration, I will modify the bottom property to 100%. So this will make the box is moved from the bottom of the screen up to the top. We will also need to rotate the boxes and make their opacity decrease. So Let's do that. I will add transform, rotate 180 degrees, then opacity 0. So by the end of the animation duration, the boxes will be rotated by 180 degrees and their opacity will be 0. Alright, let's add this animation to our boxes. I will go up here inside the div with the class of square. And I will add animation boxes. Then animation duration of ten seconds. Then we want the animation to go on forever. So we'll add infinite. And finally, ease in, out. And now when I go to the browser and reload, you can see that the box starts moving from below the bottom of this screen upward while rotating. And its opacity is decreasing until it goes to the top and disappears. Then it goes back to its original position below the screen. And the animation happens again and again because we made it infinite. Alright, so now we've created animation and the only thing left to finish this lesson is to create the other nine boxes. So we will set different widths and heights for all of them. We will also change the left property for them so that they will sit next to each other. And finally, we will add some different animation delays to them so that all of them will start moving at a different time. And with that, we'll get our effect. So I'll pause the video and add these different styles for the nine other boxes. And we'll come back again. All right, now I've added all the styles. For example, you can see in the second square, we set the width and the height to 65. We also set the left property to 15% so that it will sit next to the first square. And finally, we added an animation delay of four seconds, so it won't start moving until four seconds after the reloading of the page. I did add different values for the rest of the boxes as well that I will let you take a look at when viewing the sources of this lesson. Alright, now I will go back and reload the browser, and then the boxes will start moving from the bottom to the top at different times while rotating and fading away. And that gives us the effect we want. 103. 107 - hexagon loader animation: Hello everyone, welcome to this new lesson in the CSS animation course. In this lesson, we're going to create this nice sliding hexagon loading animation. You can see it consists of two parts, a horizontal line and the hexagon shape above it. The line is rotating back and forth on its center point, while the hexagon is moving from one side to the other, back and forth as well. And it's also rotating on its center point at the same time. This will be an interesting example. So let's see how we can do that. I will start here in my HTML by adding a div and giving it a class of line. Then inside it, I will add another div and give it a class of hexagon. All right, then I will go to my CSS to style those divs. I will target the div with the class of line. Then I will add width, 300 pixels, border bottom, four pixels, solid white. So this will be the line that the hexagon moves on. Then I will add position relative. Okay, Now we will learn how to create the hexagon shape. First, I will target the div with the class of hexagon. Then I will add position, absolute, left, 0, bottom, 0, width 50 pixels, height 30 pixels. And finally, background color, red. So now you can see we just have a rectangle that has a width of 50 pixels and a height of 30 pixels and a red background color. So the idea behind the hexagon shape is we will create another two rectangles like this one, and we will rotate one of them by 60 degrees and the other by negative 60 degrees. And this will give us the hexagon shape we're looking for. So let's actually create that. To create the other two rectangles, we will use the before and after pseudo elements. So I will target the div with the class of hexagon and add colon before. And I will add content empty strings because we don't want to add anything here. Then position absolute, top 0, left, 0. We want it to have the same width and height as the red rectangle. So we will add width, 100%, height, 100% as well. Then we will add background color, blue for now. All right, so now you can see we have the blue rectangle sitting on top of the red one. And it's covering it up because it has the same height and width as the red rectangle. Okay, now we're going to add transform rotate. So now you can see the blue rectangle is now rotated by 60 degrees and the red one is now appearing behind it. Let's continue working. We will copy the before pseudo element, paste it again, and change before to, after. Then change the background color to green. And we will rotate it by negative 60 degrees, not 60. And here you can see we have the green background sitting on top of the red and blue one and rotate it by negative 60 degrees. And those three rectangles are creating the hexagon shape. So if I go back and change the background color for all of them to white, then reload my browser. You can clearly see the hexagon shape is sitting on top of the line, but we need to move it a little bit towards the top. So I will go back to the hexagon selector, and I will change bottom to 14 pixels instead of 0. And now the hexagon in sitting properly just above the line. Now right? After creating the hexagon shape, we now need to work on the animation. If we look at our demo, I want you to concentrate on the hexagon animation. You can see we have two things happening here. First, the hexagon moves from left to right, then goes back again, and it will continue doing that infinitely. And while moving from left to right, you can see the hexagon is rotating on its center point. And if we take a look at the line itself, you can see it's also rotating by around 30 degrees back and forth along with the movement of the hexagon. So let's go back and create those animations. First, we will create the animation for the hexagon. I will create a new animation. Name it animate hexagon. Then at 0% of the animation duration, I will add left 0. Then at 50 percent, I will add left 100%. And finally, at 100%, I will add left. 0 again. So what this animation will do is it will make the hexagon move from its original position on the left to the right by 100% of the container width, which is 300 pixels, then it will go back again to its original position. So let's add this animation to the hexagon. I will go up here inside the hexagon div, and I will add animation. Animate hexagon. Two seconds, linear. And because we want the movement to happen indefinitely, we will say infinite. So now you can see the hexagon is moving from left to right, then goes back again and so on. But if we take a closer look at this movement, you can see that when the hexagon reaches the end of the line, it goes a little beyond it by a space equal to its width. And this is because we set left to 100% rate here. In order to prevent that, we should subtract the width of the hexagon from this 100% here. In order to do that, we will use the count function. So I will go right here and add calc, 100% minus the width of the rectangle, which is 50 pixels. So this means that the hexagon will now move a distance equal to 100% of the distance to the left minus its own width, which is 50 pixels. Now, when I go back and reload, you can see that the hexagon will move properly just the way we want. All right, let's work on rotating the hexagon. We want to make the hexagon rotate while moving. So let's say we want to rotate it to cycles along the way. So two cycles, or equal to 360 degrees multiplied by two, which is 720 degrees. So I will go here at 50% of the animation duration at which the hexagon will be at the end of the line. And I will add transform, rotate 720 degrees. And that means from 0 to 50 percent of the animation duration. In other words, during the first half of the animation duration, the hexagon will rotate from 0 degrees to 720 degrees, then from 50 percent to 100%, or during the second half of the animation duration, the hexagon will rotate back from 720 degrees to 0 degrees. So we could have just added rotate 0 at the beginning and the end of the animation duration, but it's the default value. So we didn't add anything, and we'll get the same result. So now when I go to the browser and reload, you can see the hexagon is rotating while moving above the line exactly the way we want. It rotates from 0 degrees to 720 degrees during the first half of the animation duration, then it rotates back during the second half. Great. Now we need to animate the line itself. So I will create a new animation. Name it animate line. And at 0% of the animation duration, I will add transform. Rotate 30 degrees. So the line will be rotated by 30 degrees. When I reload the page. Then I will copy that. Paste it again. And at 25 percent of the animation duration, I will change the rotate back to 0 degrees. So it's rotation will be 0 and it will just be a horizontal line as it is. Then at 50 percent. I will change it to negative 30 degrees. So it will rotate by 30 degrees, but in the other direction, because we have a negative sign. And at 75 percent, I will add 0 again, so it returns back to its horizontal position. And finally, at 100%, I will change it back to 30 degrees. So what will happen here is once we reload, the line will be rotated to the right by 30 degrees. Then as the animation goes on, it will return back to 0 degrees. Then negative 30 degrees, which is 30 degrees to the left. Then go back to 0 rotation, then 30 degrees. And it will keep doing that forever. All right, Let's add this animation to our line. I will go right here to the container div and I will add animation. Animate line two seconds. And note that we should make the animation duration here two seconds so that it will match the animation of the hexagon. Then we add linear and infinite. So now you can see everything is working perfectly and we have the loading animation. We want. 104. 108 - expanding line menu effect using CSS animations: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this nice menu hover effect. You can see when I hover over the menu items, this effect happens where we have a thin red line that comes in from the left and then expands to cover the link, giving us this cool effect. Let's see how we can create that. I will go here in my HTML and add a URL. When an LI, then an anchor tag inside that. And I will say home. Then I will copy this link, paste it again four times, and say about Services, Team and contact. Then I will go to my CSS to style them in you. I will turn it the URL and add margin 0, padding 0 as well. Then in order to make the list item sit side-by-side, I will add display flex. Then I will target the LI at list-style. None. Then I will target the anchor tag and add position, relative. Display. Block. Then margin 0 from top and bottom and ten pixels from left and right to have some spacing between the links. Then I will add padding, five pixels from top and bottom, and ten pixels from left and right. When I will add color. With dark gray color. Font size 30 pixels. Text decoration, none. Text transform. Uppercase. When finally transition 0.5 seconds. And now you can see the menu links are looking exactly the way we want. Now, let's go back and create the thin line that comes across from the left. We will create that using the before pseudo element. So I was elected and add content, empty string, a position, absolute width, 100%, height, just four pixels. Then we want this line to be centered vertically. So I will add top 50 percent. Then Transform, Translate Y negative 50%. Then in order to shift it to the left, we will add left, negative 100%. And background color. This red color. Then finally transition 0.5 seconds. And now you can see we have these thin lines that sit next to the links. And when hovering over the links, we want these lines to move from left to right. Then it will expand to cover the link. So let's do that. I will go here and create a new animation. Name it line. Then inside that at 0%, I will add left negative 100% and height four pixels. Then I will copy this code, paste it again, and change left to 0. And I will leave the height equal to four pixels as it is. Then our copy this code, paste it and change height to 100%. So it will take up the full height of the link. Then I will add z-index negative one. So what will happen here is the red line will start moving from the left position. We'll move until it has a left value of 0. Then after that it will expand and its height will increase until it covers a blink. And we added z-index negative one here so that the text will appear in front of the red line. Alright, let's add this animation to the red line. When hovering over the link, I will go here and say, when we hover over the anchor tag, I will select the before pseudo element and add animation. Line 0.5 seconds linear. And we want the animation to stop when it reaches the end point. We'll add forwards here. And now when I go and hover over the links, you can see the red line moves from left to right. Then it expands to take up the full height of the link and cover it up, giving us this really cool effect. The only thing left now is changing the color of the link text to white when hovering over the links. So I will go here and say, when we hover over the link, I will change the color to white. And I will also go up here inside the link and add overflow hidden. And now you can see the red line is now hidden. And when I go back and hover over the menu links, the red line comes in from the left to the right. Then it expands to cover up the link, giving us the exact effect we want. 105. 109 - background boxes growing animation using CSS animations: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this background animation. You can see we have this heading that has this background animation texts. And we have these boxes that get bigger while rotating. Some of them are red and the others are blue. And they have different animation delays. That's why they're appearing one after the other. So let's see how we can create this effect. I will go here in my HTML and add a div, give it a class of container. And inside that, I will add H2 and say background animation. Then below that we will add our boxes. I will add a div, give it a class of box. When our copy this div, paste it again five times. So these would be the six boxes that will have our effect. Then I will go to my CSS, target the div with the class of container, and add position, relative, height, 100 vh and overflow hidden. Then I will target the H2 and add margin 0, color, white, position, absolute. And in order to center it, I will add top 50 percent. Left. 50 percent as well. Then transform, translate, negative 50 percent and negative 50 percent. Then I will add font-size 45 pixels. Text transform, uppercase. Then finally, z-index 1, so that the box is won't cover it up. And now you can see the H2 is looking so much better. Let's go back and work on the boxes. I will target the div with the class of box. And I will add position, absolute. Top, 80 percent, left, 45 percent. The width. 10 pixels, height, 10 pixels as well. Then border one pixel. Solid. This blue color. And now you can see we have this little box. It has a small one pixel blue border. This isn't just one box, is actually the six boxes, but we're sitting on top of each other or in front of each other. That's why we're appearing as one box. And we'll change the positioning of each box so that they will be located in different spots on the page. So let's go back and do that. I will go here and target the second child of the boxes. So I will target the div with the class of box. And I will say nth-child two. And then I will add top 40 percent and left 25 percent. I will also add a border color, red. So now you can see we have a new box sitting here in its new position. Alright, let's go back and do the same for the other boxes. I will copy this div, paste it again four times. And that will target the third div here. And James top to 50 percent and left to 75 percent. Then below that, I will target the fourth div and change top to 10 percent and left to 90%. I will also add border color red when the fifth div change top to 85 percent and left to 10 percent. And finally, the sixth child and change top 10 percent and left to 50 percent. Then add border color, red. And now you can see we have our six boxes all over the place because we changed the positioning of each one. Now, let's work on the animation effect. If you remember, the boxes get bigger while rotating. So I will go here and create a new animation. Name it boxes. And inside it at 0% of the animation duration, I will add transform, scale 0 and rotate 0 degrees. Then opacity one. And below that at 100%, I will add transform, scale 20, rotate 960 degrees and opacity 0. So what will happen here is the box will start from a transform scale of 0, meaning from nothing actually to a transform scale of 20. So it will get 20 times bigger during the animation duration. And it will be rotating from 0 degrees to 960 degrees while doing that. And also its opacity will decrease until it becomes transparent. Alright, let's add this animation to the box div. I will go up here and add animation boxes. Then an animation duration of 12 seconds, then ease in when infinite. So now you can see the box is get bigger while rotating, giving us the effect we want. But the effect will be much better if we can add some animation delays between the boxes. So they will appear one after the other. So let's go back and do that. I will go here inside the second child and add animation delay two seconds. Then inside the third child, and add animation delay. Four seconds. Then six seconds inside the fourth child. And eight seconds inside the fifth child. And finally, ten seconds inside the sixth child. And now you can see the boxes are animating one after the other, due to the different animation delays we added to each one of them. But there's one problem, as you can see, when I reload the page. For example, take a look at this box. You can see it's showing up and waiting for its animation delay to end. Then it starts the animator. But we don't want it to appear until it starts animating. So what we can do is we can go back here and add transform scale 0. And now you can see the box is don't appear until they start animating. And all of them are moving, giving us the effect we want. 106. 110 - what is the CSS clip path property and how we can use it o create shapes: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to learn about the CSS clip-path property and how we can use it to create the shapes. So we will create a triangle, a circle, a hexagon across a star, and message shape. It's a very powerful tool and we'll use it in the coming lessons to create some creative animations examples. So first of all, what is the clip-path property? Well, the clip path is a CSS property that allows us to specify a specific part or region of an element to display with the rest of the element being hidden. So all the examples we have seen where only the part of the element being displayed. So in the triangle example, we chose to display a part of our image that has the triangle shape. And the rest of the image outside this triangle shape was hidden. And this is true with the rest of the shapes as well. All right, let's see how we can use the clip path property to create this triangle shape. We've seen in our first example. Here in my HTML, I just have an image. And in my CSS I've added a specific width and a height for this image. And as you can see, the image is sitting in the middle of the browser. All right, now, let's use the clip path property to create the triangle shape we want. So we want to show this part only and hide or clip the rest of the image. How can we do that? I will go here inside the element we want to clip, which is the image. Then I will add clip-path polygon. And I will just add this code right here. And as you can see, the part of the image that is being displayed is this triangle and the region outside this triangle is hidden. So let's go back and explain the code we added here. This code right here defines the area of the image that we want to display. You can see it consists of three pairs, and each pair represents a point of the triangle. So the first pair represents this point of the triangle. The second pair represents this second, and the third pair represents this last point. And these are the points that define or create our triangle. So let's see how the value of each pair represents these points. Before the image was clipped, this was its size, right? It was a square. So I will just leave this square as it is to help us imagine what happened here. The first pair of points is 50 percent and 0%. So this 50 percent represents the distance from the top left corner of the image along the x axis. And the 0 represents the distance from the top left corner of the image along the y-axis. So we started here at the top left corner of the image. Then we moved 50 percent to the right along the x-axis until we reached here. Then we moved 0% towards the bottom along the y-axis. So 0 percent means that we didn't move at all. So this is our first of the triangle. Then the second pair here has 0% at the x-axis and 100% on the y-axis. And this is true. You can see here this point is located at the bottom left corner. So starting from the top left corner, we moved 0% distance to the right and 100% distance toward the bottom. And we ended up at this point. Finally, the third pair has 100% on the x-axis and 100% on the y-axis. And it's representing this point, which is located at the bottom right corner. So starting from the top-left corner, we moved 100% to the right along the x-axis and 100% towards the bottom along the y-axis in order to get to this point. All right, So basically we just give the browser the points defining our shape. And then the browser draws this shape and shows what's included in the shape and hides or clips the rest of the parts of the element outside the shape. So let's say I want to draw another triangle that shows this part of the image and hides the rest. So basically we want to flip the triangle upside down or make the base at the top. So let's define our three new points. The first will be located here at the top left corner. So basically we won't move and either horizontally or vertically. So the first pair will be equal to 0, 0%. Moving on to the second, it will be located at the top right corner. So we will move 100% to the right along the x-axis and 0% along the y-axis. So we will have 1000%. Then the third and final point will be right here at the bottom center of the image. So we will move 50 percent to the right along the x-axis and 100% towards the bottom along the y-axis. So we will have 50 percent and 100% right here. And now, when I reload the browser, you can see we have this new triangle that is defined by these three new points. Alright guys, so it's practice. I want you to try to create this triangle shape where the base is located at the left side of the image. So you will just change some values here in order to get this shape. So pause the video and try it on your own. All right, Now I want to tell you about a very nice tool that we are going to use from now on when working with the clip path property. So as you might have noticed, it will be difficult to create complex shapes by directly coding it. It will be nicer if we have a tool that can help us. And this tool is actually a website called clippy. So as you can see, guys, we have a lot of shapes here that we can apply to our elements. So we have this triangle and its code is sitting right here. So we can just copy this code and directly add it to our element. So let's try the circle shape. I will copy this code. Go back to the browser and paste it here inside the image selector. And as you can see, the image is now turned into a circle and the parts outside the circle are hidden. Let's go back and try another shape. Let's try this Starship. I will copy the code. Go back to my CSS and paste it. Then you can see the image now takes the star shape. So as you can see guys, the clip path property is really powerful in creating shapes out of HTML elements. We can also control which shape we want to create. It doesn't have to be these specific shapes here. We can play around until we get the shape we want. For example, I will choose this trapezoid shape here. And as you can see, we have these colorful dots that we can use to move around and create any shape we want. So let's say I'm happy with this one. I can copy its code from here, paste it inside the image selector. And as you can see, the image now has this shape. So I want you to play around with this nice tool and get used to it because we're going to use it a lot in our future animations, effects. 107. 111 - creative split loading effect using CSS clip path property: Hello everyone, welcome to this new lesson in the course. In this lesson we are going to create this split text loading effect using clip-path and CSS animations. You can see the word loading is split into two parts, or top part and a bottom part. We will do that using the clip path property. And also the top part comes in from right to left, while the bottom part comes in from left to right. And they meet in the center forming the word loading. It's a pretty nice effect. So let's start creating it. I will start here in my HTML by adding a div and giving it a class of Loader. Inside it, I will add a span, give it a class of top half. And inside it I will add the word loading. Then I will copy this span, paste it, and change the class to bottom half instead of top half. Then moving to my CSS, I will target the div with the class of loader. Then I will add width 300 pixels, height 60 pixels. Then border seven pixels, solid. This blue color. And I will also add a border radius of 10 pixels. All right, Let's send to these two spans. I will go back and add text align, center, and line-height, 60 pixels. And finally, I will add position relative. As you can see, the spans are now centered inside the loader div. Let's go back and make these spans sit one above the other. So I will go back here and target the span. Then I will add position absolute, top 0, left 0 as well. Then in order to make them have the same width and height as the loader div. I will add width, 100%, height, 100%. Then I will add font size, 48 pixels. Text transform, uppercase. And finally, font weight 600. And as you can see, the spans are now bigger and they are sitting on top of each other because we set the width and height to 100% of their container. Alright, let's go back and work on the first band that has the top half class. I will target it. Then I will add color. This nice red color. Then we want to make only the top half of this span visible and high the bottom half, because the bottom half will be represented by the second span. So we would do that using the clip path property. I will go to Clippy and I will choose the trapezoid shape. Then I will drag these circles until I get exactly the top half of our element. Just like that. Then I will copy the code, go back to my CSS, and paste it into the span with the class of top half. Then I will target the span with the class of bottom half. Then add color, our blue color. Then we want to display only the bottom half. So I will go back to Clippy and move these dots to get the bottom half. Only. Then I will copy the code. Go back and paste it inside the bottom half span. And just like that guys, you can see that we have only the top half of the first span visible while the bottom part is hidden or clipped. And the same for the bottom part. And because they are sitting on top of each other and have the same font size. They appear like they are one element, but they are not. All right, Finally, let's create the animation that makes the move until they meet each other. I will create a new animation. Name it, split. Then inside it at 0% of the animation duration, I will add transform, translate X 100%. Then I will copy that. Paste it again three times. And at 40 percent, I will change the value of the transform back to 0. Then at 60%, I will make it 0 as well. Then at 100%, I will change it to negative 100%. So by looking at this animation, you can see that the element, we'll start at 100% of its width from the right. Then it will move to the left until it returns to its original position with 0 translate. Then from 40 percent to 60 percent of the animation duration, it will stay at its position at 0 translate. Then it will move to the left again by 100%. So let's add this animation to the top half span. I will go right here and add animation. Split, then animation duration of four seconds, then linear, and finally infinite. So now you can see the top part is moving from the right, then it stays a little in the center, then it moves to the left and keeps doing that. Let's also add this animation to the bottom part. I will go back to copy the animation line of code, paste it, and at the end I will just add reverse. So this is an animation direction value that will make the element animate in a reverse direction from 100% to 0%. So we'll start on the left and go to the right, not from right to left. And finally, I will go up here inside the loader div. And I will add overflow hidden so that the spans won't appear outside of a loader div. And now you can see the bottom part is also animated in the other direction. And together they are creating this really nice effect. 108. 112 - creative CSS wavy effect using CSS clip path property: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this nice wavy effect using CSS animations and the clip path property. It's a pretty cool example and we'll see how we can animate the clip path property in order to get such a cool effect. So I will start here in my HTML by adding a div and giving it a class of wave. Then inside it I will add an H2 and say wave. I will copy this H2 and paste it again. And as you can see, we have just two headings setting on top of each other. Let's go to our CSS and start styling. Then. I will target their container div that has the class of wave. And I will add position relative. Then width of 500 pixels, and height 500 pixels. Then I will target the heading itself and add position absolute so that both of them will be positioned relative to the wave containers on top of each other. And in order to center them horizontally and vertically, I will add text-align, center, then line height, 500 pixels. Then let's make the font bigger by adding font size 170 pixels. Then finally, text transform uppercase. And now you can see our headings are bigger and they are sitting on top of each other and centered horizontally and vertically inside the browser. Let's keep going. I will go back here and say t2 int child one to target the first heading. Then inside that, I will add color. This light blue color. As you can see, nothing changed because the second heading is sitting on top of it and covering it. All right, let's target this second heading. I will say h2 nth child two. And inside it, I will add color to this darker blue color. And as you can see, it has a blue background and it covers up the first heading. So for example, if we clip the top part of the second heading, we will see the top part of the first one beneath it. So let's quickly do that. I will go to the website copy and I will just move these points until I get only the bottom half visible. Then I will copy the code and get back to the second heading selector and add that. And as you can see, the top part of the second heading is now clipped, and the top half that is visible here with this lighter blue color. Actually the first heading. So now we know that the second heading is appearing on top of the first one. All right, I will just remove this clip-path line of code. And now we have the second heading visible again. Next, we want to create the wavy animation of the second heading. So I will go back to my CSS to create a new animation. And I will name it wave. Then inside it, I will create three animation stages. The first one is at 0%, then the second one is at 50 percent. And the final one is at 100%. Then I will go back to the Clippy website. And as you can see here, we have what's called a custom polygon. And that just allows us to create any shape we want by adding points. So I will try to create a wavy shape as you can see by adding some points and moving them around. Alright, so this looks fine. I will copy the code. Go back to my CSS and paste it here at 0% of the animation duration. And here at 100%. Then I will go back again to the site and tried to create another wave in the other direction. So I will add some points and try to get the wavy shape. Then I will copy the code and paste it here at 50% of the animation duration. So what will happen, guys, is the second heading will have the shape of the first wave. Then it will animate itself to the second wave at 50%. Then it will go back to the first wave again at 100%. And all of this will happen smoothly, giving us a nice wavy effect. So I will go up here inside the second heading and add animation. Wave. Two seconds, ease in, out. Then finally infinite. And as you can see, the second heading now has the shape of the wave. And it's animating from the first shape. The second shape, giving us this nice wavy effect. And you can see the first heading with the blue light color is visible here below the wave effect. We can also create another cool effect by going back inside the first heading and changing the color to transparent instead of light blue. Then below that, I will add webkit text stroke to pixels and the same blue color. And now you can see the color of the first heading is now transparent. And we have a stroke around it. And it looks very nice. 109. 113 - creative image hover effect using CSS clip path property: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this nice image hover effect using the clip path property. So you can see we have three images here and they are split this way. And when hovering over any of them, it gets bigger and takes up the whole space of the container. So let's see how we can create this effect. I will start here in my HTML by adding a div and giving it a class of container. And then inside that, I will add another div and give it a class of clipped and another class of clipped one. Then I will copy that class, paste it again two times, and change clip one to Clip 2. Then the clip three. After that, I will go to my CSS and target the container div. Then I will add position, relative width, 800 pixels, height, 500 pixels. Then finally, background color. This dark gray color. So now you can see we have this dark gray background. Then I will target the div with the class of clip. Then I'll add position, absolute, top, 0, left, 0, width 100%, and height 100%. Then finally, transition or 0.5 seconds. So this is a general class that is applied to all three of the dibs. We just set the width and height of the divs to full width and height of the container. All right, let's start targeting each div individually. I will target the div with the class of Clip 1. Then I will add background URL, first image, and you will find all the images in the resources file. Then I will add background size, cover, then background position, center. And now you can see we have this first background image here, and it's taking up the full width and height of the container div. Then I will copy this div, paste it again, target the second div, and use my second image as a background. Then I will paste it again. Target the third div this time and use the third image. And now you can see the images are sitting on top of each other. So this image here is the third one, and it's sitting on top of the other two. Alright, let's now clip the images so that they will have the shape we want. I will go to the Clippy website and we will start with the third image. We want the right part of the third image to appear. So I can just move these dots around until I get the shape I want. Let's say this shape. Then I will copy the code. Go back to my CSS and paste it in the third div. And now you can see the third div is clipped and only this part here on the right side is visible. All right, let's work on the second one to the site and move the dots until I get a shape at the center. So I will play around until I get where I want. Alright, I will copy the code now. Paste it again in the second div. And now you can see it's also clipped and the middle part is visible. Let's quickly clip the first div. So I will go back to the site and I want the left side to appear. So I will move the dots around until I get the shape I want. Then again, I will copy the code and added inside the first div. And just like that, you can see the first div is also clipped and the part on the left side is visible. All right, now we want to work on the hover effect. First of all, I will go right here and say, when hovering over the container, I want to make some changes happened to all three divs. So I will target the clip div. Then what I want to do is I want to hide all the parts of the clips when hovering over the container. So I will go to the Clippy site and I will drag all the points to the right so that they will be hidden. I will copy the code, go back to the code editor and paste it here. And now when I go and hover over the container, you can see all the divs shrink until they disappear. But we don't want that. We want the image that we hover over to expand until it takes up the full width and height. So that is what we are going to do next. I will go here and say, when hovering over the clip div. And since we want the images to expand to the full width, I will go back to the Clippy site and I will move the dots until I get the full width and height visible. Then I will go and copy the code, go back again and paste it right here. So this block of code just means that when hovering over any of the three images, that expands until it takes up the full width and height. So let's go to the browser and try that out. You can see that when I hover over any image, it expands and takes up the full space, covering up the other images. And that is the effect we want. 110. 114 - creative CSS pop up effect using CSS clip path property: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice pop-up hover effect. You can see we have a little circle here. And when we hover over it, this div pops up and it contains a header and a paragraph. So the idea behind this effect is very simple. We will create our div, then only show the little circle on the right and hide the rest of the div. Then when hovering over it, we will show all of the div. All right, let's start doing that. Here in my HTML, I will add a div, give it a class of card. Then inside I will add an H one and say information. Then I will add a paragraph and add some random text here. Then I will go to my CSS to start working on those. I will target the div with the class of card. Then I will set its width to 500 pixels and its height to 250 pixels. Then I will set its background color to this nice light blue color. Then I will add padding, 20 pixels from the top, and 80 pixels from the right, then 20 pixels and 20 pixels from the bottom and the left. Then I will add border-radius 10 pixels to make the corners a little bit rounded. Then finally transition or 0.5 seconds. And now you can see we had this card div and it contains a header and a paragraph. All right, let's keep going. I will target the H1. Then add margin, bottom 20 pixels. Then I will target the paragraph and set its font size to 18 pixels. All right, That looks better. Now, let's work on clipping this div into the little circle that sits on the top right corner. I will go to the Clippy website. Then I will choose the shape of the circle here down below. Then I will make this circle smaller and try to position it on the top right corner. Okay, that looks good. I will copy this CSS code. Go back to my CSS and paste it in the card div. And as you can see, we now have this little circle sitting right here, and the rest of the card is now hidden. Alright, when hovering over the card, we want to resize the card back to its full size. So I will go back to the Clippy site, choose the circle shape again. And I will increase the circle size until it shows the full size of the div. Then I will copy that code. Go back to my CSS and say, when hovering over the card, I will paste this code. And now when I go back and hover over the little circle, you can see it returns to its full size, showing the header and the paragraph. And all of this happens smoothly because we added a transition of 0.5 seconds here. Alright guys, so that's it for this effect. It was really simple, but it looks good. 111. 115 - black to white and white to black text effect using CSS clip path: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice text hover effect using the clip path property. You can see here we have this text where half of it is the word white and the other half is the word black. And when we hover over the black part, the full black word appears and the white word gets smaller until it disappears. And the same happens when hovering over the white word. It fully appears while the black word disappears. So let's see how we can create this effect. I will start here in my HTML by adding a div and giving it a class of Maine. Then inside it I will add an H1 and add the word black inside it. Then another one below that, and add the word white. Then I will go to my CSS to target the main div and add position, relative and width 800 pixels. Then I will target the H1, add position, absolute, top 50 percent, left, 50% as well. Then transform, translate negative 50 percent and negative 50 percent. Then I will add margin 0, padding 0, and width. 100%. Text align, center, font size, 220 pixels. And finally, text transform, uppercase. And now you can see the two words are sitting on top of each other. All right, Let's continue working. I will go here and target the second one that has the word white inside it. So I will say H1 nth child two. Then I will add color white, then transition 0.5 seconds. Now you can see the word white is sitting on top of the word black. And we want to make only half of it visible. So we will go to the Clippy website. Then choose the trapezoid shape. Move the dots around until I get the shape I want to show for the white word. Then copy the code. Go back and paste it inside the selector for the word white. And now you can see the word white is now split. And this is the only part that is visible while the other part is hidden. But as you can see, the word black is visible behind the word white, and we don't want that. So what we can do is we can add a background colors similar to the background color of the body. And it will hide the part that is visible. So I will go back and do that. I will go here and add background color. This color. It's the same color as the background of the body. And now you can see this background color is applied and we have the exact shape we want. All right, let's work on the hover effect on hovering over the word white. We want it to take up the full size and cover up the word black. So I will say H one nth-child to. And when hovering over that, I will go back to the Clippy website and I will make the word white go back to its full size. So I will move the dots until I get the full size of the ship. And then I will copy the code, go back and paste it. And now you can see when I hover over the word white, it gets bigger and returns to its full size, covering up the word black. All right, now we want to do the same for the word black. When hovering over it. We want it to get bigger and returned to its full size, covering up the word white. So I will select the first heading that has the word white by adding one, nth child one. And when hovering over that, I want to make some changes happened to the one that sits directly next to it. So this line of code here just means that when I hover over the word white, I will make changes happened to the word black. So this selector here just targets the H1 element that sits directly after this element. So I will go back to the Clippy website and I want to make the white heading shrink until it disappears so that the black element can show up and become its full size. So I will move the dance until I get the shape I want, which is no shape basically. Then I will go back to my CSS and add this code here. So this just means that when I hover over the first H1, which is the word black, the second one will shrink until it disappears. And this will give us the effect we want. And now when I go and hover over the word black, you can see the word white shrinks until it disappears and makes the word black go to its full size, giving us the effect we want. 112. 116 - image to circle hover effect using CSS clip path property: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this card hover effect using CSS clip property. You can see we have this image and when hovering over it, it shrinks until it becomes a small circle. And we have some content here that appears below the image. So we have h1, h2, or a paragraph and an anchor tag. We will create this cool effect using V clip-path property. So let's do that. I will go here in my HTML and add a div, give it a class of card. Then below that, I will add another div. Give it a class. So this would be the div that contains our image. Then I will add our image inside it. Then below that div, I will add another one. Give it a class of content. Then inside that, I will add an H2 and say title. Then a paragraph after that. And I will add some Lorem Ipsum dummy text. And finally, I will add an anchor tag and say read more. All right, I will go to my CSS to style that. I will target the div with the class of card. Then I will add position, relative width, 335 pixels, height, 500 pixels. Then after that, I will target the div with the class of image and add position absolute, top 0, left 0 as well. Then we want it to take up the full width and height of the card. So we will add width 100% and height 100% as well. Then finally, we will add transition or 0.5 seconds. All right, let's keep going. I will target the image itself that sits inside our div and add width 100%. And now you can see the image has the same width as its container. Now, we want to make the image shrink and become a small circle when hovering over it. So let's do that. I will say when hovering over the div that has the class of card, I want to make some changes to the div with the class of image. And I will go to the website Clippy to create the circle shape we want. I will try to create the exact circle size I want in the exact position I want. Then I will copy the code. Go back again and paste it here. Then I will go back again to the Clippy website and I will make this circle take up the full size so we can show the full size of the element. Then I will copy the code again. Go back and go right here inside the image div, and paste the code here inside the div with the class of image. So what this will do is when we hover over the card, the div with the class of image will change from this clip path property to this clip path property where it will be a smaller circle. And now you can see when I hover over the card, the image shrinks until it becomes smaller. And when hovering away, it goes back to cover the whole size of the card. All right, let's go back and continue working. We will work on the content. So I will target the div with the class of content. And I will add position absolute, left, 0, bottom 50 pixels because we want to position the text above the bottom edge by 50 pixels. Then to align the text in the center, I will add text align center. Now you can see the content is located at the bottom of the card div. Let's keep going. I will target the H2. Then I'll add padding and margin 0 as well. Then I will add text transform, uppercase. Then I will target the paragraph and add margin bottom 25 pixels. Then font size, 16 pixels, and text transform. Capitalize. Then I will target the anchor tag. Add display, inline-block. Text decoration. None. Background color, black color, white. Padding, five pixels from the top and bottom, and ten pixels from the left and right. Then finally, I will add text transform capitalize. All right, now we have the contents style the way we want. Let's keep going. We want this content to be hidden and appear only when we hover over the card. So I will go here and target the H2, the paragraph, and the anchor tag. Then I will add opacity 0, then transition 0.3 seconds. And I will add transform translate Y 20 pixels. We set the Translate Y to 20 pixels here because we want these elements to move from the bottom to their original position while fading in. When we hover over the card, it will be a nicer effect than just failing in. Then finally, when hovering over the card, we want these elements to appear again and fading nicely. So I will say when we hover over the card, I will make some changes to the H2. Then I will copy that, paste it, and target the paragraph this time. Then I will also target the anchor tag. Then inside that I will add opacity one again so that these elements appear again on hovering. Then Transform, Translate Y 0 so that they will move from the bottom to their original position. And finally, transition delay 0.5 seconds. And now when I go back and hover over the image, you can see it shrinks down to become a circle. And the content here fades in nicely while moving from the bottom to its position, giving us this really cool effect. 113. 117 - creative image hover effect using CSS clip path: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice image hover effect using the clip path property. You can see when I hover over the image, it shrinks from the bottom left corner to the top right corner. And we have this text appearing below it. And this text contains an H2, a paragraph, and a link. So let's see how we can create this effect. I will start here in my HTML by adding a div and giving it a class of card. Then inside it, I will add another one with the class of content. And inside this content div, I will add an H2 and say image hover effect. Then I will add a paragraph and add some Lorem Ipsum text. Then finally, I will add an anchor tag and say read more. Then I will go to my CSS target the div with the class of card. When I will add position relative width, 400 pixels, height, 400 pixels as well. And finally, background color, black. So here you can see we have a black background with a width and a height of 400 pixels sitting in the browser. All right, let's keep going and we'll go back here and targeted div with the class of content. Then I will add position, absolute width, 60 percent, Top, 50 percent, left, 50 percent as well. Then in order to center the content, I will add transform, translate, negative 50 percent and negative 50 percent. Then I will add color, white. And finally, text align center. And now you can see the content div is centered inside the card. Let's continue working and we'll go back to my CSS and target the H2. Then I will add margin, bottom 20 pixels and text transform. Capitalize. I will also target the paragraph. Add margin bottom 30 pixels. And text transform. Capitalize. Then I will target the anchor tag. Add display. Inline-block, padding, 10 pixels from top and bottom, and ten pixels from left and right. Then border. One pixel. Solid white. Text decoration, none. Color. White. Transition 0.5 seconds. Then finally, text transform. Capitalize. Alright, now, when hovering over the link, we want to change the color to black and add a white background. So let's do that. I will go here and say when hovering over the link, I will change its color to black. And I will add background color white. And now when I hover over the link, we have this effect where the background color changes to white and the color of the text changes to black. Now, let's add the image that sits on top of the content. I will go back to my HTML, go right here below the content div, and add an image tag. Then I will add our image. You will find it in the resources for this lesson. So as you can see, this image is all over the place. Let's go back to CSS and fix that. I will target it. Then add position, absolute, top, 0, left 0 as well. Width 100%, and height 100%. When an object fit covered. And finally, transition 0.5 seconds. So now you can see our image is now sitting on top of the content and covering it up. Now we want to create a hover effect. So when hovering over the image, we wanted to shrink from the bottom left corner all the way up to the top right one. So I will go here and say when hovering over the image. Then I will go to the Clippy website and I will choose the trapezoid shape. Then I will move this dot here from the bottom left corner to the top right one. Then copy the code and get back to my CSS and paste it. Then I will go back to the Clippy website and make the image go back to its full size. Again. Copy the code, and get back to my CSS and paste it here inside the image tag. So this will just tell the browser that when hovering over the image, we want it to change from this full size to this size where it will be completely hidden, moving from the bottom left corner to the top right one. So when I go and hover over the image, you can see it has the exact same effect we want. It shrinks from the bottom left corner to the top right corner. And actually we can change that pretty easily. For example, let's say we want to make it shrink from the top left corner to the bottom right one. We can do that easily by going back to the Clippy website. And I will move this dot here from the top-left corner to the bottom right one. Then I will copy the code. Go back to the image selector, and paste it here when hovering over the image. And now when I hover over the image, you can see it shrinks from the top left corner to the bottom right one, giving us this cool effect. 114. 118 - creative menu split effect using CSS clip path property: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this cool and then you hover effect using the clip path property. You can see when I hover over the links in the menu, this effect happens where we have a horizontal line that moves through the links in kind of splits them into two halves, the top half and the bottom half. And you can see the top half moves a little to the top right side and the bottom half moves to the bottom left side. So let's start creating this effect. I will go here and add a UL then, and then an anchor tag inside that. And I will say home. Then I will go here and add data, text and say home as well. You'll find out later why we added the data text attribute here. Then I will copy this list item, paste it again four times. And say about the services, team and contact. Alright, I will go to my CSS and target the UL. Then I will add margin 0, padding 0 as well. Then I will target the LI and add position. Relative, list-style, none. And finally, margin, ten pixels from top and bottom and 0 pixels from left and right. All right, I will target the anchor tag and add position relative. Then display block, text, align, center, margin, 0. Padding, five pixels from top and bottom, and ten pixels from left and right. Then I will add text transform. Uppercase, transition, 0.5 seconds. Font size, 16 pixels, font-weight, 900. And finally, text decoration. None. And now you can see the links are looking exactly the way we want. Next, we want to split the links into two halves so that when the line passes through them. Split effect will happen, and we'll do that using the clip path property. So first, I will target the before pseudo element of the anchor tag and add content, a TTR data text. So what this will do is it will grab the text we have in the data text attribute and put it in the content of the before pseudo element of each link. So the before pseudo element of the first link will have a content of home. The second link will have a content of about, and so on. All right, next we want this content to sit perfectly on top of the original text of the link. So I will add position, absolute, top, 0, left, 0, width 100%. Then I will add padding, five pixels from top and bottom, and 0 pixels from left and right. Then I will add color. This dark gray color box sizing border-box transition, 0.5 seconds. So now you can see the before pseudo elements are sitting perfectly on top of the links and they have this dark gray color. All right, now the before pseudo element will be the top half. So let's go to the Clippy website and create the code responsible for that. So I will choose the trapezoid shape and move the dots until they represent the top half exactly. Then I will copy the code back to the before pseudo element and paste it. So now you can see the top half of the before pseudo element is visible while the bottom part is hidden. Let's actually go back and make the color of the links transparent. I will go inside the links selector and add color. Transparent. And now you can see it clearly, the top half is visible and the bottom one is hidden. Alright, let's do the same for the after pseudo element. The only difference is we will hide the top half and show the bottom one. So I will copy the before pseudo element, paste it again. And the only thing that will change is the clip path property. So I will go back to the Clippy website and I will move the dots to target the bottom half, not the top one. Then I will copy the code, go back and paste it inside the after pseudo element. And now you can see the after pseudo element is now appearing on the bottom half. Alright? When hovering over the links, we want the before pseudo element to move to the top right corner and the after pseudo element to move to the bottom left one. So let's do that. I will say when hovering over the anchor tag, I will make some changes to the before pseudo element, which is the top half hour, change the color to this red color. And I will add transform, translate 10 pixels. So it will move ten pixels to the right along the x axis, the negative 3 pixels. So it will be shifted towards the top by three pixels. Then I will copy that again. And change this to negative 10 pixels and positive three pixels. And now when I hover over any link, you can see the top half and the bottom half are moving and giving us our cool split effect and also their color changes. To read. The only thing left now is the horizontal line that passes through the links and splits them. We will create that using the before pseudo element of the list items. So I will target it. Then inside that I will content empty strings. Position, absolute. Then in order to center it vertically, I'll add top 50 percent. Then Transform, Translate Y negative 50 percent. Then we want it to take up the full width of the list item. So we'll add width, 100%. Then height, only one pixel. And background color. This dark gray color. Then we want it to come from the left side to the right side. So I will add left negative 100%. And finally transition 0.5 seconds. And now you can see we have this thin line that sits on the left side of the list items. And when we hover over the list items, we want this line to move to the right across the links. So I will say when hovering over the list items, I want to make some changes to the before pseudo element. I will set the left property to 100% instead of negative 100%. And now, when I hover over the links, you can see the line moves across the links, giving us this cool splitting effect. Let's go back and hide the line outside the link. I will go back here inside the list item and add overflow hidden. We also wanted to split effect to have some delay and happen slightly after the lines start to move. So I will go inside the top half and add transition delay 0.25 seconds. And I will do the same for the bottom half as well. And now you can see the horizontal line is now hidden. And when we hover over the link, the line moves and spits it, giving us the exact effect we want. 115. 119 - creative button hover effect using CSS clip path property: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create another button effect using the clip path property. You can see this button is split this way into two parts, a white part and a purple part. And when hovering over the white part, the background color of the button expands and becomes white. And similarly, when hovering over the purple part, it also expands and the background of the button becomes purple. So let's create this effect. I will start here in my HTML by adding an anchor tag. Then inside that, I will add a span and say button. Then another span below that. And say button as well. Alright, then I will go to my CSS and target the anchor tag. Then add position, relative width, 180 pixels, height 60 pixels. Then I will target the spans inside the link and add position absolute so that we can position it relative to the anchor tag. Then we will add top 0, left 0 as well. Width, 100%, height, 100% as well. So the two spins will have the same width and height as the link. Then I will add color, white, background color, this purple color. Then let's center the text. I will add text-align, center and line-height, 60 pixels. Then I will add text transform, uppercase letter spacing to pixels. Then finally, font size, 22 pixels. And now you can see the two spans sit one above the other and are taking up the full width and height of the anchor tag. All right, Now I want to target the second span. So I will say span nth child to to target the second span. Then inside that, I will change the background color to white and the color to our purple color. Then I will add transition 0.5 seconds. So now you can see the second span has a white background and the text color is purple. But below that sits the first span with the purple background and white text. And the reason why the second span is appearing on top of the first one is simply because it came after the first one in the HTML markup. But if we clip this specific part from the second span, the first one will appear below it, and that's what I'm going to do next. I will go to the Clippy website and I will choose the left point shape this time. Then I will move the dots until I get the shape I want. So we'll try to make it show half of the span. Then I will copy its code. Go back to my CSS and paste it. And now you can see that only this part on the right is visible on the second span while the left part was clipped. And that's why the first band is now appearing below it. Alright, now, when hovering over the second span, which is the white part, we want it to get bigger again and take up the full size of the link. So I will go here and say span nth-child too, to target the second span. And when hovering over that, I want to display the full size of the second span. So I will go back to the Clippy website and I will move the dots to the left until it displays the full size of the element. Then I will copy the code, go back and paste it inside here on hovering over the second span. And now when I go back and hover over the white part, you can see that it expands to the left and takes up the full size of the link. So its size changes from the first case in which the right part is only visible to the second case where it's full size is visible. All right, Now, when hovering over the purple part, we want the white part to shrink and disappear so that the first span or the purple part appears completely. So let's do that. I will go here and say span nth-child. One to target the purple background. And when hovering over that, we want to make some changes happen to the span that comes directly after it, which is the white background. Then I will go back to the Clippy website and I will move all the dots to the right so that the white background will shrink and disappear completely. Then I will copy this code, go back and pasted here. And now when I hover over the purple part, you can see the white part shrinks completely towards the right, allowing the purple part to appear again. And when hovering over the white part, it grows to the left until it takes up the full size of the link. And that everyone is the exact effect we want. 116. javascript effects: So many of you asked me to create some Javascript effect lessons. So here we are in this section where we'll learn how to use Javascript and CSS animations together to create some really interesting effects that are impossible to create using only CSS. So here are the examples we're going to create together. 117. colorful text animation hover effect: Hello everyone. Welcome to another new lesson in the course. In this particular lesson, we are going to create this really cool text hover effect. You can see when we hover over this text, this effect happens as you can see, the text shines from left to right, and all the letters have different colors. When we hover away, this lighting effect fades away. We will create this effect using HTML, CSS, and a little help from Javascript. Let's start creating this effect. I will go in my HTML and add an H two, give it a class of text. Then inside it I will add Javascript text. Then I'll go to my CSS and target the body. Add display, flex, justify content, center a line, items center, min height, 100 VH background, this dark gray color. Then below that, I will target the H two and add position relative font size three. E M, letter spacing, 0.05 M. Cursor default text transform upper case, then finally, font weight 500. Now you can see the H two looks much better. Okay, now let's go to the Javascript file. What we want to do everyone, is we want to wrap each letter of the H two text into a separate span. The letter J will be wrapped inside a span, then the letter a, then the letter, and so on and so forth. Then we'll start styling these spans. We will do that using Javascript. Let's do that, and I hope you'll understand what I mean. I will start here by selecting the H two and store it in a variable. I will create a variable, name it text, and say document query selector and target the H two that has a class of text. Now let's start wrapping each letter in a span. I will create a new variable name it spans. Then I'll set that equal to text intext. What innertext method will do is it will extract the text inside the H two just to see what we're doing. Step by step, I will go here and add console log spans. Now when we open the console, you can see we have prints down Javascript text, which is the text inside the H two. Okay, Now we want to retrieve each letter individually so that we can wrap it inside a span. And we can do that using the split function. I will go here and add split, and I will add an empty strings inside it. The split property is used on strings to split them, and it returns in a array which contains the split word or letters, and the empty strings here is the separator. For example, if we added a space here inside the empty strings, you can see our string is split into two words on the space here. But since we want all the letters separated, we will remove this space here. Now you can see we have a big array which contains all the letters as the array elements. All right, now we want to loop over these letters in the array and start wrapping them inside spans. And we will do that using the map method. I will go here and add map here as the first parameter, I will add letter at the second parameter, I will add for index. The map method is basically a method that loops through the array, creates a new array based on calling a function on each element of the original array. The first parameter here is the elements of the array. In our example, letter here will be the letters inside our spans array. Here is the index of the element. For the first loop iteration, the letter here will be the letter J and I will be zero. Then for the second loop iteration, the letter will be the second letter a, and the index will be one. And so on and so forth. Then I will create the function of the map method inside it. I will say return. Then I'll open a template literal, add a span tag, then close the span tag inside it. We will add each letter. We will do that by adding $1 sign, then the letter inside curly braces. What will happen here, everyone is the map method will loop through the array of letters, add each letter inside a span, then return a new array out of that. Just like you see here, we have this big array and each element is a span tag with a letter inside it. All right, now to finish this, we want to extract all the elements of the array and convert them back to normal string in order to easily inject them into our HTML. And we can do that pretty easily by using the join method. I will go here and add join then, and empty strings as a separator. Now if you look at the spans variable in the console, you can see they are displayed as a string. And we can easily now insert them inside the HTML heading by going here and adding text innerHTML equals spans. Now everyone, when we inspect the H two, you can see it now has all of these spans. Each letter is wrapped inside a span. Now let's go to our CSS and select the spans inside the H two and add color. This lighter gray color, then transition 0.25 seconds. Then below that, I will say when hovering over the H two, I will target the span and add color, this light green color. Then in order to get the shining effect, I will add text shadow, this value. Now when I go and hover over the H two, you can see we have this nice glowing effect. Now we want to add some transition delay to the letters. Let's go back to Javascript. Go here inside the span and add style transition delay. Then we'll use template literals to insert some code. Then add I times 40, then milliseconds. We've used the index here to make the transition delay unique. For each span, it will be zero times 40 milliseconds for the first letter, one times 40, then two times 40, and so on and so forth. Now when we hover over the H two, you can see the letters shine one after the other. Let's also change the color of each letter using the filter CSS property. I will go here and add filter rotate I times 30 degrees. This will make each span have a different color. Just like you can see here. All the letters now have different cool colors. With that everyone, we have this really cool, shiny effect. 118. circular navigation menu using javascript: Hello everyone. Welcome to this new lesson in the course. In this lesson, we are going to create this circular menu toggle effect. You can see when I click on this toggle button, those six circular links appear. You can see they are placed around the toggle button, and when clicking again, they go back and hide behind the toggle button. We will use Java script to create this effect. I will start here in my HTML by adding a di and giving it a class of container. Then inside it I will add another div and give it a class of toggle. This will be the toggle button. Then inside it we want to add the toggle button icon. And we will get those icons from a website called Ion icons. In order to include the icons, I will go to usage and copy this code here. Then paste it in our HTML. Then in order to select the toggle icon, I will click on icons, Then select and copy this code here. Then go back and paste it here inside the toggle dif. Then below that we want to add the menu items. I will add a UL, then an L I. Inside it, we want to use CSS variables. Here, I will add style two and add one. This variable will be equal to one to this first list item. Then inside that, I will add an anchor tag inside it. We want to add the home icon. I will go back here and search for that. Then copy this code, paste it here again. Now you can see we have the toggle button and the home link. Okay everyone, I am going to pause the recording and add the other links, just like I've done with this one. As you can see, we have added six icons here and increase the variable 1-6 and they're all here. All right, let's go to our CSS and target the body. Then add min height, 100 VH Display flex, justify content center, align items, center background, linear gradient 45 degrees from this purple color to this red color. Then below that, I will target the container div. Add width 270 pixels, height 270 pixels. Then display flex, justify content center, align items, center position relative, and a temporary red background. Now you can see we have the tago icon and the other links sitting next to each other. Okay, let's work on the toggle button. I will target it. Add width 70 pixels, height 70 pixels. Then background white border radius 50% color this dark gray color. Then to center the icon inside the circle, I will add display Flex, Justify content center, align items center, then font size 30 pixels. Cursor pointer z index 20. Then finally transition 0.3 seconds. Now let's work on the click effect. When clicking on the toggle button, we want it to rotate to be an x sign, not a plus sign. When clicking on this button, we want to add a class on the container div and style the toggle button. Based on this class, I will go to the Javascript file and start by selecting the container div. I will say let container equal document query selector and select the container. Then below that, I will quickly target the toggle div. Then I'll go here and say toggle Add Event listener. The event we want to listen to is click. Then I'll add our function. Inside that, I will add container class list, toggle, and add a class named active. That's it for the Java script, everyone. Basically, when we click on the toggle button, a class named active is added to the container. Let's try that. You can see when I click on the toggle button, this active class is added here. When clicking again, it's removed. Okay, let's go back to our CSS and select the container Div. Then when the container has a class of active, we will target the toggle class and add transform rotate 45 degrees. Now you can see when I click on the toggle button, it rotates by 45 degrees and becomes an x sign. When clicking again, it returns due to the removal of the active class. Okay, let's keep it going. Let's work on the UL that contains all the list items. It has a class of menu. I will target that and add position absolute top zero, left zero, then width 100% height 100% Then I'll target the L I inside the menu and add position absolute top 00, width 100% height 100% Then finally pointer events. Now you can see all the list items are positioned in the top left corner. Below that, let's target the anchor tag inside the list item. Inside that, I will add width 55 pixels, height 55 pixels. Color this dark gray color background, white border radius 50% font size 22 pixels. Then I'll add display flex justify content center, a line items center. Then in order to position the links below the Toggle button, I will add position absolute top 50% left 50% Transform translate negative 50% and negative 50% You can see the links are now hidden behind the toggle button. I will also add pointer events visible, then transition 0.3 seconds. When clicking on the toggle button, we want the buttons to appear again. I will select the container when the container has an active class. Meaning when we click on the button, I will select the anchor tags and add to zero. Now when clicking on the toggle button, you can see the links move to the top. When clicking again, they move back and hide behind the toggle button. Now the only thing left is to make the links rotate around the toggle button. I will go here inside the list items and add transform rotate. Since we have six list items, I will add calc 360 degrees by six times v, which is the variable we added to our HTML. The first LI will be rotated by 360 degrees divided by six times one, which is 60. The second one will be rotated by 120 degrees, and so on and so forth until the last one will be rotated by 360 degrees. Now you can see when we click on the toggle button, we have the six icons spread around the toggle button. But as you can see, the icons are rotated in order to reverse them. We can go here and add transform, translate negative 50% and negative 50% then rotate negative 360 degrees divided by six times the variable I. This will reverse all the rotated links back to zero degrees. Now you can see when clicking the button, you can see the links are now looking exactly the way we want, but we just need to remove the red background. That's it everyone, for this lesson. I hope you enjoyed it and I will see you in the next one. 119. website parallax effect with javascript: Hello everyone, Welcome to this new lesson in the course. In this lesson, we are going to create a cool parallax website effect. You can see we have this header that has a logo and a navigation bar. We also have this background image and this heading which says parallax website. We also have some dummy content here below the header. As you can see, just a heading and a paragraph. But take a closer look, when we scroll down, you can see we have this cool parallax effect in which the heading here moves to the bottom while scrolling. Also, this tree leaf here at the top right corner moves to the top right. As this hill here moves to the bottom, these two hills move in different directions, one to the right and the other to the left, giving us this really cool effect. Let's start here in our HTML by adding a header inside it, we will add an H two and say logo. Then below that, I will add a nav element and give it a class of navigation. Then inside it, we will add the links. I will add an anchor tag and say home. Then I'll quickly add the other anchor tags. As you can see, we have the logo and the navigation bar. All right, let's go to our CSS and select the body and add background, this light gray color, then min height, 100 VH. Then below that, I will target the header and add position absolute top zero, left zero with 100% then padding 30 pixels from top and bottom and 100 pixels from left and right. Then I'll add display flex. Then we want the logo and the navigation bar to be on the left side. I will add Justify Content Flex. Start Align Items Center to make sure the header will be visible. No matter what elements we add, I will add z index 100. Now you can see we have the logo and the navigation bar on the left. I will go back and target the logo. Then I'll add font size two, M color, this green color. Then in order to have some spacing between the logo and the navigation menu, I will add margin, right, 270 pixels, just like you see here. All right, let's work on the navigation menu. I will target the anchor tags inside the navigation and add text decorations, non color, this green color padding, six pixels from top and bottom and 15 pixels from left and right. Then I'll add border radius 20 pixels margin, zero from top and bottom, and ten pixels from left and right. Then font weight 600, finally transition 0.5 seconds. Now you can see the links look much better. I will go here and say when hovering over those links, I will add background, our green color and color white. Now you can see the links have this nice hovering effect. Okay, now let's work on the images that we will use to create the parallax effect. You can see here we have seven images that when put together, will give us our full background. We have five images for the hills and an image for the leaf, and another one for the plant. Of course, you will find all of these images attached in the resources file. I will go here in my HTML and add a new section, give it a class of parallax. Then inside it, I will add an image, then add the first image which is hill one. I will also give it an ID of hill one in order to target it in the Javascript file. Then I'll quickly add all the other images. Now you can see we have added eight images, All of the images of our background and you see them here in the browser. I will also add an H two, give it an ID of text and say parallax website. All right, now I will go back to my CSS and target the parallax div that contains all the images and add position relative display flex. Then justify content center, Align items center as well. Height 100 VH. Now you can see all the images are added one next to the other. Let's continue working. I will go back and add overflow hidden in order to get the exact shape we want. We will select the images inside the parallax div and add position absolute. Then top zero, left, zero width 100% Finally, pointer events, none. Now you can see we have this background. That is just all of our images put together together, They form this background. The reason this is happening so perfectly is because all of these images are designed for this purpose. It's like this is just one view that was split into multiple images. Okay, let's work on the two that had an ID of text. I will target it and add position. Absolute font size five, EM color white. Then text shadow this value. Now you can see the H two is looking exactly the way we want. Okay, let's add some content. In order to have a scrolling bar, I will go to my HTML and add a new section with a class of content. Then inside it I will add an H two and say parallax scrolling website. Then below that I will add a paragraph and add some dummy text. Now you can see we have this content. Let's quickly add some styles here. I will go back to my CSS, Target the content, then add position relative background, this green color padding 100 pixels. Then I'll target the H two inside it and add font size three, E, M color white margin bottom ten pixels. Then I'll select the paragraph and add font size one M color white font weight 300. Now you can see the content div is looking much better. You may have noticed that we have chosen this dark green color to match the bottom of our background here, they are very close to each other. Amazing. Now that we have finished the HTML and CSS of this example, it's time to work on the Java script. I will go to the Java Script file, then I'll start by selecting the elements that we want to animate or change. I will say let text document, get element by ID. I will select the element with the ID of text, which is the two. Then I'll quickly select the other elements that we will use in our Javascript file. You can see we have selected four other elements, belief image and three images of the hills. Okay, let's work on the effect. I will go here and say window, add event listener scroll. Then I'll create a callback function. Basically, this code means that whatever code we will add here inside this callback function will be executed whenever we scroll the page. All right, inside the function, I will create a new variable named value and set its value to window scroll. This will be the vertical distance that the page has scrolled. If we go back to the browser and scroll a little, it will be this distance here. All right, then let's work on elements to change their position using variable value here. Let's work first in the H two that has the ID of text, I will say text style margin top. That will be equal to. We will use template literals here. By adding these two symbols, we will add dollar sign and open curley braces to add an executable code inside that. Then I'll say value times 2.5 Then outside the curly braces, I will add pixels. What will happen here everyone is each time we scroll the page, Javascript will grab the value of the scrolling y, then it will multiply it by 2.5 The result will be set as a top margin for the H two. Whenever we scroll down the margin, top value will increase, making the H two move to the bottom. Let's try that really quick. You can see when I scroll down, the H two moves to the bottom. When scrolling up, it will move to the top again. All right, let's work on the leaf here. We want it to move to the top right corner outside the page when scrolling down. So I will say leaf style top equal to, I will use template literals as well and multiply value by negative 1.5 This time this will set top to a negative value, making the leaf move to the top. For instance, if I go to my browser, you can see when scrolling, the leaf moves to the top. All right, let's go back and move it to the right as well. I will duplicate this code, then change top to left, and just change negative 1.5 to 1.5 Just like that. When I scroll down the page, it moves to the top right. Now, not only the top. I think you've got the idea. I will quickly add the other code for the remaining images. As you can see, I basically did the same thing for the Three Hills images. I just changed their position. I changed the position of this one to the right since I added a positive left value. As for this one, it will move to the left since it has a negative left value. For the last one here, it will move to the bottom since it has a positive top value. As you can see here everyone, when I scroll down the elements we selected, move and change their position. We have these two hills in the center that separate from each other, while this hill here moves to the bottom everyone. That's it for the parallax effect. You can see the idea behind it is very simple. I hope you enjoyed it and I will see you in the next lesson. 120. expandable card design using javascript: Hello everyone. Welcome to this new lesson in the course. In this lesson, we're going to create this animated profile card. You can see we have this card, and when we click on this toggle button, you can see the card expands and this image appears. Also, notice the toggle button rotates from pointing down to pointing up when we click on it. Let's see how we can create this card. I will go here in my HTML by adding a div with a class of card. Then I'll go to my CSS and select the card div. Then add position relative width, 350 pixels, height 85 pixels background. This navy color border radius 20 pixels. Finally transition 0.5 seconds. Now you can see we had this navy background. Let's go back to our HTML. We want to create the toggle button. At the bottom, I will add a, give it a class of toggle. Then inside it I will add a span. Then I'll go back and target the toggle div. This will be the part at the bottom. I will add position, absolute width 70 pixels, height 60 pixels, background white. Then to position it at the bottom, I will add bottom negative 60 pixels. The left 50% transform translate x negative 50% Then I'll add border bottom left radius 35 pixels and border bottom right radius 35 pixels as well. Then finally cursor pointer. Now you can see we have this white part at the bottom. But if we take a look at our example, you can see the curve here is smoother. Let's go back and create that. We will use the before pseudo element. To do that, I will select the before pseudo element of the toggle div and add content empty strings position absolute width 35 pixels, height 35 pixels. Then background a temporary red background. Then I'll add left negative 34 pixels, then border top right radius 35 pixels. Then below that I will add box shadow 11 pixels as a horizontal offset. Then negative ten pixels as a vertical offset, zero as a blur value, and ten pixels as a spread value, then a green color. Now you can see we have this green color that we added using the box shadow property. All right, I will go here and change the red color to transparent. Then we want to create the same part on the right side. I will copy that code block, paste it and change left here to right. Then change border to left. Also change the horizontal offset here to negative 11 pixels. Now you can see we have it here on the right. Then I'll go here inside the toggle dive and change the background color from white to the dark Navy color. Also change the color of the box shadow to Navy instead of green. Now you can see we have this Navy part at the bottom. Okay, now let's create the arrow that will be positioned in this Navy part. We will create it using the span inside the toggle dip. We will select that add position, absolute width ten pixels, height ten pixels. Then border bottom three pixels, solid white. Then we will add border right as well. Then to center it, we will add top 50% left, 50% Then transform translate negative 50% negative 70% Then in order to rotate it, we will add rotate 45 degrees. Then I will add transition 0.5 seconds. All right, now when clicking on this toggle button, we want this span to rotate and point towards the top. We will do that using Javascript. I will go to the Javascript file and start by targeting the card. I will create a new variable, name it, and select the card. I will also target the toggle div. Then below that, when clicking on the toggle div, we want to add a class to the card div, then style the span based on that class. Then when clicking again, we want to remove this class. Basically, we will toggle a class when clicking on the toggle button. I will go here and say toggle, Add event listener, and listen to the click event. Then we will create a callback function and say card list toggle, and name the class active. Now when inspecting the card div, when clicking on the toggle dive, you can see an active class is added to the card div. When clicking again, it's removed. All right, now when clicking on the toggle button, we want to rotate the arrow. I will go to my CSS and target the card. When the card has an active class, we will select the span inside the toggle div. Inside it we will add transform, translate negative 50% and negative 70% then rotate and change the rotate degree to 225 degrees. Now you can see the arrow rotates when clicking on the toggle button. Okay, let's keep going. I will go here and target the card when the card has an active class, I will add height, 420 pixels. Now when clicking on the toggle button, you can see the card expands and its height increases. When clicking again, it shrinks. Let's go to our HTML inside the car, I will add another div with a class of content inside it. We will add another div with a class of content box. Inside that, I will add an H two and say Paul Smith. Then add a BR tag, then a span, say Creative developer. Then I will go back to my CSS and target the content div. Then add position, absolute inset, overflow hidden. Then below that, I will target the content box div and add position relative padding, 20 pixels, text align center, z index ten, display flex, justify content center a line items center. Then below that, I will target the two. Then add color, white font weight 500, font size 1.25 M. Text transform uppercase letter spacing 0.05 M, then line height 1.1 M. Then below that, I will target the span inside the H two and add font size 0.75 M, font weight 400. Then text transform capitalize. Now you can see the text here is looking so much better. All right, let's go back to our HTML. And below the H two, I will add a new, give it a class of image box, then go back to our CSS and target the image box. Then add position relative width, 250 pixels height. 250 pixels background white. Then in order to position the content vertically, I will go up here inside the content box div and add flex direction column. Then I'll go here and add margin top 20 pixels. Then box shadow negative ten pixels, ten pixels, ten pixels. Then this color then finally border five pixels, solid white. Then I'll remove this background. Then let's go back to our HTML and inside the image box div, I will add an image and add our image. Then I'll go back to our CSS and target this image. Then add position, add solute, top zero left zero width 100% height 100% Then object fit cover. Now you can see the image here is looking exactly the way we want. Finally, let's add the button at the bottom. I will go back to our HTML and add a button, then say hire me. Then I'll go back to our CSS and target the button. Then add position relative margin, top 20 pixels, padding ten pixels and 35 pixels. Then border radius 25 pixels, n outline non cursor pointer, font size one M. Text transform, upper case letter spacing, 0.1 M, font weight 500 color gray color. Then we'll add this box shadow here. Now everyone you can see we have this button. And by doing that, we have created this cool design. I hope you like this lesson and I will see you in the next one. 121. clip path animation effect using javascript: Hello there everyone. We've got another new lesson for you in the course. In this lesson, we will create this cool clip path animation effect. You can see we have this big heading in the center of the page and these two circles at the top left and bottom right corners. When we scroll the page, those two circles get bigger until they cover up the heading. The cool thing is the parts of the heading covered by the circles have this nice stroke around them. As we scroll to the top, the heading becomes white. Again, we will use Java script to change the clip path value on scrolling. Let's start creating this effect. I will go here in my HTML and add a section. Then inside it I will add our H two and say scroll. Then below it I will add a div with a class of circle one, another div with a class of circle two. Then I'll go to my CSS and target the body and add in height 200 VH in order to have a scrolling bar, just like you see here. Then below that, I will target the section and add top zero left, zero width, 100% height, 100 H. Then background this dark gray color. Now you can see the section has a height of 100 VH. But when we scroll, you can see we scroll right by the section. But we want it to stay with us even when we scroll. We can do that by going to our CSS and adding position fixed. Now you can see no matter how much we scroll, the section stays right where we want it to be fixed in its position. I will go back to my CSS and target the two. Then add position absolute top 50% Then transform Translate negative 50% width 100% text, align center color white. Then finally font size 18 EM. Now you can see the H two looks much better. Okay, let's work on the circles. Now I will target the first div with the class of circle. Then add position absolute width, 100 height, 100% background. This green color. Now you can see we have this green background that is covering the whole body, since it has a width and a height of 100% Now we want to clip this green background so that the only part that's visible will be the circle in the top left corner. I will go back here and add clip path circle 150 pixels as a radius. Then at 0.00 at the x axis and zero at the y axis, which eventually will be the top left corner. Just like that, everyone you can see the visible part of the green background is this green circle. Okay, let's quickly do the same thing for the bottom right circle. I will copy that code, paste it and target the circle two div. Then just change the background color to this orange color. And also change the position of the clipped part to 100% and 100% so that it will appear in the bottom right corner. Now you can see we have this orange circle here in the bottom right corner. All right, now when scrolling through the page, we want those circles to get bigger. Let's go to our Java script file and do that. I will start by selecting the first circle. So I will say, let circle one equal document, get query selector. And I will target the first circle that has a class of circle one. Then I'll duplicate that and target the second circle this time. Then I will go here and say Window Add Event listener. Then I'll listen to the scroll event. Then I'll create a callback function inside it. I will create a new variable, name it, scroll value. And I will set that equal to window scroll Y. Basically, this value is the distance from the scroll bar to the top of the window. As we scroll down, this value increases. But when we scroll up, it decreases. It's a changeable value and we will use it to change the radius of the circles. When we scroll on the page, I will go here and say circle one style clip path equal. Then I'll create a new template literal to add the value of the clip path. Then I will add circle. Then open a code block. And 150 plus the variable scroll value times 0.75 pixels at 0.0 As you can see everyone, the clip path value of the first circle when scrolling the page will be 150 pixels, which is its initial value, plus the scroll value of the page multiplied by 0.75 As we know, the scroll value of the page increases as long as we scroll the page. That will lead to an overall increase in the radius value of the circle. Let's try that. As you can see, when we scroll down, it increases and when we scroll up it decreases. Cool. Really quick. Let's do the same for the orange circle. I will go back here and copy this code. Paste it and select the second circle. Then just change the position of the circle to be at the bottom right corner at 100% and 100% Now when I go back and scroll through the page, you can see that the orange circle gets bigger as well. Okay, Now we want to make the H two color transparent and have a stroke around the letters. I will go to my HTML and I will copy and paste the H two inside the two divs. Then I'll go back to my CSS and target the H two inside the first circle dive. Then I'll target the H two inside the second circle div. Inside that I will add color, transparent web text, five pixels, and this gray color. When I go back and scroll down, you can see once the circles intersect with the H two, the H two has this effect that is happening because we added this stroke around the H two inside the circles. The white H two in the center here is the one outside the two circles. 122. animation on scroll using javascript 1: Hey there everyone. Welcome to yet another new lesson in the course. In this course, we're going to create an animation on scroll effect using Javascript. You can see we have this web page that contains multiple sections. When scrolling through the page, you can see we have a heading and a paragraph in each section that is animated into the page. Once we reach the point of that section also when I pass the section, its content disappears again. Once I scroll up and pass, the content appears one more time. This is a very common way of animating elements on a website. Let's learn how we can do it. First of all, you can see here in our HTML that we have five sections. Each section has a unique class sec one, sec two, sec three, and so on until sec five. As you can see, the sections 1-4 have a very simple content, just an H two and a paragraph. And all of the headings and paragraphs in each section have a class of animate. Then here, in the fifth section, we have a div with a class of images. Inside it, we have three images. Each image has a class of animate, just like the paragraphs and the headings inside the other sections. Then in our CSS, we have some basic styles to make the page look better. We set the min height of each section to 100 VH so that it takes up the full height of the viewport. We also centered the content and added some basic styles such as some background colors and different colors for each section. You do have the resource files of this lesson. Download them and take a look at those styles. Okay, now let's get to work on the scroll effect. I will go to my Java script file. And first of all, let's target all of the sections. So I will create a variable name It sections. Then I'll set that equal to document query selector. All I will target the sections. Then below that I will say window scroll equal to I will create a new function. This function here will be executed whenever we scroll through the page. Inside that function, we want to loop through all the sections one by one and affect them using Javascript code. I will say sections. For each loop here I will sec. We will loop through the sections. Each section will be named sec. Then I'll create a callback function. Inside it, I will create a new variable named scroll distance Set that equal to window scroll y. This variable, everyone, is the distance scrolled. It's the distance from the top of the scroll bar to the top of the page. Then below that I will create a new variable, name it sec distance, and set it equal to secsettp. This offset top property is the distance from the sections outer border, the top edge of its parent, which is the body in this case. Let's take the second section here as our example. The offset top of the second section is the distance from the top edge of the second section to the top of the page. Actually, it's equal to the height of the first section. As for the third section, the offset top will be equal to the height of the first and second sections together. All right, let's continue. Let's go back to the browser. And what we want to do here everyone, is when scrolling through the page, once we reach a, for example, the second section right here, we want to add some styles to that section that will create the animation effect we want. And when we pass it, these styles will be removed. The same happens for the third section, just right here, and the fourth, and so on. We want to use the variables we created here to help the browser detect when we hit a specific class. It then adds the styles we want. Let's do that. I will go here and say if scroll distance is greater than or equal to sec distance, I will say sec class, list add. I will add a class named Show Animate. As you can see everyone, if the distance scrolled is equal to the distance from the section to the top of the page. This if statement will be executed, but let's go to the browser and see when this condition happens. The section distance is a fixed value, as we said for the second section, is equal to the height of the first section. It never changes unless we change the height of the first section. Meanwhile, the scroll distance is a changing value. It changes while we scroll the page at some point when those two values are exactly equal. This is where the if condition becomes true. That will happen when we scroll until the top edge of the second section touches the top edge of the browser. In this case, the scroll distance is equal to the distance from the section to the top of the page. Let's inspect the page. I want everyone to take a close look here at the second section. You can see once I hit the top of the second section, the if condition becomes true. And a new class named show animate is added to the second section. Once we reach the third section, the class is added to it as well. That happens to all of the sections as you can see. Okay, this is the main idea, everyone. We will use this class to style the sections. I will go back here in my CSS and target elements with the class of animate. Remember everyone, All of the headings, paragraphs, and images in our HTML have a class of animate. Basically, all of the elements have this class. Okay, let's go back to our CSS. And inside the animate div, I will add opacity zero. Filter blur, five pixels, then transition 0.5 seconds. Now you can see all the elements are hidden, since we added opacity zero to all of them. Now when we scroll to a section, we want to make them visible again. I will go back to my CSS and say when the section has a class of show animate. And as you know, this happens once we scroll to the section. I will target the animate div and add opacity one. Then filter blur zero pixels. Now when going back and scrolling through the page, you can see once we reach a section, the content fades in and is visible. Let's go to the top of the page and reload the page. You can see when we reload, the content of the first section is invisible. But we want it to show up when we reload. We don't want to wait until we scroll the page. We can do that by going to our HTML and adding a class of show animate to the first section here. Now when I go and reload the page, you can see that the content is visible. Now everyone, we can add some different effects to each section. Let's try that. I will go to my CSS and target the animate class inside the second section. Then add transform translate x 100% Then I'll quickly duplicate that. When the second section has a class of show animate, I will change the translate x back to zero. It returns to its position. Now when I go and scroll to the second section, you can see the content slides from right to left. Thanks to the translate property we changed. Okay, let's add more styles to the other sections. I will copy that code, paste it, and target the third section here. Here. Then I'll change the translate function to scale and add a value of 0.7 Then here I will add scale one back to one. Then I'll paste that again and target the fourth section. Then I'll set rotate here to 30 degrees, then here back to zero degrees. Then I'll paste the code again and target the fifth section that contains the images. Leave translate x as 100% here. Then add rotate negative 90 degrees. Then set it back to zero degrees here. Now when I go back and reload and scroll through the page, you can see when we reach a new section, the elements show up smoothly, giving us this really cool effect. Now this effect is subtle and you can use it this way. But in the next lesson, we will see some more simple tricks that we can add to make this effect even more dynamic. But for now, I want you to play around and try different animation effects on the elements. Try all the different effects that we've learned throughout this course. Have fun. 123. animation on scroll using javascript 2: In the last lesson, we created this animation on scroll effect. You can see the content appears nicely while scrolling down. But as you can see when we scroll up, the content isn't animated. It has the animation effects only one time. If we inspect the page, you can see when scrolling through the page, the show animate class is added. And once it's added, it's not removed. Let's try something in our Java script. I will go here and say else, then I'll copy that, paste it, and remove the class. This time what this will do is when the distance scrolled is less than the section distance, the class will be removed. That happens when we scroll to the top and pass the top part of the section. Let's go to the browser and see that I will inspect the page. And when I scroll down, you can see the class is added. And when scrolling to the top, you can see the class is removed, the elements are removed from the page. Now this is a much cooler effect. Okay, let's try something else. Let's just add some transition delay to the paragraphs so that they appear slightly after the headings. I will go to my CSS and select the paragraph that has a class of animate, which is basically all of the paragraphs in the page. Then I'll add transition delay 0.2 seconds. Now you can see when we scroll through the page, the paragraphs show up slightly after the headings. Let's also add some transition delay to the images so that they appear one after the other. I will go to my CSS and target the second image inside the fifth section. Then add transition delay 0.2 seconds. Then duplicate this code and change the transition delay to 0.4 seconds. Now when I go back and scroll through the fifth section, you can see the images appear one after the other, giving us the effect we want. But if you noticed the elements don't appear until we reach the top of the section, it will be much better if we can make them appear a little bit earlier so that we don't have to scroll all the way to the top edge of the section. We can do that by adding the class. Before we reach the top edge of the section, I will go to my Javascript. Go here and say when the scroll distance is greater than or equal to the section distance -150 the Cs will be added, the class will be added 150 pixels above the section top edge. Just like that everyone you can see the elements appear a little bit earlier. And with that, we have finished this example. I hope you liked it and I advise you to try and implement what you have learned in this example and use it to create your own ideas. 124. night mode road animation using javascript: Hey there everyone. Welcome to this new lesson in the course. In this lesson, we're going to create this interesting road animation. You can see we have this scene that contains a background, a sun, and two cars that are moving against each other. The background is also moving, giving us this realistic feel. If we click on the sun, you can see it turns into a moon and the scene becomes dark. This is basically a dark mode, and we'll implement that using Javascript. I think this is a really cool example, and I hope you'll like it. Let's start here in our HTML by adding a section, giving it a class of scene. Then inside it, I will add another div, the class of sun. Below that, I will add another one with a class of BG. Inside it, we will add the car images. I will add the first image and give it a class of car one. Then below that I will add the second image and give it a class of car two. You will find these images in the resources files for this lesson. Now you can see we just have these two police car images sitting in our body. All right, let's go to our CSS and target the scene section. I will add position relative height, 100 VH overflow hidden the linear gradient. Then I will add this light blue color. Then I'll add white and white. Now you can see we have this nice gradient from a light blue color at the top all the way to white at the bottom, giving us a scene close to the sky. All right, let's work on creating the Sun. I will target the Div with the class of sun. Add position, absolute width 100 pixels, height 100 pixels background, white border radius 50% Then top 100 pixels left, 55% Now you can see we have this white circle here sitting at the top of our body. Let's go here and add transform, translate x negative 50% in order to shift it to the left a little. Then box shadow 0050 pixels as blur value and white as its color. Then transition 0.2 seconds. Finally, cursor pointer. Now the sun gets this blurry shadow. Let's work on the background div. I will target the div with the class of B, G and add position, absolute width, 100% of the scene div. Then height only 280 pixels. And to position it at the bottom, I will add bottom zero. Then I'll add background URL. And I will add this background image that you can see here. You will find it in the resources for this lesson, you can see we have this background here at the bottom with a height of 280 pixels. Let's go back and add background size 1,500 pixels. Then background repeat, repeat. Now you can see the background image looks much better. Okay, let's animate it. I will create a new animation. Name it, animate BG inside it. At 0% I will add background position x zero pixels. Then at 100% I will change the background position x value to negative 1,500 pixels. So that the image would move to the left. Then I'll go up here inside the BG div and add animation animate G 25 seconds linear, infinite. Now you can see the position of the background along the horizontal line changes, giving us this feeling that the image is moving. All right, now let's work on styling the images of the car. I will target the first car and add 20 pixels to shift it a little to the top max width 200 pixels, then z index one. Now you can see the first car is now smaller and positioned in the bottom left corner of the road. I will add some styles to the second car as well. I will select it, add position, absolute bottom. 50 pixels to shift it a little above the first car. Then max width 200 pixels as well. Now you can see the second image is also sitting right here in the bottom corner of the road. All right, let's go back and change their positions. We want the first car to appear from the left side of the road. I will go back here and add negative 200 pixels. We want the second image to appear from the right side. I will add right negative 200 pixels. Now you can see the two cars aren't visible anymore since the first one moved to the left outside of the road, and the second one moved to the right outside of the road. Now let's create the animation that will make them move on the road. I will create a new animation, name it car one. Then at 0% of the animation duration, I will add transform translate x zero pixels. Then at 90% and 100% I will add translate x calc 100 V plus 200 pixels. The first car will move from the left all the way to the right until it crosses the road and goes outside of the road. I will go up here inside the first car and add animation car one, 18 seconds linear, infinite. Now you can see the first car is coming from the left, outside of the road, moves along the way until it crosses the road. Let's quickly do the same for the second car. I will copy that animation, paste it and change the animation name to car two. Then I will leave the translate value as it is, but I will add rotate y 180 degrees so that the image will be rotated by 180 degrees along its y axis. In other words, it will be flipped vertically. Then here I will change the translate x value to negative 100 VW -200 pixels. It will move from the right side all the way along the road to the left side, then cross the left side as well. I will go here inside the second car and add animation. Car two, 12 seconds linear, infinite. Now you can see the second car is coming from the right side and moving all the way to the left side. And both of the cars meet in the middle of the road, giving us this really cool effect. Now it's time to work on changing the scene to night mode. When clicking on the sun dive, we will tog below class that will create the night mode. I will go to the Javascript file, create a new variable, name it Sun, and add document query selector. And select the div with the class of Sun. Then I'll duplicate that and target the scene section. Below that I will say Sun Add Event listener. I will listen to the click event. Then I'll add a callback function that will be executed whenever we click on the Sun. Then inside that I will say Sun class List Toggle. And I will add a class named Night. Now if I inspect the page and start clicking on the Sun, you can see the night class is added and removed each time we click on the Sun div. All right, now let's go to our CSS and start changing the styles of the page based on this class. I will go here and target the scene section. Then when the scene section has a class of night inside that I will add background, this dark navy color. Now when I go back and click on the Sun, you can see the background color changes to this Navy color. All right, let's go back and duplicate the selector target, the sun. Then add left 45% instead of 55% it moves a little to the left. Then we want to remove the box shadow it has. So I will set all of its values to zero. Now you can see when clicking on the Sun, it moves to the left and the shadow at the bottom is removed. All right, now we want to convert it to a Moon shape. I will duplicate this selector one more time. Then target the before pseudo element of the sun div and add content empty strings position absolute top negative 20 pixels to shift it a little to the top, then left 20 pixels to shift it to the left. Then I'll add with 100% height, 100% the background, a temporary red background. Then finally border radius 50% Now when I go back and click on the Sun, you see we have this red circle that covers up a big part of the sun. If we change the color of this red circle to the same color as the background, we will get the moon shape. I will go back and quickly do that. And now when clicking on the sun dive, you can see everyone. It turns into a moon shape and the whole scene turns into a night scene, giving us the exact effect we want. 125. website animated banner using javascript: Hello everyone, welcome to yet another new lesson in our course. In this lesson, we're going to create this effect. You can see we have some big text that is floating on the page inside this circle that surrounds it. In the background, we have this huge number of stars that are shining and moving slowly, giving us this really cool effect. We will create those stars automatically using Javascript. Let's start inside my HTML. I will add a section, then inside it I will add an H two and say welcome to our. Then I'll add a BR tag, then a span and say. Then I'll go to my CSS, Target the section and add Display, Flex, Justify, Content Center, Align items, center height, 100 VH background, this navy color. Then in order to create the circle around the text, we will use the B four pseudo element of this section. I will select that and add content empty strings, position absolute with 30 VW height, 30 V as well. Then border five, B solid. This orange color. Then border radius 50% Now you can see we have this orange circle in the center. Let's add the white ring around it. I will add box shadow 0001v as a spread property, then the same navy color as the background. Then I'll duplicate that and change the spread to 1.3 V, then change the color to white. And now you can see we have this white ring surrounding the orange circle. Okay, let's add some styles to the heading. Now I will select it and add position absolute font size eight, color white font weight 400. Then text a line center, line height two, E M, z index five, transform skew y negative seven degrees. Now you can see we have the text centered and skewed a little on the y axis. Then in order to have the text shape we want, we will need to add some text shadow. So I will add text shadow. This value, if we look at this value, it's just gradually increasing values of text shadow from one pixel to five pixels with this light gray color. And as you can see, it looks much better. All right, let's style the span, which is the word site. I will target it, then add font weight 700 to make it bolder. Then font size three, M. Finally text shadow, this value that contains an increase in the shadow value broken up into ten increments from one pixel to ten pixels. That's ten increases. Now you can see the H two is looking exactly the way we want. Now it's time to create the floating animation of the H two. I will create a new animation. It floating inside it at 0% and 100% I will add transform skew negative seven degrees as it is. Then translate y negative 20 pixels, I will duplicate that. And at 50% I will change translate to 20 pixels. Then I'll go up here and add animation floating 5 seconds, ease out infinite. Now you can see the text is animated from top to bottom and moving exactly the way we want. All right, now it's time to create the stars in the background. We will do that using Javascript. I will go there and first of all, I will target the section by saying let section equal document query selector section. Then below that I will create a new variable named J and we'll set it equal to zero. Then I'll create a while loop and say while j is less than 200. Inside the loop, we will create the stars. I will start by creating a new variable named star, and I will say document. Create element, We just created an tag. Then we'll create some variables that we will use later. To style the stars, I will create a variable named x and set it equal to math floor math dot random times window width. Window in width here returns the interior width of the window in pixels. Then we take this value and multiply it by the result of math random method. Which returns a number greater than or equal to zero, less than one. Then we take the result of that and round it down to an integer. Using the floor method, we will use whatever value we get from here In order to position the stars. I will say star style left equal to x pixels. We will use the value x to position the stars on the left. Then I'll duplicate those two lines of code. Change the variable name to y, then change the window in width to inner height in order to get a value based on the height of the window. Then here I will change left to top and x to y. Then let's create the width and height of the stars. I will create a new variable, name it size and set equal to math dot random times four. Then we will use that size to set the width and height of the stars. I will say star dot style, dot width, one plus size pixels. Notice that we must add one here because the size value can actually be zero. Since math random here can return a 0.0 times four is zero. The size in this case will be zero and the width will be zero. That's not good. To avoid this situation, we need to add one here. Cool, I will duplicate that and change the width to height. Now that we've set the positioning and the dimensions of the stars, let's append them to our section. I will go here and say section append child. And we'll append the star element. Then at the end of the loop, we will say J plus, so that the loop will continue to create elements until j here is equal to 200, which in turn will create 200 elements. Now if we go and inspect our page and target the section, you can see inside it, we have all of these eye tags that we created. There are actually 200 of them and they all have random styles as you can see. All right, in order to see them on the page, let's go to our CSS and start styling them. I will select the eye tags inside the section and add position. Absolute background, white border radius 50% Now you can see the stars are visible now. All right, let's use the box shadow property to make them glow. I will add box shadow, then add this value in which the blur value increases gradually. Now you can see the stars are glowing. All right, now let's work on the animation effect of the stars. I will create a new animation name it stars. Then inside it, at 0% of the animation duration, I will add opacity zero. Then at 10% I will add opacity one. Then I will duplicate that. At 90% I will leave the opacity as it is. Then at 100% I will change it back to zero. Then I'll go up here and add animation stars. Linear, infinite. As you can see, nothing happened because we didn't set an animation duration. Let's do that using Javascript to get random values for each star. I will go here inside the Javascript file and create a new variable, name it duration. And we'll set it equal to math random times two. Then below that, I will add star style animation duration equal to duration one seconds. Just like that everyone you can see the stars are now animated, since we set a random animation duration for every single one of them here. 126. javascript tab navigation animation: Hey there everyone. Welcome to this new lesson in the course. In this lesson, we are going to create this simple navigation tab. You can see we have this circle that has this plus sign inside it. When clicking on it, it rotates until the plus sign becomes an x sign. Also, this simple horizontal navigation appears. Notice that the navigation appears in two steps. First, this circular part moves down below the circle. Then it expands and turns into the navigation menu. When clicking again, the menu collapses first. Then the circular part moves to the top and disappears. Also, we have this space here that separates the circle and the navigation. We will learn how to create that. This probably looks like a simple example, but believe me, it has some really cool tricks. Let's start creating it. I will go here in my HTML and add a, give it a class of navigation. Then inside it I will add another div with a class of toggle. Then I'll go to my CSS and target the navigation div. Then I'll just add position relative. Then below that I will target the toggle class and add position relative width, 75 pixels. 75 pixels as well. Background this pink color. Then cursor pointer, then let's create the plus icon inside using the before pseudo element. I will target it and add content. The plus sign then position absolute font size three, EM color white. Then transition 1.5 seconds. Now you can see we had this plus sign. All right, to center it, I will go here inside the tundlative and add display, Flex, justify, content center, a line, items center, just like that. You can see it's centered. Now when clicking on this div, we want it to rotate until the plus sign becomes an x as always. We will do that by toggling a class when clicking on the toggle and style it based on that class. I will go to my Java script file and create a new variable, name it toggle. Then I will quickly target the div with the class of togle. Then below that I will say toggle add event listener. Then I'll create a callback function Inside it, I will say toggle class list, Toggle and a class named Active. Now each time I click on the toggle div, here you can see a class named active is added and then removed from the toggle dive. All right, then I'll go back to my CSS target, the Toggle Div. When it contains a class named active, I will select the B fore pseudo element, which is the plus sign. I will add transform rotate 225 degrees. Now when I go and click on the toggle di, you can see the plus sign rotates and becomes an x since the active class is now added. Then when clicking again, the active class is removed and hence the code here isn't working. That's why the x rotates back to a plus sign again. Okay, let's work on the menu that appears when clicking on the toggle dive. I will go to my HTML and below the toggle div, I will add another div with a class of menu. Now we have two divs inside the navigation div. Then I'll go to my CSS and select the menu div. Then add width 60 pixels. Height 60 pixels as well. Then background white. Now you can see we have this white background. Now I will go up here inside the navigation div and add display Flex, Justify Content Center, Align Items Center. Now you can see they are sitting right next to each other. We want to position the white background relative to the piquin. Since the pinkue has a position value of relative, I will go here inside the menu and add position absolute. And as you can see, it's now positioned relative to the pink background. Okay, I will also add border radius 50% Then I'll add transform translate y negative 30 pixels to shift it to the top. Then I'll go up here inside the toggle, dive and add border radius 70 pixels. Then transform translate Y negative 30 pixels as well. In order to make the pink circle appear on top of the white one, I will add z index ten. Okay. Now when clicking on the toggle dive, we want to show the menu again. I will go here and target the toggle div when it has an active class. I will select the menu dive using this selector which selects the siblings of the HTML elements. Then inside that I will add width 360 pixels, 70 pixels. Then transform translate Y zero so that it returns to its position. Now when I click on the toggle div, you can see the menu appears here with this new width and height. Okay, we want the menu to appear smoothly. I will go back here inside the menu div and add transition transform 0.5 seconds. With 0.5 seconds then height 0.5 seconds as well. You might be wondering why didn't we just use 0.5 seconds for all of the properties. But we did what we did instead to make it easy for us to control the transition delay of each property to help us create our effect. To understand that, I will go here and add transition delay 0 seconds for the transform property. This line here will occur immediately when clicking on the toggle di. Then 0.5 seconds for the width property and 0.5 seconds for the height as well. Now when I go and click on the tangle dive, you can see the circle moves to the bottom first. Then its width and height get bigger at the same time, giving us the effect we want. But when clicking again, it all collapses at the same time. We can leave it as it is, or we can add some transition delays to make it nicer. Let's try that. I will go here inside the menu div and add transition delay 1 second for the transform, then 0.5 seconds for the width and height. When the class active is removed, this transition delay property will be applied. The width and height will wait 0.5 seconds before shrinking, then the transform will occur after that, just like you can see here. Now we want to create the part that separates the Toggle dive and the menu. I will go up here inside the Toggle dive and add border ten pixels solid and the same color as the body. Now you can see the two parts are separated using this border. All right, now let's add the icons that should appear in the menu. I will go to the Ion icons website that we used in an earlier lesson, then click on Usage. Come here and copy this code. Then paste it in my HTML before the end of the body tag. Then inside the menu div, I will add a U, L, then an L I inside it, and add style I equal to 0.1 seconds. We will use this variable in the transition delay property, then I'll add an anchor tag. Then I'll duplicate that five times. I will make the third LI one. We'll only need it for styling purposes. I will also change the variable to 0.2 seconds in the second LI and in the fourth LI as well. Then I'll go to the icons website and search for home, copy its code. Go back and paste it here inside the first anchor tag. Then I'll pause the recording and quickly add the other icons. Now you can see we've added the other icons and they are here in the browser. All right, let's go to our CSS and select the UL inside the menu. Add position, relative display, flex, justify content center a line items center then gap 35 pixels. Finally, line height 80 pixels. Then below that I will select the L I inside the UL and add list style non cursor pointer transform translate Y negative 30 pixels. Then I'll add transition 0.25 seconds, then opacity zero and finally transition delay var I. Then below that I will say when the toggle div has a class of active or in other words, when we click the toggle div, I will select them in, then select the list items. Then inside that I will add opacity one transform, translate Y zero pixels. As you can see, when clicking on the toggle div, the icons appear here, but we want them to appear only after the menu shows up. I will go back here and add transition delay, calc 0.75 seconds plus the variable. It will be delayed a bit, just like you see here. Okay, let's style those icons really quick. First, we want to add some spacing here in the center. I will select the third child of the list items that we made empty. Then I'll add width 30 pixels. Then below that I will target the anchor tags inside the LI and add display block font size 1.7 EM, text decoration n, and finally color this gray color below that. When hovering over the LI, I will select the anchor tag and add color our pink color. Now you can see the icons are looking much better and when hovering over its color changes to pink. With that, everyone, we have finished this cool effect. I hope you learn some cool tips from this, and I will see you in the next one. 127. moving a background image on scroll using javascript: Hey there everyone. Welcome to this new lesson in the course. In this lesson, we are going to create this effect. You can see we have this content in the center and this background. When we scroll the page, you can see the background moves from left to right. When scrolling up, it moves back from right to left. This is a very cool effect that you can use in your projects. Let's see how we can do it. I will start here in my HTML and add a div. Give it a class of BG. Then below that, I will add another div with a class of content. Then inside it I will add an H two, say Background, moving on scroll. Then below that, I will add a paragraph and add this text. Then I will go to my CSS and target the Div with the class of BG. Then add position fixed, then top zero left, zero width, 100% height, 100% background URL. Then we will add the pattern image. Then I'll add back round repeat. Repeat the background size, 700 pixels. Now you can see the background image is looking exactly how we want it to. Then I'll target the div with the class of content and add position relative width 1,000 pixels. Then margin 100 pixels from top and bottom, and auto from left and right. Then I'll add z index one, background white padding, 50 pixels. Then box shadow 010 pixels, 30 pixels, R Gb00 00.1 All right, Then I'll target the H two inside the content div and add font size two M, then margin top 20 pixels. Then I'll target the paragraphs inside the content div and add font size 1.2 M, line height 1.6 M. All right, let's go to the Javascript file and start by creating a new variable, name it pattern and target the BG div inside our HTML. Then below that I will say window. Do add event listener. And I will listen to the scroll event. Then I'll create a callback function. Inside that, I will say pattern style background position and set that equal to window scroll y pixels. What that will do is when we scroll the page, the background position property will increase by a value equal to the scroll y distance. Let's go and try that. You can see when scrolling through the page, the background image is moving while we scroll, and when we scroll up it moves in the reverse direction. 128. blur & focus text hover effect: Hi there everyone. Welcome to another new lesson in the course. In this lesson, we are going to create this nice effect. You can see we have this heading in the center and a blurry background in the back. When hovering over the heading, this effect happens. The heading becomes bigger and gets blurry, while the background moves back and becomes clear. When we hover away, the heading comes into focus again while the background returns to its blurry state. This is a really cool and actually simple effect. Let's see how we can create it. I will go here in my HTML and add a section. Then inside it I will add an H two and say focus. Then below that I will add an image. Just add our image. That's it for the HTML. Let's go to our CSS and target the section, the add position, relative width, 100% height, 100 VH to take up the full height of the body. Then display Flex, justify, content Center, Align items. Then finally overflow hidden. Then I'll target the image and add position, absolute width 140% height 140% the top negative 20% and left negative 20% as well. Then in order to have this blurry effect on the image, we will add filter blur, ten pixels. Then finally, I will add transition 2 seconds. Now you can see the image is blurry, just like we want. Okay, let's go back and target the two. Then add position relative color. White font size ten, EM text transform upper case, then text shadow 05 pixels, 25 pixels, then this color. Then below that, I will add font weight 800 in order to have the heading show up in front of the image. We will add z index two. Finally, transition 2 seconds, Now you can see we have our heading. Okay, let's work on the hovering effect of the heading. I will say when hovering over the heading, I will add filter blur, ten pixels. Then below that I will add transform scale 1.2 Now you can see when I hover over this heading, this effect happens. It gets bigger and blurry thanks to the code, we add it here. After finishing the heading, let's create the hovering effect of the background image. I will say when hovering over the image, I will select the image using this selector, which makes us select the siblings of our element. In this case, the image is a sibling of the H two. Then inside that I will add top zero, left zero width 100% height 100% Then finally filter blur zero pixels. And now you can see when we go and hover over the heading, the image gets smaller since we reduced its height and width from 140% to 100% Also, the blurry effect is gone since we changed it to zero instead of ten pixels. That happens along with the heading effect, giving us the exact effect we were going for. 129. text focus and blur effect: Hello everyone. Welcome to this new lesson in the course. In this lesson, we are going to create this cool text effect. You can see we have this text that is blurry. When we hover over any letter in the word, the letter comes into focus and we can see it clearly. Also, we have these four borders around the letters that appear when hovering and disappear when hovering away. Let's start and see how we can create this effect. I will go here in my HTML and add an H two. Then inside it, I will add a span, an tag inside that span. We will use that tag to create the four borders around each letter. Then I will add the first letter. Then I'll copy and paste that four times and change the letters to form the word focus. Then I'll go to my CSS and target the body. Then add Display Flex, Justify, content, Align items center in height 100 VH. Then I will add background linear gradient 45 degrees, this blue color to this yellow color. Now you can see we had this cool gradient color. Then below that I will target the H two and add position relative display flex gap 15 pixels in order to separate the letters by 15 pixels. Then color white font size four, E, M, cursor pointer. Then finally text transform upper case. Then below that, I will target the spans inside the H two and add position relative. Now let's create the four borders around the letters. We will do that using the element inside the spans. I will target the four pseudo element of the add content. Empty strings, position absolute w, two pixels height eight pixels, background white. Now you can see we have this small white line on the top left corner of each letter. Let's keep going. I will go back and add to zero, left negative five pixels. Now after creating the vertical line, let's create the horizontal line. I will select the after pseudo element of the element and add content empty strings position absolute with eight pixels height two pixels background white. Then I'll add top zero left, negative five pixels. Now you can see we have this horizontal line. By doing that, we have created the top left corner. Let's now create the other three corners. We will do that by duplicating this top left border using the box shadow property. I will go here inside the before pseudo element and add box shadow zero as a horizontal value, 53 pixels as a vertical value, and white. Now you can see we have this vertical line at the bottom left corner. Let's create its vertical line. I will copy that. Paste it here, and change 53 pixels to 60 pixels. And now you can see we have duplicated the border at the top left corner to the bottom left corner. All right, I will quickly add the other box shadow values. I will go here and add 37 pixels as a horizontal value, 53 pixels as a vertical value, and white. Then here I will add 30 pixels as horizontal value and 60 pixels as the vertical value, white. Now you can see we have the border on the bottom right corner. Let's also add the final border at the top right corner. I will go here and add 36 pixels as a horizontal value, zero as a vertical value, and white. Then below here, and add 30 pixels as a horizontal value, then zero as a vertical value, and white. Now you can see the four borders are looking exactly the way we want. We created all of them using the box shadow property. Let's create the hovering effect. Now. I will go here and add opacity here as well. Then I'll go here and say when hovering over the spans, I will select the before pseudo element of the element. I will also do the same for the after pseudo element and add opacity one. Now you can see the four borders are now hidden, and when we hover over any letter, you can see they appear again. Now let's work on the blurring effect. I will go here inside the spans and add filter blur, five pixels. Then below that I will say when hovering over the spans and add filter blur zero. Now when I go and hover over any letter, you can see the letter that we hover over comes into focus and becomes very clear. Finally, let's add some transitions. I will go here inside the spans and add transition 0.5 seconds. Then here when hovering, I will add transition 0 seconds, so that the transition happens only when hovering away from the letters, not when hovering over it, like you see here. That's it, everyone you can see, we have created this really simple, but very cool effect. 130. creative glassmorphism animation effect: Hello everyone, welcome to another new lesson in the course. In this lesson, we are going to create this cool glass morphism animation. You can see we had this semi transparent circle at the center. We have a red square and a white circle that are moving across the semi transparent circle. If we focus only on the white circle here, you can see it moves from left to right behind the semi transparent circle and becomes blurry while it's crossing the circle. When moving back from right to left, it moves in front of the semi transparent circle and becomes visible again. That happens to the red square as well. But the timing is different. This is a really cool example. Let's start creating it. I will go here inside my HTML and add a Di and give it a class of loader. Then inside it I will add three spans. We will use these spans to create the three different shapes in our effect. Then I'll go to my CSS and select the Body Add, Display, Flex, Justify, content center, Align items, center in height, 100 VH, the background, this dark navy color. Then below that, I will select the loader dive that contains the three spans and add position relative width, 150 pixels. Height 150 pixels. Then a temporary red background color. Now you can see we have this red square sitting in the center of the window. All right, let's go back and select the spans inside the loader. Dive and add position absolute in order to position them relative to the loader div. The width 100% height 100% it takes up the full width and height of the loader dive. Then a temporary blue background color. Now you can see we have this blue square that's covering up the red one. Actually, these are three blue squares. Not one, but they are stacked on top of each other. Then I'll go back here and add border radius 50% to make these three spans a circle like you see now. All right, now let's work on the semi transparent circle in the center. I will select the first child of the spans and add background, this semi transparent color, in order to see it clearly. I will go up here and remove this blue background, this red background. Now you can see we have this semi transparent circle. Okay, let's work on the red square that moves across the semi transparent circle. Now we will create it using the second span inside the loader div. I will target that and add background, our red color, then border radius zero to make a square. Again, since we made all the span circles by adding border radius 50% here inside the span selector. Now you can see we have this red square that's covering up the semi transparent circle. All right, let's create the glass morphism effect for the semi transparent circle. I will go up here and add backdrop filter blur, ten pixels, then z index two so that it covers up the red background in order to see the effect clearly I will go here inside the red background and add transform translate negative 50 pixels and negative 50 pixels. Now you can see the part of the red square that's behind the circle is blurry and the circle now has a glass morphism shape. All right, let's go back and remove that. Then let's work on the animation effect of the red square. I will create a new animation, name it animate inside it. At 0% of the animation duration, I will add transform translate negative 150 pixels on the x axis and 50 pixels on the y axis. Then scale 0.4 in order to make it smaller. Then finally rotate zero degrees. Then I will copy that, paste it, and at 50% of the animation duration. I will change the translate property to 150 pixels on the X axis and negative 50 pixels on the Y axis. So it will move to the top right side. I will also change the rotation degree to 180 degrees, so it will rotate while moving across the circle. Then finally, below that, at 100% of the animation duration, I will move it back again to its original position. And I will change rotate to 360 degrees. All right, I will go up here inside the red square and add animation animate 4 seconds as an animation duration. Then ease in out and infinite. Now you can see the red square is animated and moving across the semi transparent circle. And you can see when it crosses the circle, it becomes blurry as it moves behind it. Now when it returns, we want it to be visible again on top of the circle, not blurry. So we can do that by going here at the beginning of the animation and adding Z index one. Then at 50% we will set it to one as well. What this will do is it will make the red square blurry on the first half of the animation. Then I will copy all of that. Paste it, and at 50.000 1% I will just change Z index to three. Also at 100% I will add Z index three as well. What this will do is it will make the red square appear on top of the circle, not be blurry during the second half of the animation, just like you see here. It's blurry for the first half, since Z index is one, which is lower than two, the value of the circle. It's not blurry in the second half since it has a Z index value of three which is higher than that of the circle. Cool. Now after understanding this, we can easily create the white circle that also moves across the semi transparent circle. I will just copy the red circle. Paste it and select the third span. Then I'll change the background color to white and remove this, so it's still a circle. Now you can see we have this white circle that moves along with the red square. Let's go here and add animation delay. Negative 2 seconds. We chose 2 seconds because it's half of the animation duration, which is 4 seconds. So that the two spans will move across each other with perfect timing. Just like you see here when one of them is on the left, the other is on the right, and they meet each other in the center, giving us this really cool glass morphism effect. 131. stacked card hover effect: Hey there everyone. Welcome to this new lesson in our course. In this lesson, we are going to create this effect where we have three cards that are stacked on top of each other, inside that circle. And when hovering over any of them, they appear here, next to each other. So let's start creating this example. I will go here in my HTML and add a div with the class of container. Then inside it I will add another div with the class of card. I will also add style, I will declare a variable, let's set its value to negative one. Then I'll copy and paste two other divs with the same class and just change the variable value to 0.1 Then I will go to my CSS. Select the body and add Display Flex, Justify, Content center, Align items, min height, 100 VH background, this dark purple color then transition 0.5 seconds. Then below that, I will target the before pseudo element of the body to create the big circle and add content. Empty strings position absolute top zero left zero width 100% height, 100% z index negative two background, this yellow color transition 0.5 seconds. Now you can see we have a yellow background that is filling up the whole window. Since its height and width are 100% of the body. Let's go back and make it a circle. I will add clip path circle 250 pixels as a radius. Then at center as its position. Now you can see the only part shown from the yellow background is this circle in the center. Then I'll target the container div that is wrapping up All the three cards, add position relative width 1,100 pixels, height 400 pixels, and a temporary red background. Now you see this red background that is sitting on top of the yellow circle. Okay, let's select the cards. I will target the divs with a class of card and add width 300 pixels, height 400 pixels. Background, white position absolute to calc 50% -200 pixels. So that it will be centered vertically. Then left 50% and border radius ten pixels. Then in order to center it horizontally, we will add transform translate x negative 50% Now you can see the cards are sitting inside the red background, but they are stacked on top of each other and that's why they appear as one div. But let's go back and see our three cards. I will go here and add translate Y 50 pixels times the variable. I remember the variable values are negative 10.1 That means that the first card will move to the top along the y axis by 50 pixels, since its value will be negative one times 50, which is negative 50. Also, the second one will stay as it is, since its value will be zero times 50, which is zero. Finally, the third card will move to the bottom by 50 pixels. All right, let's also add rotate 40 degrees for all three cards. Now you can see the three cards are rotated and the first one has moved to the top. The second one is in the center, and the third one is at the bottom. Just like I explained, Let's quickly go and remove our red background. Let's also go back and add skew negative 20 degrees on the x axis and negative ten degrees on the y axis. Then finally, scale 0.6 Now you can see we almost have the effect we want. The only thing left now is adding a little bit of box shadow to separate the cards. I will add box shadow 25 pixels, 20 pixels, 100 pixels, this gray color. And now they are separated. But as you can see, the third div is on the top, then the second, then the first, but The other way around. We want the first div to be on top, Then the second and then the third. We can easily do that using the Z index property. I will go back and add z index negative one times the variable for the first div, that will be negative one times negative one, which will be one for the second, it will be zero for the third, it will be negative one times one which is negative one. It will have the lowest z index and be on the bottom of the stack, just like you can see here. Then finally, I will add transition 0.5 seconds. Let's add some transparency to the second and third card so that they will have a nice three D effect. We will select the second card and add opacity 0.8 then the third card and change the opacity to 0.6 Now you can see they look so much better. All right, let's work on the hovering effect. Now I will go here and say when hovering over the container, which is remember the yellow background, I will target the cards and add position absolute z index one, opacity one. Then transform translate x negative 50% and that will override all the transforms we saw above here. And only apply this translate function here, the rotation, the skewing, all of that will be removed. And that means that the cards will be stacked on top of each other, again, like you see here. Okay, now we want to add some spacing between them. Let's say we want to add 350 pixels between each card. We can go back here and add, then next to this negative 50% we will add plus calc 350 pixels times the variable. And what this will do everyone is it will add negative 350 pixels to the first card, zero to the second card, so it will stay in its position and 350 pixels to the third card. And that in return will separate each one of them by 350 pixels, just like you can see here. Now it's time to add some content to these cards. I will go back to my HTML inside the card div and add another div with a class of content. I will add style. Then I will add a variable J with a value of one. Then inside that div, I will add an H two and say card one. Then I will add a paragraph and add some text inside it. Then I'll copy that content Div, Paste it again and change the J variable to two and card one to card two. Then I'll paste it here as well. And change J to three and card one to card three. You can see we have the content here inside the three cards. Let's go to our CSS. I will go here inside the car and add display, Flex, Justify content center, a line, items center. And now you can see the content is centered inside the car Div. Let's keep it going. I will select the content and add position relative padding, 25 pixels color this dark gray color, transition 0.5 seconds, then opacity zero. Then below that I will say when hovering over the container Div, I will target the content and add opacity one. Then transition delay 0.2 seconds times the variable J. The first content div will have a transition delay of 0.2 seconds. The second one will be delayed by 0.4 seconds. And the third one will be delayed by 0.6 seconds, just like you can see here. With that, we have finished this lesson. I hope you liked it and I will see you in the next one. 132. Creative 4 Lines Button Hover Effect using CSS: Hey, there everyone. Welcome to this new lesson in the course. In this lesson, we're going to create this nice button hover effect. You can see the button has four lines around it. And when we hover over it, the four lines come together and shrink until they disappear. Then this glowing background scales up until it covers up the button. We will learn how we can create this background glow using the box shadow property. Let's get started. I will start here in my HTML by adding a div and giving it a class of container. Then inside that I will add an anchor tag. Then inside it I will add four spans for the four lines. I will go right here and say Button. Then I will copy this anchor tag and paste it again to create another button. Then I'll go to my CSS. I'll start by adding some general resetting styles. I'll add margin zero padding, zero box sizing, border box, font family, Sands, seraph. Then I'll target the body and add display Flex, justify, content center to center the container div horizontally in the body. Then I'll add a line items, center it vertically. Then I will add min height, 100 VH. Then finally background this dark gray color. Then I'll target the container div and add display Flex to control the alignment of the buttons. Then I'll add gap 150 pixels to separate the buttons. Finally, flex, wrap, wrap. Now I will target the anchor tags and add position relative to position the four lines relatively to the anchor tag. Then I will add text decoration none text transform upper case padding, 20 pixels from top and bottom and 35 pixels from left and right. Then I'll add border two pixels solid. This nice blue color, then color our blue color font size 20 pixels. Letter spacing four pixels, finally transition 0.5 seconds. Now you can see the buttons look much nicer. Now when hovering over the links, we want to change the text color to white and remove the borders. I will target the link when hovering over it. I will add color white to change the text color to white instead of blue. Then I will add border, two pixels solid, transparent to remove the border. Now you can see when we hover over the links, we get the effect we want. Now let's create the four lines that surround the links using the four spans we created inside each link. I will target the spans inside the links and add position absolute to position them relative to the links. And we will control each one of them individually. Then I'll add background, our blue color. Now we will target the first and third spans. I will say span nth child one, then span nth child three. I will add width 40 pixels, height four pixels. Those will be the horizontal lines. Then I'll copy that, paste it, and target the second and fourth spans. Then I will change the width to four pixels and the height to 40 pixels. So those will be the vertical lines. Now you can see the lines appear here, but they are stacked up on top of each other. Let's go back and control their position. I will go here and target the first child and add top 50% minus two pixels. So that the first line will be centered vertically. Then to move it to the left of the link, we will add left negative 50 pixels. Then I'll add transition 0.5 seconds. Ease out. Now you can see the first line is positioned to the left of the link. All right, now when hovering over the link, we want this first line to move back to the center of the link and shrink. At the same time, I will go right here. And when hovering over the link, I will target the first line and add left 50% to move it back to the center. I will also add transform scale x zero, so that the line shrinks while moving back to the center. Now when hovering over the link, you can see the first line moves back to the center while shrinking. In order to make the line shrink toward the left side, I will go here and add transform origin left. Now when hovering away from the link, we want the line to wait a little bit before moving back to its position. I will go here inside the first line CSS block and add transition delay 0.25 seconds. Then when hovering over the link, I will add transition delay 0 seconds. So that the delay will happen only when hovering away from the link, not when hovering over it like this. All right, now we have one thing left and that is adding some box shadow to the line in order to get this nice glowing effect. We'll go back here inside all the spans and add box shadow 00, blur value of ten pixels and the color of our blue color. Then I'll copy this value, paste it four times, increase the blur value gradually for each value. This is how we can get this blurry effect like you see here. Okay, now let's do the same for the other three lines. I will go here and copy that. Paste it three times. Then I will target the third line. Change left to right because we want it positioned on the right side. Then I will change transform origin to right instead of left. I will also change left here to right. Now you can see the third line is positioned on the right of the link. When hovering over the link, it moves back to the center and shrinks. Okay, now let's target the second line. We want to center it horizontally, not vertically. So we will change top here to left. And we'll change left here to top in order to move it to the top above the link. We will also change transform origin to top. When we reload the page, you can see it's now positioned above the links. Now let's go back and continue the hovering effect. I will go here and target the second line and change left to top. Then I'll change scale X to scale Y in order to make it shrink vertically. Now you can see we're getting the effect we were going for. Let's quickly do the same for the fourth line, which will be positioned below the links. I will target it here, here, and change top to left, left to bottom. Then I'll change transform origin to bottom as well. When hovering, I will change left here to bottom, scale X to scale Y. Now you can see all four of the lines are created and we now have the exact effect we were going for. Now it is time to create the background that appears after the shrinking of the lines to cover up the links. And we'll do that using the before pseudo element. I will go here and target the before pseudo element, the link. And add content empty strings, position absolute to position it relative to the links. Then I'll add top zero, left zero, since we want it to completely cover up the links. I will add width 100% height 100% Then I'll add background, our blue color. Now you can see we have the blue background. Now let's go back and continue. I will go here and add transform scale zero. Then transition 0.5 seconds, z index negative one. Then I will go here. When hovering over the link, I will select the before pseudo element and add transform scale one transition delay 0.5 seconds because we want the background to appear. After the four lines come together, then in order to get this glowing effect, we will add box shadow 0010 pixels, our blue color. Then I will copy it, paste it twice, and increase the blur value accordingly. I will change it to 30 pixels, then 60 pixels. Now when hovering over the link, you can see after the four lines come together, we have this nice glowing background that scales up and covers up the button. And that is exactly the effect we were going for. 133. Creative 4 Circles Animation: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this cool circles, animation. You can see we have these shapes and they are animated in a really nice way. We have this white circle that's moving horizontally from right to left, and then goes back on an infinite loop. Above that we have this blue semicircle that is rotating. And above that we have this small white ball that's sliding above it perfectly. This is going to be a cool animation example. Let's see how we can create it. I will go here in my HTML and add a div. Give it a class of container. Then inside that, I will add another div with a class of loader. Then inside that, I will add the last div, give it a class of ball. Then I'll go to my CSS and start by adding some general resetting styles. I will add margin zero, padding zero, then box sizing, border box. Then below that, I will target the body and add display flex, justify content center, align items, center in height, 100 VH background, this navy color, finally overflow hidden. Then I will target the Div with the class of loader and add position relative width 200 pixels. Height 200 pixels as well. Then I'll add a temporary background of red. Now you can see we have this red background that centered inside the body. We will use this loader di in order to create the blue part that was rotating in our example right here. All right, now let's create this blue background using the before pseudo element. I will target the before pseudo element of the loader div and add content empty strings position absolute width 200 pixels, height 100 pixels. Then background our blue color. Now you can see we have this blue background, but we want to change this background to a semicircle. Let's do that. I will go here and add border bottom left radius 100 pixels, the same as the height of the blue background. Then border bottom right radius 100 pixels as well. Now you can see the blue background is looking exactly the way we want. All right, now let's create the second part of our drawing. This white circle here that's moving horizontally back and forth. I will go back here and target the container div. Then I'll add position relative. Then below that, I will target the before pseudo element of the container div to create the white circle. Then I'll add content empty strings, position absolute width 200 pixels, height 200 pixels. Then background white. To make it a circle, I will add border radius 50% In order to see this white background, I will go up here inside the loader and add Z index negative one. You can see we have this white circle that looks exactly like we want. Since we want to locate the white circle below the blue one, we will go back here and add to 200 pixels. Now you can see it has been moved to the bottom of the red background. Now we want the blue background to be exactly above the white circle. We can do that by going here inside the before pseudo element of the loader dive and adding bottom zero. Amazing, Let's remove this red background. We don't want it anymore. I will go here inside the loader div and remove the red background. Okay, let's create the third part which is this big pink circle. I will do that by using the after pseudo element of the container. I will target the after pseudo element of the container and add content empty strings, position absolute. Then I'll add width 800 pixels. Height 800 pixels as well background, this nice pink color. In order to make it a circle, I will add border radius 50% Now you can see we have this huge pink circle. Let's go center it horizontally. I will go here and add left 50% Then transform translate x negative 50% Now you can see the pink circle is centered inside the page and is now covering up the white background. We want to position it below the white background. I will go back here and add top 400 pixels. Now the ping background is located below the white circle, but as you can see, the whole drawing is located towards the bottom. It would be nicer if we could shift it to the top a little bit. I will do that by going inside the container div and adding transform translate y negative 100 pixels to shift it to the top like you see here. All right, we're almost finished. The only thing left here is the small white ball at the top. I will start by targeting it and I will set its position to absolute. Then I'll add width 40 pixels, height 40 pixels, background white, and border radius 50% Now you can see it's positioned relative to the loader div. To see it clearly, I will go up here inside the loader div and add background red again. Now you can see the white ball is positioned here at the top left corner of the loader. All right, let's change its position to sit exactly at the top of the white circle. I will go back inside the ball div and add to 50% transform translate y negative 100% Now we have all our pieces together and the only thing left is to animate them one by one. We will start with the small white ball. We want to move it horizontally on the top of the blue semicircle. It should move from right to left, back and forth in an infinite loop. First I will go here and add translate x negative 40 pixels. So that the small white ball moves to the left and is positioned at the start of the blue semicircle like you see here. Let's now create the animation. I will go here and create a new animation. Name it, Animate ball inside. I will add three stages for the animation. At 0% I will add transform translate Y negative 100% so that it will keep its vertical position. Then translate x negative 40 pixels. Then at 50% of the animation duration, I will copy that, paste it and change translate x to 200 pixels. That's the width of the blue semicircle. The ball will move all the way to the right at 100% we want it to go back again, so I will leave it as it is negative 40 pixels. Then I will go up here inside the ball div and add Animation. Animate ball 4 seconds. Ease in out infinite. Great. Now you can see the white ball is moving infinitely from right to left. Exactly above the blue semicircle. Light we want. All right, let's take a quick look at the blue semicircle to see how we can animate it. You can see here it's rotating from left to right and back again. Okay, let's go back and create the animation. I will go here and create a new animation. Name it semicircle. Then I'll create three stages for this animation. At 0% of the animation duration, I will add transform rotate 50 degrees. Then I'll add another two stages. I will copy that, paste it again two times. The second stage will be at 50% I will change the rotation value to negative 50 degrees. Then at the end of the animation duration, I will leave the rotation degrees as they are. Then I'll go up here inside the loader and add animation semicircle 4 seconds. Ease in out infinite. Now you can see the red background is rotating on its center and the blue semicircle is rotating with it. Now let's go back and remove the red background. We don't need it anymore. I will quickly do that. Now there's only one thing left and that's animating the white circle. I will go here below the white circle and create a new animation. Name it, animate circle. At 0% of the animation duration, I will add transform translate x 15 pixels. Then I'll copy that and create another two stages. The first one is at 50% then change translate x to negative 15 pixels at 100% I will leave the translate x value as it is. Then I'll go up here and add animation Animate circle 4 seconds. Ease in out infinite. Now you can see the white circle is now moving horizontally between the blue semicircle and the pink one, giving us the exact effect we want. Okay guys, this is it for this lesson. It was a really fun one, and I hope you enjoyed it. See you in the next one. 134. colorful liquid glass animation: Hi there everyone. Welcome to this new lesson in the course. In this lesson, we're going to create this nice animation. You can see we have this glass of water. And the water inside it is moving down to empty the glass, then moving up to fill it again. And this happens over and over again. Let's start creating this example. I will start here in my HTML by adding a section inside that. I will add a, give it a class of glass. Then another dive inside that with a class of inner, inside it, our last div with a class of liquid. Then I'll copy that div with a class of glass and paste it again. Then I'll go to my CSS and target the section. Then add display flex, justify content, center a line items, center height, 100 VH background, this dark gray color. Then below that, I will target the glass di and add position relative. Below that I will target the inner div inside the glass div and add position relative width 200 pixels, height 400 pixels background this gray color. Then I'll go up here inside the section and add gap 40 pixels to separate the two glasses like so let's keep going. I will go here and add border radius 40 pixels. Then border eight pixels, solid white. All right, let's take a look at our example. We want to create this circular top part here at the top of the glass. And we will do that using the before pseudo element of the inner div. So I will target it and add content empty strings position absolute width 175 pixels, height 30 pixels. Then border ten pixels solid. This gray color, you can see we have this gray rectangle. Let's keep going. I will go back here and add border radius 50% In order to center it horizontally, I will add left 50% Then transform translate x negative 50% Now you can see we have this circular shape. Okay, now we want to move it to the top a little bit. I will go back here and add top negative 15 pixels. Let's also go up here and change the border color to transparent instead of white. Amazing. Now the top of the glass looks exactly the way we want. One final thing, let's add some box shadow at the bottom. I will go back here and add box shadow, zero horizontal value, and 15 pixels as a vertical value. Then zero blur value, and a dark gray color as the color of the shadow. Now we have this nice shadow at the bottom. Okay, If we look at our example, you can see we have this semi transparent part that gives the glass a realistic look. Let's go back and do that. I will do that using the after pseudo element of the inner div. I will target it and add content empty strings position, absolute top 70 pixels left, 30 pixels width. 50 pixels and height 250 pixels. Then finally background this semi transparent gray color. Now you can see we have this semi transparent gray background that we want. All right, let's go and create the liquid inside the glass. We will do that using the liquid. I will target it and add position absolute top 50 pixels left, five pixels, five pixels, bottom five pixels. Then background this light blue color. Now you can see we have this blue background that covers up the glass. But now we want to add some curves here at the bottom in order to match the glass. I will go back here and add border radius 30 pixels. Border bottom radius 30 pixels as well. Now you can see the liquid div looks exactly the way we want. All right, let's go back and take a look at our example. You can see we have this top circular part right here. Let's create it really quick. I will target the before pseudo element of the liquid div and add content. Empty strings, position absolute width 100% height 20, border radius 50% Then background this darker blue color. You can see we have this circular blue background. But let's shift it a little towards the top. I will go here and add to negative ten pixels. Amazing. The glass looks exactly the way we want. And we have finished the drawing. But now we need to animate it. Let's go back and do that. I will create a new animation, name it Animate Liquid. Then at the start of the animation duration at 0% at 20% I will add 50 pixels from the start of the animation to 20% of the animation duration. The blue liquid will stay as it is. It won't move because we didn't change its top value. Then at 50% of the animation duration, at 70% we will set the top property to 320 pixels. The top property will change from 50 pixels to 320 pixels over the animation duration of 20% to 50% of the animation duration. Then it will sit still for a while at 320 pixels from the animation duration of 50% to 70% Then finally below that, at the end of the animation duration at 100% we will set top back to 50 pixels. All right, let's go up here inside the liquid div and add animation animate liquid, 5 seconds linear, infinite. Now you can see after reloading the page, the liquid inside the glass waits a little, then moves to the bottom. Waits a little at the bottom, then goes back to the top again. That continues on an infinite loop. Let's go back and change the color of the second liquid. I will target the second glass and target the liquid inside it and add background, this yellow color. I will also add animation delay 2.5 seconds. I will copy that, select Paste it, and target the before pseudo element, which is the top part here. Then I will add background, this darker yellow color. Now you can see the color changes giving us this yellow color. And as you can see, when one cup is being filled, the other one gets empty, giving us the exact effect we want. 135. fancy border loading animation: Hi there everyone. Welcome to this new lesson in the course. In this lesson, we're going to create this nice loading effect. You can see we have these elastic circles that are rotating and giving us this nice wavy effect. We'll learn how to do that using the border radius property. So let's get started. I will go right here inside my HTML and add a Div with a class of loader. Inside that I will add three spans, then below that I will add an H two and add loading inside it. Then I'll go to my CSS and target the body. Add display, Flex, Justify content center to center the loader horizontally. And align items center to center it vertically. Then I'll add in height, 100 VH and background this dark gray color. Then I'll target the loader and add position relative width, 200 pixels, height 200 pixels. Then display flex, justify content center, Align items center. Then I'll target the spans inside the loader. Add position absolute, then top zero left zero width 100% height 100% border radius 50% then border two pixels solid white. Now you can see we have the three spans as white circles that are sitting on top of each other. All right, let's now target each span and change the border radius of each one to give it this nice elastic look. I will target the first span here by saying loader span nth child one. Then inside that, I will add border radius. In order to fully control how this border looks, we will use a website named Fancy Border Radius Generator. You can see we have this shape that we can easily control to get the shape we want. Let's play with it a little. Let's say we want this radius. I will copy it and paste it here. Now you can see the first span now has this nice elastic border. Okay, now I will copy that first selector, paste it and target the second. Select, paste it one more time and target the third one. Then I will go back to the fancy border generator website and generate a new border radius, just a random one. Then I'll paste it here inside the second span. Okay, I'll go back and generate another value and paste it here inside the third span. Now you can see we have three different borders that have a different border radius. All right, now let's create the animation. I will create a new one. Name it rotate. And inside it, at the beginning of the animation duration at 0% I will add transform rotate zero degrees. Then at 100% of the animation duration, I will add transform rotate 360 degrees. Then I'll go up here inside the span selector and add animation rotate, animation duration of 5 seconds, then linear, infinite. Now you can see the three borders are rotating along with the three spans. All right, in order to get the elastic wavy effect we want, we can play a little with the borders, for example. We can make one border rotate in the reverse direction. Let's try that. I'll go back here inside the second span and add animation direction reverse. I think you can see we're already getting the nice effect. We can leave it as it is or we can try something else. I will go inside the third selector and add animation duration 3 seconds instead of five, so it will rotate faster. Now you can see it's moving faster, giving us this nice effect. Very cool. We have one thing left and that is adding some simple styles to the H two. I will target it and add color white and font weight 500. Now it looks much nicer. And that's it, everyone, for this simple but beautiful example. I will see you in the coming videos. 136. rotating glowing loader: Hi there everyone. Welcome to this new lesson in the course. In this lesson, we're going to create this nice loading effect. We also have this loader with this glowing circle that is rotating, giving us our nice example. Let's see how we can create it. I will start here in my HTML by adding a section, Then inside it I will add a div, Give it a class of loader. Then I'll go to my CSS and target the section. Then add display, flex, justify content center, Align items center as well. Then min height, 100 VH and background this navy color. All right, then I'll target the loader div and add position, absolute width 150 pixels, 150 pixels, background red for now, then border radius 50% All right, now you can see we have this red circle positioned in the center of the browser. We're going to learn something new in this lesson, which is CSS gradient. We want to change the background of this circle to a gradient of two blue colors. Instead of this red color, we will use this website to generate the gradient. This website helps us create a color gradient. You can see we have these two colors that we can use to generate the gradient. I will change this first color to this navy color. That is the color of our section. And the second color we want is a light blue color. I will put it here. I will also play with this slider here. To change the gradient intensity, I want this gradient shape. We can go here and copy this code. Then go back to my CSS inside the loader dive and change the background color from red to this new value we copied from our website. Now you can see the background color of the circle is now changed to this cool gradient. All right, now let's continue. We'll go here and target the before pseudo element of the loader div and add content empty strings, position absolute. Then we want to hide a part of this shape here. In order to get the final shape we want, I will go back here and add inset 20 pixels from top, 20 pixels from right, then zero at the bottom and zero on the left as well. Then I'll add back red for now. I will also add border radius 50% Now you can see we have this red circle that's covering up our shape. All right, let's go back and change the background color to the same Navy color we used on the section background. Now you can see we have this circular shape that exactly the way we won. All right, let's create the small glowing circle that will be positioned here. I will go back and target the after pseudo element of the loader div and add content empty strings position absolute width 40 pixels. Height 40 pixels as well. Then background our light blue color and border radius 50% Now you can see we have this blue circle right here. Now we want to position it here. I will go back and at top 50 pixels, right, negative eight pixels. Now you can see it's positioned at the exact place we want. Let's go back and give it this nice glowing effect. We will do that using the box shadow property. I will add box shadow zero as horizontal offset, another zero as vertical offset. Then a blur value of five pixels. Finally, this light blue color. Now you can see we have this very tiny shadow. In order to get the glowing effect we want, we can use a simple trick. We will copy this box shadow value, paste it a few times, let's say three times In each time, we will increase the blur value. Gradually, we will change it to 25 pixels here, then 50 pixels and 75 pixels. By doing that, you can see we have this nice glowing effect. Every time you want to create a glowing effect, you can use the box shadow property and gradually increase the blur value like we just explained. All right, now let's create the rotation animation. I will create a new animation. Name it rotate inside it at 100% I will add transform, rotate 360 degrees. Then here inside the loader div I will add animation. Rotate 2 seconds, linear, infinite. Now you can see the loader is rotating on an infinite loop. 137. Creative Text Animation Using Clip Path Property: Hello everyone, welcome to this new lesson in the course. In this lesson, we will learn how to create this nice text animation. You can see the screen is split horizontally in two halves. The top half has a green background and the bottom one has a white background. Also the text here is moving from the top part to the bottom part and changing from Happy New Year 2031 to bye bye 2030. Also, color is changing from white to green. We will use the clip path property to create this browser splitting. Let's get started and do that now. I will start here in my HTML by adding a section. Then inside it I will add a div. Give it a class of box and another class of box one. Then inside that div, I will add an H two. Inside it, I will add a span, say bye bye. Then another span next to that, say 2030. Then I'll copy that div, paste it again, and change box one to box two. Inside the first span, I will add Happy New Year. Inside the second span, I will add 2031. All right, now I will go to my CSS and target the body. Then I'll add Overflow hidden. Then I'll target the section that contains the two divs. I will add position relative width, 100% height 100 VH. Then I'll target the box div and add position absolute top zero, left zero, then width 100% height 100% as well. The two divs will have the full height and width of the section. Now let's go and reload the page. You can see because we set the position of the boxes divs to absolute, the text is stacked on top of each other on the top left corner of the section. Let's go back and center the text inside the page. I will go back here and add display Flex, justify, content center, Align items center as well. Now you can see the text is centered inside the page. Okay, let's go back and target the second box that has the class of box two and add background, this green color. Now you can see the second box has this green color, and it's hiding the first box underneath it because it came after it in our HTML. Okay, Now we want only the top half of the second box to show, meaning we want to split it into two halfs and have only the top half visible. We can do that easily by using the clip path property. I will go to the website clip and select the trapezoid shape. Then since we want to clip the bottom half, I will quickly do that. Then I'll copy the code here, Go back and paste it inside the second box div. Now you can see the second box is perfectly clipped and since the text inside it is perfectly centered, it's also clipped into two halves along with it. All right, now let's add some styles to the H two. I will target it, add font size 45 pixels. We want to make the two spans inside each heading sit in two lines, like we see here in our example. We have Happy New Year on one line and 2031 sits below it. This is the same for the second heading as well. This is the reason we added two spans inside the H two. Let's go back and do that. I will go here inside the H two and add display flex. Then flex direction column. Now they are separated into two lines. We can clearly see that if we go back here and add transform translate y negative 70% Now you can see since we shifted the H two to the top, we now see the second H two and the first one is hidden underneath it. If we want to see the first H two, we can go back and change that to 70% instead of negative 70% Now you can see we have by by 2030. And the second H two is hidden since we clipped the second box, so it's not appearing. All right, let's go back and set the translate property back to negative 70% I will also add text, a line center in order to center the text. Okay, let's change the color of the H two that's appearing here. I will target the H two inside the second box and add color white. All right, now let's target the second span of the H two. That's the year to add some styles to it. I will say span nth child two and add line height one and font size two. All right, let's create the animation that moves the text up and down. The idea of the animation is animatingly translate Y function in order to move the H two vertically. Like we saw when we played with the H two value. I will go here and create a new animation. Name it, animate inside it. We want the text to start moving from the top to the bottom. But we want it to sit for a little while at the top half, then move to the bottom half. Sit there for a little bit at the bottom half and move back to the top half and so on. I will say at 0% of the animation duration, at 45% I will add transform translate y negative 70% so that the text will stay in its position from the beginning of the animation duration to 45% before it moves. Then below that at 55% 90% I will add transform translate Y 70% That means that from 45% of the animation duration to 55% the position will change from the top negative 70% to the bottom 70% From 55% to 90% it will stay in this new position at the bottom. Then we want to move it back to the top. I will say at 100% I will add transform translate y negative 70% again. Then I will go up here inside the H two selector and add animation animate 3 seconds. Ease in out infinite. Now you can see the text is moving from top to bottom, back and forth, giving us this nice animation effect. The only thing left now is changing the color of the text to green. When it moves to the bottom, I will go back here and inside the H two selector, I will add color, our green color. All right everyone, that's it for this lesson. I hope you learn something from it, and I will see you in another one. 138. draw a line around a button with a pencil icon: Hey there everyone. Welcome to this new lesson in the course. In this lesson, we are going to create this nice button hover effect. You can see we have this button and this pencil at the top left corner. And when I hover over the button, the pen draws a border around the button and then fills it with a dark gray background. All right, let's see how we can create this effect. I will start here in my HTML by adding an anchor tag. I will say Button. Then after that I will add four spans. Each span will be a line of the four lines that creates the border surrounding the link. Then I will go to my CSS and target the body. Then add display Flex, justify, content center, A line items center as well, then in height 100 VH. Then below that, I will target the anchor tag and add position relative padding, 20 pixels from top and bottom and 40 pixels from left and right. Then I'll add font size 24 pixels, font weight, bold color, this dark gray color. Then text transform upper case text decoration, the letter spacing two pixels. Now let's work on creating the four lines that surround the link. We will do that using the four spans. I will target the first span by saying span nth child one. I will also target the third span. Then I'll add width, 100% height, three pixels background, our dark gray color. This will be the horizontal lines as you can see here. Let's now reposition those two lines. I will target the first span alone this time. And add top zero, left zero as well. Now you can see the first line is positioned at the top, above the link. Now let's animate it from left to right. On hovering, I'll go back here and add transform scale x zero. Then below that, when hovering over, I will select the first span. Again, add transform scale x one. Again, I will also add transition 0.2 seconds. And now you can see the top line is now hidden, and when hovering over the link, it scales up. But we want it to scale up from left to right. We can do that by going back here and adding transform origin left. All right, let's do the same for the bottom line. I will copy these two blocks of code, paste them and select the third span. Then to position it at the bottom, I will go here and change top to bottom. I will also change transform origin to right, because we want it to scale up from right to left. We will also add transition delay 0.4 seconds. Now you can see the line at the bottom is scaling up from right to left after the top line. All right, now let's create the two lines at the two sides. I will go up here and copy that target, the second and fourth spans. Then I will change the width to three pixels. And change the height to 100% Now you can see we have the two lines here. Let's reposition these two lines. I will go back here and copy these two blocks of code. Paste them and select the second span. Then I'll change left here to right, transform origin to top. Then change scale x to scale y here. I will also select the second span and change scale x to scale y. I will also add a transition delay value of 0.2 seconds. This line will scale between the first line and the third line, as you can see here. Let's quickly create the fourth line. I will copy that code, paste it, and select the fourth line here, here. Then I'll change right here to left and transform origin to bottom. I will go here and change transition delay to 0.6 seconds. Now you can see when I hover over the link, the four lines come together one after the other, creating this nice effect. Now let's create the dark gray background. I will create that using the before pseudo element of the anchor tag. I will select that and add content. Empty strings, position absolute, top zero, left zero, then width 100% Height 100% as well. Then this dark gray color. Now you can see we have this dark gray background that's covering the anchor tag. All right, let's work on the hovering effect. I will go back here and add transform scale zero. Then z index negative one. Then when hovering over the link, I will select the before pseudo element and add transform scale one. Then transition 0.5 seconds. Finally, transition delay 0.8 seconds so that the background appears after the four lines animation. Now when I go back and hover over the link, you can see the dark gray background scales up from the center until it covers up the link. But we want it to scale up from the top left corner, not the center. I will go back here and add transform origin top left, just like that, you can see the background scales up from the top left corner. Let's also quickly change the link text color to white. I will select the link when hovering over it, I will add color white. Transition 0.2 seconds, then transition delay 0.8 seconds. Just like that, the text changes to white. All right, now let's add the pencil icon to our link. We will do that using the font awesome library. I will search for font awesome D. Then I'll click here. Then I'll copy link tag. Go back to my HTML and paste it here inside my HTML. Then in order to get the code of the pencil icon, I will go back here and click on this link. To go to the library of icons, I will select the icons and search for pencil, click on this first icon and copy its Unicode. Then I'll go back to my CSS, select the after pseudo element of the anchor tag, and add content. Then I'll paste the Unicode of the pencil, Then I will add font family. Font awesome. That is how you can add a font awesome icon inside pseudo elements. Then I'll add position absolute top zero, left zero color, this dark gray color. Now you can see we have this pencil icon here, but we want to shift it up to the top a little bit. I will go back and change top to negative 22 pixels. All right, let's now create the animation for this pencil, I will create a new animation, name it, draw inside it. At 0% of the animation duration, I will add to negative 22 pixels left, 100% This will make the pencil start at the top left corner of the link, then I'll copy that. Paste it five times. Then at 20% of the animation duration, I will leave top as it is, then change left to 100% The pencil will move to the top right corner. Then at 40% of the animation duration, we want the pencil to be at the bottom right corner. I will change top to 100% -22 pixels. I will change the left to 100% Then at 60% we want it to be at the bottom left corner, I will change top to calc 100% -22 pixels. I will leave left as it is zero. Then at 80% we want it to return to its original position. At the top left corner, I will leave it as it is. Finally, at 100% we want it to be located at the bottom right corner. We will change top to 100% -22 pixels and left to 100% Then I'll go up here and when hovering over the anchor tag, I will select the after pseudo element which is the pencil. I will add animation draw 1 second linear forwards because we want it to happen only one time. Now when I go and hover over the link, you can see the pencil moves around the corners of the link and then moves through the bottom right corner along with the gray background, giving us our nice effect. 139. creative background color menu hover effect: Hey there everyone. Welcome to this new lesson in the course. In this lesson, we are going to create this nice menu hover effect. You can see we have this vertical menu. When we hover over any link, the other links become semi transparent. Also, the text of the link comes together from the two sides and appears at the background. And finally, the background color changes for each link. This is a really cool effect. Let's go and see how we can do it. I will start here in my HTML by adding a UL, then inside it I will add an L I. Inside that I will add a link and add text. I will add home inside the link text. Then I'll copy this LI paste it four times and add about Services, Team and Contact. Then I'll go to my CSS and target the body and add display, Flex, Justify content center, Align items, center height, 100 VH, and finally overflow hidden. I will target the U L add position relative Below that, I will target the list items, add list style, none text, a line center. Then I'll target the link and add color. This dark gray color text decoration, None font size, three EMS padding, five pixels from top and bottom and 20 pixels from left and right. Then display inline flex font weight 700, transition 0.5 seconds. Then when hovering over any link, we want the other links to have a transparent background. I will go here and say when hovering over the UL, I will select the anchor tag and color this transparent color. Now when hovering over the UL, all the links will have this transparent color. Now we want the link we are hovering over to have a black color and a white background. I will go back here and target the UL, then the L I when hovering over the link, I will add color black, then background white. Now when I hover over any link, all the other links have a semi transparent background, except for the link we are hovering over. Okay, let's start working on creating the large text that appears at the background. We will do that using the before pseudo element. I will select the before pseudo element of the anchor tag and add content. Let's say hover for then I'll add position absolute top 50% left 50% Then transform. Translate negative 50% and negative 50% Then color red. Display, Flex, justify content center, a line items center, then font size five, EMS, then z index negative one so that it will appear below or behind the menu links. I will also add font weight. 900 and finally text transform upper case. Now you can see we had this big red word on the background. All right, now let's go back and keep going. I will go here and change the color to this semi transparent gray color. In order for the big text to come together and have the effect we want, we need to separate the letters. Let's do that. I will add letter spacing, 500 pixels. Now you can see the letters are separated. All right, I will also go here and add opacity zero, then transition letter spacing 0.5 seconds below that, when we are hovering over the link, we will select the before pseudo element and add content attribute data text that we will grab the data text inside the link that we are hovering over. Then we will add opacity, one letter spacing only ten pixels, so that the letters come together. And I will go up here and remove the hover word from the content property. Now you can see when I hover over any link, we have this effect where the text of the link comes together on the background. Okay, let's add a background color as well for the text in the background. We want a different background color for each link. We will target each link individually. I will target the first link by saying L I child one. Then we will target before pseudo element of the link inside this first LI. Inside that, I will add background, this nice light blue color. Now when hovering over the first link, you can see we have this light blue background that appears along with the text. But we want it to have the full width and height of the body. I will go here inside the background and add width 100 V and height 100 H. Now the background takes up the full width and height of the body. All right, let's do the same for the other links. I will pause the video and do that quickly. As you can see, I've just selected all the other links and added a different background color for each link. Now when I go and hover over any link, you can see there are different background colors that appear giving us, that's right. The exact effect we want. 140. cloud rain drops animation: Hi there everyone. Welcome to this new lesson in the course. In this lesson, we're going to create another nice animation, A cloud that is raining. You can see we have this cloud drawing and drops of rain are falling from it. This is a really cool animation. Let's see how we can create it. I will start here in my HTML by adding a, giving it a class of container. Then inside it, I will add another div with the class of cloud below it. I will add a third div with a class of rain. Inside that, I will add a span. We will create the rain drops using this span, but we're going to need a lot of spans to create these drops. I will do that really quick. You can see I've added a lot of spans here. I've added 20 spans for all of the drops. Now I will go to my CSS, select the body, and add Display, Flex, Justify content center, Align items, center, min height, 100 VH background, this light blue color. Then below that, I will target the container and add position relative height 400 pixels with 320 pixels. In order to create the line on the bottom, I will add border bottom three pixels solid white. Okay, let's create the cloud. Now I will target the div with the class of cloud and add position relative height, 100 pixels, width 100% to take up the full width of the container. Then top 50 pixels and background white. Finally, border radius 100 pixels to have some curves around the corners. Now we have this shape and this will be the base of the cloud shape. Okay, let's keep going. I will go back here and select the before pseudo element of the cloud div and add content empty strings position absolute width 110 pixels. Height of 110 pixels as well. Then border radius 50% so that it will be a circle. Then I'll add background red for now. Now you can see we have this red background that is located on the left of the cloud div. I will go here and add negative 50 pixels to shift it towards the top 40 pixels to push it a little to the right. Now you can see it's shifted here into this new position. And this will be the second part of the cloud shape. Let's get to work on the third part. We will create it with a cool little trick using the box shadow property. I will go here and add box shadow, 90 pixels as a horizontal offset, zero as a vertical offset because we don't want it to move vertically. Then zero as a blur value, since we don't want it to be blurry. And 30 pixels as a spread value. This positive spread value will increase the size of the shadow, so we will have a bigger circle. Then we will add a blue color for now. Now you can see we have this big blue circle that's located to the right of the first circle, believe it or not, but the cloud shape is finished already. All we have to do now is to change the colors of these two circles to white in order to have the cloud shape that we were going for. I will quickly do that now you can see that by doing that, the cloud shape looks exactly the way we want. Okay, let's work on creating the drops. I will select the rain and add position, relative display, flex, justify, content center, z index one. Then below that I will select the spans inside the rain dive and add width, ten pixels height. Pixels background red for now. Border radius 50% margin, then margin zero from top and bottom and two pixels from left and right. Now you can see we have these little red circles that will be the drops of the cloud. All right, let's create the animation that will move these drops. I will create a new one. Name it, then inside it, at 0% of the animation duration, I will add transform translate Y zero scale one. Then I will copy that, paste it twice. Then at 70% I will change the translate function to 288 pixels and leave the scale as it is. Then at 100% I will change the translate Y to 288 pixels as well, the scale function to zero. I will go up here and say animation in 5 seconds, linear, infinite, and transform origin bottom. Now you can see the drops are falling from the cloud, reach the bottom, and then scale down until they vanish. Because we set the scale function here to zero. But now we want the drops to fall randomly, one after the other. We can do that by changing the animation duration for each span, but it will take a very long time to select each span individually and changes animation duration one at a time. We can use CSS variables to help us do this. I will go back here in my HTML, and inside the first span I will add style two dashes, and that's how we define a variable in CSS. Then the variable name, let's say seconds. Then I'll add 11 as a number of seconds for the first span. I will also do the same for all the other spans and change the value of seconds each time. Now you can see I've added different values for the seconds for all the spans. What we can do now is we can go back to our CSS. And inside the span selector I will add animation duration calc 15 seconds divided by or variable that we declared, which is seconds. What will happen here is for each span, the animation duration will be calculated using this line of code, 15 divided by whatever value we added to the span in our HTML. Since we added different values, we will get different values for each animation duration. 141. creative glowing loader animation: Hello everyone. Welcome to this new lesson in the course. In this lesson, we're going to create this nice glowing loader effect. You can see we have these glowing circles that are glowing then fade away. We will use the box shadow property to do that. So let's take a look and see how we can do it. I will start here in my HTML by adding a section, then inside it I will add a div, give it a class of loader. Then inside that, I will add a span. We will use CSS variables. Here, I will add style, I will name the variable I. I will set its value to one, and we will need this value. Later in our CSS styles, I will do the same for all the other spans. You can see now we have 20 spans and these will be the small circles or bulbs that glow. I've also added different values for the variable. Those values increase from one up to 20 for the last span. All right, now I will go to my CSS. Select the section and add display Flex, Justify content center, Align items, center in height, 100 VH, then background this dark navy color. Then I will target the loader div and add position relative height 120 pixels. Width 120 pixels as well. Below that, I will target the spans inside the loader div. Add position absolute top zero, left zero as well, the width 100% to take up the full width of the loader and height of 100% as well. Then I'll add a temporary blue background. Now you can see we have this blue background that has a width and a height of 120 pixels. This is because we set the width and height to 100% of their container, the loader div, which in turn has a width and a height of 120 pixels. This blue background is actually not a single background, but 20 backgrounds that are covering each other up or covering up the same space, And each one of them represents a span that we added in our HTML. It might not make any sense right now, but we will see it all clearly in a moment. In order to create our effect, we will need to rotate each span by a different degree so that all of the spans will appear. Since we have 20 spans, we can divide 360 degrees by 20, and we will get 18. In order for all the spans to appear, we will need to rotate the first span by 18 degrees, then the second one by 36, and the third one by 54 degrees, and so on and so forth. Each time we increase the rotation degree by 18. Let's do that really quick. I will go here and add transform rotate 18 degrees times v variable. What will happen here is for each span it will be rotated by a degree equal to 18 times whatever value it's variable has. For example, the first span will be rotated by a degree equal to 18 times one, which is 18. The fifth span will be rotated by a value equal to 18 times five, which is 90 degrees, and so on and so forth. But you don't want to hear me just talk about it. Let's actually see what we're going to end up with. Nice. Now you can see we have this shape where all the spans are visible since they've been rotated by a calculated degree that makes them all show up. Let's create the little circles that are attached to these spans. We will create them using the before pseudo element. I will select it here and add content. Empty strings, position absolute top zero, left zero with 15 pixels. Height, 15 pixels as well. Then border radius 50% and background, this light blue color. Now you can see we have these small circles. Let's remove this blue background because we don't need it anymore. Now you can clearly see all the circles that are attached to the 20 spans. Okay, Now let's make them glow really quick. I will go here and add box shadow. This value, what I just did is I increase the blur value gradually for the box shadow property. And that's what gives it a shiny glowing effect, like the one you see here. Okay, now let's create the animation that we will apply to these circles. I will create a new animation, name it, Animate. Then inside it, and at 0% of the animation duration, I will add transform scale one. Then at 80% and 100% I will add transform scale zero. At the beginning of the animation duration. At 0% the circles will be at their full size. Then from 0% to 80% the size of the circles will scale down until it becomes zero. Then it stays at zero from 80% to 100% Okay, let's go up here and add this animation. I will add animation animate 2 seconds linear, infinite. Now you can see the circles are scaling down until they vanish. And then they scale up again, giving us this nice, glowing, shiny effect that looks like light bulbs. And this is a nice effect already that we can use on our projects. But now let's try some cool stuff. We can use the animation delay property to manipulate when the animation of the circle starts, and this can give us some cool effects. Let's give it a try. I will go here and add animation delay 0.1 seconds times or variable. Each span will have a different animation delay according to the variable value. Let's try it. You can see we have this nice cool effect that looks like the circles are rotating around each other. Try another value, I will change 0.1 seconds to 0.2 seconds. Now you can see we're getting another cool effect that divides the circle into two halves that are rotating one after the other. Here's a suggestion. How about you go ahead and play a little with the animation delay and the animation duration values and see what cool effects you can get. 142. cursor menu animation hover effect: Hello there everyone. Welcome to another new lesson in the course. In this lesson, we're going to create another new menu hover effect. You can see we have this vertical menu where its links have a left border. And when we hover over the left border, you can see it moves to the right side of the link, and the link stroke gets filled by the color, giving us this cool effect. I will start here in my HTML by adding a UL, then an L I inside it, and an anchor tag inside that. Then I'll add data text for the first link and add inside the link. Then I'll copy that, paste it four times. I will change the text for each link. Now you can see we have about services, team, and contact. Okay, now let's go to our CSS and target the body. I will add display flex, justify, content center, align items, center, min, height, 100 VH background this color. Then I will target the U L and add position relative display flex, flex direction column and gap 30 pixels. Then I will target the L I and add position relative list style N. Then below that I will target the link and add position relative font size for EMS, text decoration, non letter spacing. Two pixels, line height, one EM text transform upper case. In order to make the text an outline on, I will add color transparent. The text stroke, one pixel, this gray color. Now you can see the link color is transparent and we have a gray outline around the text. Okay, let's keep it going. I will select the before pseudo element of the link and add content attribute our data text. Now you can see we have the data text here. Next to each link, I will go back and add position absolute. Now that we set the position to absolute, the data text is sitting right on top of the text link. It looks like they're one thing, but let's add color, this blue color. Now you can see the data text has this blue color and the original link text is below it or underneath it as an outline. I will also go back and add border right, eight pixels solid, our blue color. I will also add text stroke, one pixel, our blue color. Now you can see we have this blue border on the right. And the text also has a blue stroke instead of gray. Okay, now we want to hide the before pseudo element, this blue text and have it only show up when we hover over the link. I will go here and add width 0% then overflow hidden. Finally, transition 1 second. Now you can see the before pseudo element has a width of zero and it's hidden and the original link text outline is visible Again, I will go back to my CSS and say when hovering over the link, I will select the before pseudo element and add width 100% Now when I go and hover over any link, you can see the width of the before pseudo element increases again to cover up the link outline. While it's getting bigger, the border on the right is moving along with it, giving us this nice effect. But you can see the border is very close to the link. It will be nicer if there's some space between the link and the border. We can do that by adding some space around the link text as well as the data text. I will go to my HTML and inside the data text before the text of the link, I will add a non breaking space that is a special character in HTML that adds spaces in HTML text. I will add another one before the link text and another one after it. Now you can see the border has shifted a little to the left, and when hovering over the link, it also has some space on the right. And it makes it look much better. Okay, I'll do that really quick for all the other links. Now when I hover over any link, you can see the border is moving from right to left. Along with the growth of the before pseudo element, giving us our really cool effect. 143. CSS creative dots loading animation: Hello everyone. Welcome to this new lesson in the course. In this lesson, we are going to create this nice loading effect. You can see we have this effect where we have eight circles, Four of them are fixed, and the other four are rotating around them, giving us this cool effect. I will start here in my HTML by adding a div, giving it a class of box. Then inside it, I will add another div with a class of loader. Then inside that, I will add a span and add style. Then we will use CSS variables here. I will add I as a variable name and give it a value of one. Then I'll copy this span and add another seven spans so that we have a total of eight spans like you see here. Each time the value of the variable increases by one, 1-8 Then below this loader, I will add an H three and say loading. Then I will go to my CSS and select the body, A Display Flex, justify, content center, Align items center, then in height 100 VH, and finally overflow hidden. Then I will target the loader. Add position relative width 20 pixels, height 20 pixels. Then a temporary red background. Now you can see we have this red background that is centered inside the body. All right, now let's style the H two. I will select it and add position absolute top 50% left 50% transform translate negative 50% and negative 50% to center it vertically and horizontally. Then I will add font size 18 pixels, color this navy color. Now you can see the H three is centered inside the loader dive. Okay, let's keep going. I will target the eight spans inside the loader. Add position, absolute top zero left zero width 100% height 100% as well. Then I'll add a temporary blue background. Now you can see we have this blue background sitting on top of the red one. Actually, those are back multiple backgrounds. Not just one, but they are sitting on top of each other. But we want to rotate all of them by specific degrees in order to make them all visible. I will add transform rotate. Since we have eight spans, I will rotate the first one by 45 degrees, then the second one by 90 degrees, then the third one by 135 degrees, and so on that way, the final one will be rotated by exactly 360 degrees, since 360/8 is 45. All right, let's do that. I will go here and add 45 degrees times V. I will add our variable that holds these values in our HTML. The first span will rotated by one times 45, which is 45. The second span will be rotated by two times 45, which is 90, and so on and so forth for all the other spans until the last one is rotated by 360 degrees. As you can see. Now we have this star that has eight heads, but let's keep going. We will add the eight circles as a before pseudo element. For these eight spans, I will select the before pseudo element of the spans and add content empty strings position absolute top. Zero left, zero width, 20 pixels, height 20 pixels, border radius 50% Then finally, background color, this blue color. Then I will remove this blue background color and this red background color. Now you can see we have these eight blue dots that perfectly surround the loader. All right, now we want to select just four dots from the eight to change their color and animate them. We want the second, the fourth, the sixth, and the eighth ones. I will go here and add span nth child even. What this will do is it will select only the elements that have an even number, the second, the fourth, and so on. Then inside that I will add a background color, this light blue color. Now you can see these elements have a light blue background color. All right, let's create a new animation. Name it circle inside it. At 0.25% I will add transform rotate zero degrees and scale one. Then at 50% I will add transform rotate 90 degrees and scale 1.3 so it will get a little bit bigger while rotating. Then below that at 75% and 100% I will add rotate 180 degrees and scale one to return it to its original size. Then I will go up here and add animation circle 1 second linear infinite. Now you can see the circles are scaling and rotating. But since they are rotating around their center point and their circles, they don't really look like they're rotating. What we can do to make them rotate around the other circles is we can go here and add transform origin 60 pixels. Now you can see the circles are moving around the other ones, giving us our really cool effect. 144. text fading menu hover effect: Hello everyone. Welcome to this new lesson in the course. In this lesson, we're going to create this nice menu hover effect. You can see that when we hover over any link on the menu. This effect happens where the color of the link becomes semi transparent and this glowing green small text appears covering up the link text. It's a pretty simple but cool effect. Let's see how we can create it. I will start here in my HTML by adding a section inside it. I will add a UL, then an L I, and an anchor tag inside this L I. Then I will add a data text attribute and add home inside it. Then I will add home inside the anchor tag. So we will use this data text attribute to retrieve it and use it as the overlying text. You can see I just copied and pasted these links and just changed the text. All right, let's go to our CSS and select the section. I will add position, relative width, 100% height, 100 VH display, flex, justify content, center a line, items, center, overflow, hidden background, this dark gray color. Then I will target the LI inside the UL and add list style none. I will also target the anchor tag at position relative display block text decoration non text align center text transform upper case font size four, EM color white font weight 700, transition 0.5 seconds. Now you can see the links are looking much better. Okay, let's keep going. When hovering over the link, we want the link color to be a semi transparent color. I will say when hovering over the anchor tag, I will add color, this color which is just white, but with 0.1 opacity. All right, now when hovering over the link, you can see its color changes to the semi transparent color we want. Okay, let's now work on the small text. We will use the before pseudo element of the anchor tag. To do that, I will select it. Inside it, I will add content attribute, data text to retrieve the text inside the data text attribute for each link. Then I will add position absolute top 50% left 50% Then color this beautiful green color. Now you can see the green text is covering the links. All right, let's go back and add font size 0.35 M to make the font size smaller. Just like our example then, letter spacing, 40 pixels to separate the letters. Now you can see the letters are smaller and separated from each other. Let's keep going a little bit more. We want to add a little glow effect to the links. I will add text shadow 0010 pixels as a blurry value. Then our green color, I will copy and paste that value two times and increase the blur value each time. Then I'll add font weight 500. Now you can see the text is glowing due to the box shadow we added. All right, I will go back and add transition 0.5 seconds and opacity zero to hide the text. Then below that, when hovering over the LI, I will select the before pseudo element and add opacity one and letter spacing six pixels. We will animate the letter spacing property from 40 pixels to six pixels in order to get our effect. Just like that, when hovering over any link, the small text comes together and then the link text fades away. But we want to add some transition delay so that the links fade away first, and only after that the green text appears. Then, when we hover away, the green text disappears first, then the original link becomes white again. We can easily do that by going here inside the anchor tag and add transition delay 0.5 seconds. Then when hovering over it, we will add transition delay zero. By doing that, when hovering over the link, it will change immediately. But when hovering away, it will wait 0.5 seconds. Then we will do the exact opposite to the green text. I will go here when hovering over it and add transition delay 0.5 seconds. When hovering, the delay will happen, but when hovering away, it won't happen. You can see the link animates then the green text when hovering away, the green text animates then the link, giving us exactly the effect we want.