10 (Amazing) CSS3 UI Design Projects- Part 1 | Rahul Giri | Skillshare

10 (Amazing) CSS3 UI Design Projects- Part 1

Rahul Giri, Web Developer

10 (Amazing) CSS3 UI Design Projects- Part 1

Rahul Giri, Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (3h 49m)
    • 1. Class Trailer

      6:00
    • 2. Mobile First Responsive Card Layout For Your Blog

      18:50
    • 3. Facebook And Youtube Like Loading Animation

      12:31
    • 4. Facebook Post Design Crushing The HTML Structure (Part 1)

      13:52
    • 5. Facebook Post Design Crafting Main FB Card Section (Part 2)

      17:29
    • 6. Facebook Post Design Building Comments Section (Part 3)

      19:46
    • 7. Breezy Typing Effect Animation For Your Headlines

      18:29
    • 8. FullScreen Overlay Navbar With Circle Animation

      24:30
    • 9. Luxury Custom Scrollbar for Your Website (in Webkit)

      11:00
    • 10. Creative Background Shape Divider

      16:10
    • 11. Smooth Gooey Menu Buttons

      19:57
    • 12. Building Lusty Animated Buttons

      19:41
    • 13. Fascinating Gradient Progress Scrollbar

      13:45
    • 14. Bonus: Creative CSS Shapes Design

      17:03
    • 15. Final Thought

      0:26
18 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

331

Students

--

Projects

About This Class

This is the unique class where you’re going to learn “how to build real-world” UI design projects in pure CSS and almost little (or no) Javascript.

In this class, we gonna build 10 (Amazing) CSS3 UI Design projects you can use instantly on your website and also going to deepen your css3 knowledge.

Here are the 10 projects you gonna build.

  1. Mobile First Responsive Card Layout For Your Blog
  2. Facebook And YouTube Like Loading Animation
  3. Facebook Post Design
  4. Breezy Typing Effect Animation For Your Headlines
  5. Full Screen Overlay Navbar With Circle Animation
  6. Luxury Custom Scrollbar for Your Website (in Webkit)
  7. Creative Background Shape Divider
  8. Smooth Gooey Menu Buttons
  9. Building Lusty Animated Buttons
  10. Fascinating Gradient Progress Scrollbar

+1 Bonus Project

Downloadable Materials

All the exercise files and downloadable material included.

To see the quick preview of the projects, please watch the class trailer.

So if you’re ready to build these 10 amazing UI Design projects then join me in this class and let’s get started with our first project.

Meet Your Teacher

Teacher Profile Image

Rahul Giri

Web Developer

Teacher

After graduating and holding a degree in "information technology," my professional career began, starting web development and graphics design career in 2013, I never stopped learning new programming skills and graphics designing.

I did not learn web development and graphic design skills in college. It's self-taught skills. As a self-taught developer and graphics designer, I had the chance to work with hundreds of online businesses to build their websites and train their employee on front end programming.

And that's where it ticked me to broaden my horizon and record these most up to date training train you with cutting-edge front end programming skills that will put your career on fire.

I can't wait to see you inside my life-changing classes.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Class Trailer: Welcome to ten Amazing CSS3. You are design projects where you're going to code ready to use your design project with CSS. So without any further ado, let me quickly show you those ten amazing CSS UI design project you're going to build in this class. So this is going to be your first project, and this is a mobile-first responsive card layouts, as you can see, index stop, it's a three-column grid layout, but in tablet, it's a two column grid layout. And in mobile, it's a single column layout. So it's a mobile-first layout. And as you can see, our current UI, when I heard about this model, this article titled chains to Matt is thin color. If I go to Inspect Element here, I can change this root color and you see, the entire team actually changes. You see, you can change entire theme in just one go. So it's a really powerful, and this is your first project. So this is going to be your next project where you're going to learn that how to create these facial post and YouTube video like loading animation preview. And this is you see once you get into YouTube or you logging into Facebook, and if you have a low speed Internet connection, then you will see this loading preview by Facebook and this one by YouTube. And you're going to use these loading animation preview for you articles. Next, you're going to learn that how to create these fascinating Facebook post design with Cummins and without comments, you say this exactly look like OK, fiscal post UI. And obviously this is response you, here's an extra preview and here's the iPhone acts has looked like in mobile devices. You say, this is looking good in mobile devices to, so it is totally responsive. Next, we're going to learn that how to create this step typing effect animation. And you see it's typing letter by letter. So let me refresh it again. You see letter by letter. Now we have another one which is smoother typing effect animation. So let me show you now this is going to be smooth tapping effect animation. See smoothly typing it. And you will learn how to build these two type of typing effect animation, the steps and the smoother typing effect animation, which is this one. And we're going to be lit in pure CSS. So next you're going to learn how to create these fullest skin overlay navigation with a circle animation. You see this is the circle animation and this is your main menu. So you will learn how to create these Howard effect. And obviously this is totally responsive. So inspect element and here you go. You see this is how it's gonna look in Python acts. Is it click here? And this is fully responsive. Now let me show you one more thing. Open this menu and click here. You see I can play with these values right here. So if I see a 30%, you see that now our menu appearing as a big circle and this is a creative look. So there you go. You see, this is how our many operating. Let me just refresh it. And again, we are back to our fully skin menu. Next we're going to learn that how to create these custom luxury scroll bar for web gate. And you see when I heard about this, it's also changing. It's a theme. So it's switching the collision between this scroll bar and this scroll bar pump. And in this project, you'll learn how to build this luxury scroll bar for your website. Next you're going to learn that how to create this, create you background shaped divider with SVG. And this is one Virgil, but is a mini version you will see in this project. For example, here we have another version and you will see even more virgin in this project. In fact, you've remastered at creating these creative background shaped divider with SVG. Next, you're going to learn that how to create this a fascinating way buttons for your next project. And you see that all buttons are smoothly transitioning to its relevant state. And obviously, this is a response to you. So if I go in smaller devices, this is how it's going to look and you're going to learn how to build it in this project. Next, you're going to learn that how to create these animated buttons. So you see the slide from left, slide from bright light, from top, flight from bottom. And then we have this grow box gray ellipse, grow skew forward, gross Q backward and grow spin. So you see these all are intermediate buttons. And again, you can change its thing completely in one single go. Simply choose anything I want, and then I can do the same thing right here, but I just make it a little bit darker. And you see in just a couple of links, I have changed the entire theme and it's index is also adopt the theme color. And now finally, we have our last project, which is the tenth project where you're going to learn that how to create these gradient progress scrollbar. And this is totally designed in custom way. Means you can simply just put it at the right. Oregon put it into the left. So here is either, I placed these gradient progress call bar to the left instead of right. And you see it is totally working. And you can say at the right, you can't see that default scroll bar because it's totally hidden. And there we go. This is a progress bar in the left. And now behind the scene, I again placed into the right. So this is going to be your tent project where you're going to learn how to build this. And apart from our ten you I project, I have one special bonus project for you. So here's a bonus project. You see that I have this parade and our contained is flowing around the separate. So C, when I have all this one, you see, I've just replaced that parrot with this Ice Age squirrel character. And you see that our content is now flowing around this currently may. So when I go out, you see now are continuous flowing around our parrot. And when I heard this one, our content is flowing around this squirrel character. You say, it's very powerful. And plus there's a few extra version of it, see in this project. And that is going to be surprised for you. And by the way, inside this class, you can also request a specific eugenic project you want to learn or build for your next to map site and most requested who are digital projects will be recorded in my future class. So Hi there, my name is rivalry and I'm working with the CSS from more than 70 years now. And I have recorded 50 plus hours a video just on CSS. So for ready to walk on those amazing ten UA product with me, so you can use it in your or your client's future website. Then roll up your sleeves, Firebird goiter, and let's get started with the ten Amazing CSS3 UI design projects. 2. Mobile First Responsive Card Layout For Your Blog: Welcome to this movie where you are going to learn that how to create these mobile-first responsive card designed for your block. And this is how it's going to look like. So here you see that we have this single card and inside we have this featured image than this category tag, which is health. You see it's nicely style than we have this article titled article description, then article author, and finally article published date. And one thing you can notice here is that when I hover this one, you see that the color of the article title is automatically changed to match our primary color, which is blue, and we have people, nine of them. These all are responsive. So if I tried to resize it, see, this is nicely fatigue and it's pretty fun. So I see that as soon as I hit tab it breakpoint, it's turning to to Colombia to see here its tongue to currently out here. We have three column, here we have two column layout. And then when I hit this a mobile, a breakpoint, you see it's turning to one column layout and this is by default. So this is mobile first design. So if I go to Inspect here, so you see there's iPhone AC simulation is turned on. And this is how it's gonna look in Python acts, which is pretty neat here. This looks really beautiful. And this is what exactly you're going to learn how to design in this video. So let me go to my code editor and let's get started. So here we go. I'm on my way escalator and we have this simple STL file to walk with. Well, there's another filename, cardo CSS. We're gonna write our CSS code. But before, let me quickly explain you the estimator markup of this page. So here we have this main tag, which have a class of cars. So basically inside this main tag, our ALL card gonna go, For example, we have this single card like a, a and a C that I used this article tag, which have a class of Car. Now each article or COD consists of two section. The first one is the featured image, which you can see right here. This is the featured image and the next section is the car body. We are, we will display some card information like article category, article title description, and article meta-information, like author of the article and date published. So this is our single card. Well, obviously we're going to have to tell nine card. So other eight, I have already copied MAC reports from the paste it right here. And if I save it, you'll see that now total we have nine cards. And again, HTML structure of every single card is same. So there we go. This is our estimate structure where now let me tell you that we have another style which is base style.css, and this is some default styling. For example, I have applied some default styling to our body tag. For example, font, family, background, padding and margin top. We also pride this default styling for image which is with a 100%. And this is very important because if I just try to resize it, you see now our images totally responsive. But if I get rid of this weight here, you see that now our image is going to behave really, really bad. You say that now this is not a 100% responsive. So that's why you see this is how it's going to look. So as soon I just un-comment this with a 100%. It is going to make them fit in their parent container. And that's very powerful. And again, there's a default styling for a paragraph which is line height 1.8 RAM. And this is the padding enough, which is a very simpler, right? So this is a simple default styling. And again, we're not going to work on this one. So let me get rid of it. So let's go ahead and first design how a card, and once our card is fully designed and deadly for mobile, then we'll move to tablet and desktop Virgin and make it truly responsive. So let's go ahead and tie our individual cards. But it's very easily images go right here and you see this is an article to have a class of cards. So what are we going to win go right here and we can tag it is article from Yep. And we can say head, God. So basically we are saying that fine. All the article which have a class of card, well basically every single one of them have, so that's why it's not target every single home. So that's very important. Now what we're gonna do here and make this background to be white. This is very important. I'm gonna just make it white. So this is pretty much a different color than its background. So now you see that are all card is connected together. So let me just add some margin bottom here. Let's make it to Ram. And not to say we do you see that we do have this margin bottom right here. You can't see properly, but let me just apply the box shadow here. And I have copied McLean boots on a paste it right here. And now we can see our card clearly. You see that there's a bach shadow and this is how our card looks, which is pretty much need. But we need to add some padding around a core body so we can go right here and you see this is a car body. Well, we can copy it. We're gonna go right here and I see a dot card body. And here we're going to apply this padding. Let's make it one gram and I've saved it. You see that now we got this padding in our car body, which is looks really good. You say. So now our cards are looking good. You see the size another is perfect. Now let's move on to the car body and let's tie these yet. So first, this is a card category which is going to be tag, which is going to be right here. So this is going to be a little Lend-Lease tiling. So what we'll do, we'll skip it for now, will first go ahead and fix this one. You see that this card, title or article title is now in capitalised case. That means that first letter of every single word, not capitalized. But here you see in second card, this is not the case, so we need to fix it. We need to make the first character of every single word to be capital. Well, this is a very easy fix because you can go right here. And I say this is a heading two. So what we can do individual score right here. And we can see here x2, which is heading to. And we can simply say at x transform. And we can sit here capitalize now to 70 c. First character of every single worst is now capital. You see, no matter how you write this, the first character of every single word will be capitalised. Now let's go ahead and move on to this article meta-information, because our paragraph looks good. So for that, let me just go right here, which have appellant class of metta info. So we can easily just get all the styling to this meta info. Well, it's very easy. You can go down here, can simply say Jal Mehta is going to be infinite. So first of all, what I want to do is that I want to just make it uppercase is gonna be text transform. And let's make it uppercase. And because I made it upper case, let me just go ahead and just decrease this font size. And let's make it 90%, right. Now it's little bit low, but it's totally fine. Let's make this font weight to be a little bit too bold, which is 700, I think, fine. And then I'm going to give it a color off this one right here. So first we need a separator between these article author and it published. And the Secretary is going to be dash. We can elude us pseudo-selectors. Let me just go down right here. And you see that we have this class author, right? So what we can do here, we can just go right here at the way down. And you can say here, MyTime for them authors. So now we can say here, after this is a pseudo elements and actors. And then what we can say, we can say it contained and then what container, where it's going to be dash. And I've either save it, you see that now we got dash after this author name, which is pretty powerful. Is this exactly we are looking for. But now you can see that this author name and this date per base is tightly close to this task. So we need some breathing room. We can add margin here so you can see on margin and let's make it a 0 from top and bottom. But 0.5 Rahm is going to be left and right. And I see that we got this reading room, which is perfect. And next up, we're going to need here color. So we're going to describe the color because we want to color it in a different color. And this time I want to make it something like Grace who is going to be BBB. And there we go. Now, I want to give a different color to this date published, which is going to be blue. We can go right here and I can grab this published date, and here is going to be dot publish date. And then I want to give it a color. It's going to be blue, which is this column. There we go. So now the starting tableau, and obviously we're gonna need this color again for our category tag. So let me just go up here and let me create one root variable, which is going to be custom variable is going to be Color. And then I give it this color right here. And then the magic thing is that we can just grab this color, get rid of it. And then we can say variable. And now here I can say, and now if I save it, you see that we've still got this color. Now it's time to style our category tag, which is very easy. Let me just go right here. And you see that we have this category class. So let me just go ahead, grab it and I go down here and I'll just paste it right here. So get 80 class. And now what do we need to do here that we need to just push it up right here. So for that, we need to use this position absolute cervix and say, hey, position absolute. And you see it's not going to walk. You see that now? It's setting to a right here, which is not correct. So what will you do here? We need to up here in the card and we say a petition to be relative. So now we're making our position absolute do related to this particular card here. Now what we can do here, we can go down here and I can set here top. Let's make it one of them. And then we need to put it into the left. So it's going to be top-left and still going to be one RAM, save it. And I'll see it's appearing right here when you can't see it because let me just go ahead and give it a background. So again, we're going to use that variable of the color. So it's gonna be culled, save it, and see that now it's a current, but let me just make this color to be white. So let's make it right. And now you would see now you can see it right there. Yeah. Oh, it's right here. So let me just go ahead and add some padding. So is going to be a padding. And let's get 0.5 RAM top and bottom. And one of them. Left and right. And this is Hart's look. Now let me just go ahead and just make this text to be appear in uppercase. There's no text transform is going to be uppercase. And then we're going to need to just reduce the size. So we're going to font size. And let's make it 80%, which is quite low, but this is exactly what we're looking for here. And then let's sit here border-radius. And let's make it 45 pixels. And yet, this is how it's look. And you see that padding is quite a lot, so let's make it 0.2 gram. And there you go. This is how it looks. I think now it's looking perfect. There you go. And again, if you want to put it somewhere else and if for example in right, it's totally up to you. You can just sit here right instead of left. And if you want to just appear on the right, right. So it's just one away. So it's gonna be laughed. And there we go. So it's basically one property of a n. Of course I have some box shadow, someone just paste it right here and then go, this is a very shuttle box shadow. You can't see it properly, but I just wanted to put it any way because this actually looks really good, right? So then we go, this is our scott. So this is it, this is our card styling and this will look good by default in mobile devices is mean this is a mobile-first design. Now, we need to make it two column layout in tablet and three currently out in desktop. So here I'm gonna target this tablet device first. So for that, we're gonna make use of media queries. So it's gonna be media. And here what I'm gonna do, I'm gonna say here min-width, where let me tell you that the minimum width of the tablet according to Bootstrap is 768 pixels. So not let's first check that our mid equity working properly. So for that I'm gonna use this body here. And when I say this background to be black, if I save it and if I just try to make it, you see that now at this point, our body bags on turning into black, and that means our media query working properly. So now at this point, we want our cardio to be two column layout. Well, for that, you see that here inside this main tag, is there our ALL card located? So basically when you target this one here, and this is going to be flex container because here we're gonna make use of flexbox. We can go right here. We're gonna get rid of this body because we're not going to need it. Now here I'm at target, our main tag, which have a glass cup cards. And now here I might use this flexbox as a solar applied. This one single property you see, there's a major change is gonna happen. You see, let me just show you, let me just click here. See now our, every single card is turning to this one single horizontal line and this is scrollable. You say this once it will property have aligned them in single line horizontally. And this is used to be pretty tough, brighter flexbox, but now this is very easy, but obviously this is not the result we are looking for. We want it to turn into two column layout. Well, for that, we're gonna use flex items telling. Let me show you what I mean. So here you see that I have applied this flexbox in this main tag, which is basically a car's while this now become flex container and every single direct child of this card is now flex item. So we have worked on this flux container, but now we need to use a property which is specific to flex items. So for that we can go right here and you see. That every single item which have a tag of Article and class of cars. So basically we are talking about this one. So what I do, I can just simply copy this one. And here and I see that this one is going to use this flex items, flex property, which means there is a flux. And basically next property is the shortcut of three flex item property which is flax grow, flax shrink and flex basis. So first is gonna be flux rope, which is I'm going to just run into 0. Then it is going to be flex shrink, which I'll make it one. And that is going to be flux basis. The actual be tough flux item are actually costs. So we can set a default width in this case, when any two column layout. So we had a 100% of it for two column is going to be 50, 50%. So I can easily say at 50%. And now if I save it, if I try to just unknown go to column C, it's still not working. And that's because I need to set here flax wrap property to be wrapping. So flux is going to be rather, well by default, it's set to no rap. So if there is an overlap, it will not wrap it to the next line. But now if we turn into ramp, now I see that. Now it's turned into two column layout. You see? That's exactly we are looking for. So took only out, but again, we need some gutter between these two cards. Well, it is very easy because we need to just, you know, we need to make it like say 48%. So if I say 48%, then we'll have total 4% left in between 1448 is going to be 96. So there's a fourt percent left and you can see this 4% right here. So we don't want this place to be right here, and we want it in-between where it's very easy. We can just go right here and we can use your justify contained. And let's make it space between, not around. So if I say the space between, now I see that we got that space in between of this cost, which is pretty neat. Again, we have many values. For example, you can set your space around space evenly or something like that. But again, this is not crash course on flexbox. So again, I'll be quick here, so it's gonna be spaced between. And let me tell you that if you want to give a specific gutter or margin between these two cards. Well, we can do so by using this calc property which the CSS function. And then what we can say here, go ahead, make this 50% and then minus one RAM, it's basically just go ahead and use 50%, which obviously going to be two column layout because this 3, 3% to a 100%. But we're subtracting this one RAM from every single 50%. And that's why now we have to ram because we have two column layout. This gap you're seeing here is actually to them. There we go. This is your two column layout. But again, we want to turn into three column layout on desktop. It's very easy. Again, we're gonna do the same thing. We just grab this media query. You gonna go down right here. And this time we're going to use your 992 pixel because according to bootstrap, our Desktop Start from 992 pixels. So minimum width or the textbook is 902 pixels. And that's what exactly we're targeting here. So what we can do here, we can get rid of it because we don't have to touch this length. It's ultimately going, going to get from this, right? Yep. So here, because it's going to be three column now you can just make this 33.33. Yep. And that's it. And soon I hit plenary to see that now it's time to three-column layout. You say, it's a very powerful, so see you now it's working. So this is by default one column layout. You see now this is a two column layout in tablet and three-column layout index dot. You see, it's very, very powerful and this is it. So let me just go ahead and use this simulator. So it's gonna be inspect element. And if I simulate here I see the iPhone X. This is housing or look in iPhone X, say, and again, this is a mobile-first responsive is anchored. So then we go, this is how we can design this amazing mobile-first responsive card. But let me show you one more thing is that when I heard about this Cartier, this title should change its default color to be this, our teen color or primary color. Well, it's very easily binges go up right here. Go make it small here. And let me just due to this S2 tight area, this is our title exactly. When I hover over inside this card, then this title color is going to change. So basically what we do here, we can just go right here, you see, this is our card. So what I can do, I can just go grab that card right here. And I can say here on how and what I want to do when somebody hovers around this car where I want to change the color of this article title. So in this case you see this title here, and this title is the title of this card. So what I can do here, I can use descendant selector. Yes, I can say here simply title. Or I can say at T2 because this edge to have a class of title. So I can use either S2 order class title or both. It's totally up to me, but let's go with title here, so title looks pretty familiar. And then what I can do here, I just want to change its color. Yep. So here I use this variable, our color, and that's it. Yep. Let me show you. So if I just go ahead and if I had this one C, C, it's instantly changing its color, which is pretty powerful. And again, let me just touch on this cursor to be 0 so I can sit here GFS or to be an alpha. How are they going to see that now it's starting to pointer, which is pretty neat here. So this is working, financing. Amazing. This what exactly I'm looking for. There you go. This is it. Now let me tell you that, because we're using this variable color here, you can play with it. You can simply say, hey, like tomato, our pink alerts in the tomato. And when I have got this one, see, this is also going to change into tomato. I see. It's insanely powerful. Isn't just making that scene. The color right here, you can see here is something like a purple in Tony to pop up, which is very powerful. So now let us go back to our blue, then go and Yup, this is how you can create these mobile first response, you car design, very, very powerful. 3. Facebook And Youtube Like Loading Animation: So this will be, you're going to learn how to create this. A fascinating loading animation previewed like a Facebook n due to car. So this is the simple with only texture loading animation preview. Then we're going to also show you the same loading on this Facebook card. You see this is a Facebook art and this is how it's going to look like. And then we also have this YouTube card, and this is how it's going to look like on YouTube loading animation. So in this movie, you're going to learn that how to create this, loading an image and preview. So if you're ready to roll and then let me go to my co-writer and let's get started. So here we go. I'm on my VS Code Editor and we have the simple STL file to work with. Then we have another finding. App.js is where we're gonna write our CSS code. But as of right now it's empty. And then finally, we have another final int, default dot CSS, where we have some default CSS code for our project. So let me show you the live preview of our project and you see it's right here. It's a very simple project with the minimal styling. And that's because we only have the seven to eight lines of CSS code, and that's it. And you see this quote is pretty self-explanatory. Yup. You see that we have this font family to be ADL. Then I'm setting its font-size to be 120%, which just to make it look a little bit big. And then we have this bit to be 40%, which basically wait, you will see here. So it's a 40% width and then I'm setting the background to be white. And then finally, I have one single styling families tag, which is a margin-bottom to 0.5. rim. So I'm just putting some margin or a space between these plates and that's it. So this is the only CSS we have. Now let us go ahead and close it. We no longer gonna need it. Now let me go to index a list1 and let me quickly explain you the HTML structure of this project. And you see, we literally had this eight line of HTML code and that's it. Yep, we have one heading that we had, this three paragraph and three list and that's it. So let us just go right here and you see that we have this one heading than this a three paragraph and these three list items, That's it. So now let me just go right here and let's get started with our CSS code. So here what I'm going to, I'm going to use this loading class because this is going to be loading in emission. So I'm gonna use that class and I will just simply apply it all over the place. So let me just go ahead and first, I'm just gonna get a background and let's make it something like a grey color. So it's gonna be 0x200, which is very simple. You can see it. And then I can grab loading glass and I'll go right here and I'll just give it a class year and pasted. So I'm just applying this a loading class to be every beer where I want that loading effect animation. So I wanted everywhere including these list items. So there we go. Now, I can just go right here and you see that we have that a grayish background all over the place. So this is exactly what I'm looking for. Now. Let me just go right here. And just in case you can't see, I can make it this residue which is black and we have it right. Great. So let me just go ahead and let me just get back to our gray color. Now you see that we can read this sentence and we don't want it right. Let me just go ahead and make this color to be transparent so I can say hair color and it's going to be transparent. Obviously, I cannot say display none or visible limb because when I do, it will go to remove it from the DOM. And we don't want it. We just want this color to be transparent. So it will be mixed with the background and you can't see it. And you say, Now, you cannot see or read the text. And this is what exactly we are looking for. Now you see that it's giving a kind of a feel of loading, but we don't have that loading animation. And I'm gonna create it in a bit. But first, let me just go ahead and add that border radius. So for that limits it's gonna tear. And here I'm going to say border radius. Let's make it five pixels, because I think that's pretty neat here. There we go. We have this shuttle border-radius. Again, you can go as much you want. For example, I can say a ten pixel, but you can just make it fit. Or your test ten pixel is quite good. It's looking really good. There you go. So now let's go ahead and walk on that loading animation. Well for that, let me just go right here. And obviously we're gonna need here loading animation. So I'm gonna just create that and it's gonna be loading. Now this is going to be a bit tricky. So hear me out. Now, just think about it that how can create that gradient loading animation? Just think about it. So let's say we have this, a 100% background and we have this color. But again, if you would just rotate it in a same place, it is not going to walk. Let me show you. Let me just go right here. And the 0%, or in the very beginning of animation, I want this background position to be at dispersion. Let me show you. So I want my background position to be on a 150%. And at the very end of the animation, here, at 100%, I want this spectrum position to start from 0 to 50%. There we go. So this is what he, Zach I'm looking for in the very beginning, the background position will be on a 150%. And at the very end of the animation, that wagon portion will be 050%. Now, obviously, we need to use this animation. So I might use this animation keyword and he's gonna be loading as over coast off 1 second, because it's going to be in finite loading. I'll set it in finite here. Now if I go here and you will not see that any mission yet, because there's a two important thing missing. And the first one is that you see that I am using this solid color. And because we are using this solid color, even if I move this background portion, at this portion, you will not see any difference because the color is a solid curve which is a constant in equity position, you go. So what you need here, well, we need more than one color. And for that, we could use your linear gradient because the linear gradient have more than one color in it. So for that, I'm going to just paste here that linear gradient. I have copied my keyboard and you save it right here. It will start from a 100 degree. And then at the 30% of during this gradient, we will see in this light gray color. And then at the 50% will see this is the lighter gray and then little bit darker grade at the 70% will start moving these collectively different beg on position. You will see that animation effect. So now if I save it and if I go here, you will still not see that animation yet because we are moving this color on the 100% beggar on size. So what do we get to here? We can just go right here. You can see here background. And it's gonna background size and it's going to be 300%. So now we have 300% background and we're moving these color between these a 100% to 500% to 50%. Now if I say, what if I go here and you'll see that animation, you see it's a pretty fast and you're gonna make it slow if you wish. For example, I can see here 1.52. If I go here and see that now it little bit slow and it's giving a real loading animation. And there we go. This is our loading and emission preview. It is working fine for our text. So if I add even hear more text, for example, that's another paragraph here. Yes, it's still gonna mock, doesn't matter, right? This is your loading animation. Now behind the scene, I'm gonna load that Facebook card and you'd have card. And we can apply this loading animation to our Facebook and due to car. So let me load them behind the scenes. So behind the scenes, I have loaded these Facebook arc and this YouTube card you can see right here. And all the suite of car have the same image. Don't worry about it because we're going to just working on the loading preview animation. So all want to have the same loading previous animation. So it doesn't matter. Just a YouTube layout to just show you how it works. And here you see that this is what we have built in just couple mint back. So let me just go to Facebook postcard and let me just go to our equator. And there you go. This is our loading class, and I have loaded it in my this coater here. So you see that it is linked right here. And in style.css file slinky, you see it's loading dot CSS. So let me just go ahead and close it out. And now let's go ahead and apply the same glass everywhere. So you see that I want to apply that loading on this avatar, then this entire name than this date published and all this stuff here. So let me just go right here and let's start with this avatar. So unless you have loading. So if I just do that, if I go here, you see that now, you see it is not working. It's not working here. But you can see at the background, it is there. But again, it's not working, so we'll get back to it. But first, let me just go ahead and apply this loading glass everywhere. So I just want to apply it right here. So if I say we'd figure here to see that now it is actually working on our names. So there we go. This is working on name. Now, let me just apply here. And you say, yeah, it's also working there. So let me just go down here. And I want to apply right here. So save it. And you see it is actually here, right here. So this is also working. And if I go down here, you see that I want to apply on this class here. So class based it. And then it's gonna be class based it. And then it's gonna be class based it. So we are applied in our paragraph. So if I were to see that now our pair of is loading, that's perfect. Now we need to apply in this image, which is the featured image. So I'll just go right here and apply it. And I see it is not working on the image. So that's a problem. We need to fix it. So we can just go down here. And I want to apply this loading on this entire social left here, which is right here. You see it is not working here. So we'll get back to it. But because this 22 K is a text, we can fix it. So we can apply the same thing right here on 22 k and it is going to work. Yeah, it's working here. Now. We need to just go ahead and apply right here at this part. While it's going to be easy, they go, if I go here to see that this is also loading. So you see that the some part is working, but these images are not working. So how can we fix it? Well, it's super-easy because you're seeing it that in the background, there's a loading animation. But because these images at the top, that's, I can't say. So what are we going to hear? We can decrease the opacity of image to make it 0. Begin go right here. And you see that this particular image is a child of this loading. So let me just go right here. And what we can do here, we can grab this loading class, we can paste it right here. And then I tackle this image. So find all the images which is inside this loading class and apply the styling. And again, we can just decrease the capacity to be 0. That's it. Yep. If I go here, you see that now it is started walking. So there's a Facebook loading animation preview, say it is working. And that means that you can use the same loading for your own articles or your card, etc. Yep. So now this is your Facebook one. Let's go ahead and quickly do that for our YouTube cart. And again, it's going to be exactly same. So let me just go right here and let me go to Judo. And you see that here, our image located. So let me just area loading. Say wait, if I go here to see that now it is loading. There we go, it's working. And then we can do the same thing everywhere. For example, let us apply here loading. And then I can give it a class here is gonna be loading on a title. And then loading is going to be on Channel him. And then loading is going to be on this to just get rid of it. We do not need it if accuracy that we do have this position. And again, this is going to depend on the title size. You said the scary-looking big. That's because we have this title into line. Now you see that they are looking in one line. It's really going to be dependent on the content. But obviously, you can always just make these content to be limited. So let me just write here and because we have the same thing in every other stops, so let me just go ahead and get rid of everything and then we can simply copy and paste. Yep. It's like I say, I have 2345678. That's it. So if I go here to see that now we have that 8X card loading an image and preview. And there we go. This is your YouTube card, an emission preview, and this is our original project. So there we go. This is how you can create your amazing loading, an emission preview. So this is it for this movie. Thanks for watching. 4. Facebook Post Design Crushing The HTML Structure (Part 1): So welcome to this project. In this project, you're going to learn that how to create this fascinating Facebook post design in CSS. So this is going to be a hell of a project. Now let me tell you that this project is going to be little bit lending. So that's why I want to cover this project in three video. So in the very first video, which is the one you're watching right now, I'm going to cover the essential structure of this, a Facebook postcard, which is really important to understand in order to successfully design this Facebook card, even in this first video, we also want to write some default CSS code for this card. And in the second video, which is the next one, we actually going to design our Facebook car without comment, it means that we are going to design this section. And in third video, we're going to design this a Facebook car with comments. So we're gonna work on this comment section. And we also want to make this Facebook card response you in that video. And with that, we ought to want to add this another card in our final video. So if you're ready to learn how to create this amazing and a fascinating Facebook card. They let me go to my code editor and let's get started. So heavy go, I'm on my VS Code Editor and we have this estimate file to work with. Again, this is not a simple as HTML file. This is quite big, but the card we're designing is not a simple card, is a Facebook postcard with command. And this is going to be really fascinating journey to create these kind of card because you are going to learn a ton of things on this project. So get ready for that. And now you know that we're going to cover this project in three video. So this is the first video where I'm going to explain you the HTML structure of our Facebook postcard, because once you nail down the estimator structure, then it will become really easy to design it. And I know that these kind of estimates structure looks scary. But don't worry, because I'm going to explain every line of this code in complete detail. So you will not have even a single bit of doubt before moving to the next video where we will actually start designing our car. So before explaining you this estimate structure, let me just quickly show you that what are the files we're going to work with. So here you see that I have this FBI cardo, CSS. Where are we going to write our CSS code? And again, there's already coded in dust because again, I want to make you understand discarded structure and because it is already style, you will going to understand it better. And again, once we start designing our card, we're gonna get rid of this entire code and we're gonna just recorded. So as of right now, let me just put it back and let me just go right here. Here you see that I have this avocado CSS. We're gonna write ASA score. Then we have this base style.css. We're gonna write our base and default styling, but we will get back to this later in this movie. Here, I have these images. I have the actual card image you see right here. And then we have this avatar, which is my first avatar, and this is the second my avatar. And you see that I am using this avatar right here. So this is going to be a manifesto tab. And then on the coming, I'm using this avatar right here. And then we have this icon, which is a heart icon. Then we have hug and lice. Well, this is basically SVG file. So you see, I'm talking about this one like heart and hub as it is. So here, let me just get rid of this car because we don't need that CSS style analogous is go ahead and explain the estimator structure of this God. So here you see that I'm using this article tag for our epi postcard because technically every Facebook post is a kind of article. So this is the most semantic tag I found fit to this Facebook postcard. So there you go. This is our actual Facebook postcard. Now, inside this one we have three section. So the very first one is the header. Then we have this main body, and then we have this footer. This is the three main part of our Facebook postcard. Now let me explain you one by one. So let's start with header. So you see that in Facebook post header, we have two section. This is the first one which is the left part of the header, and this is the right part of the header. Let me show you. Let me just go right here. And you see that I'm talking about this part here. So this is the Facebook called header and we have this left part, and then this is the right part. So left and right. So now let me just go right here and you see, let phat, we have this author, our time. In this case, this is the author of battle I'm talking about, right? And then we have this author named, you see its role, Gary. You can see it right here so rapidly is with Lila queen. And he said how agree is with Lila queen. So this is going to be the author name and then we have this date published. In this case, it published on today at 10:24 PM. And you see it right here. And you can also see that I'm using this icon here. While this is a Font Awesome icon, you see, this is a Font Awesome icon. And let me just go up here. You see I'm using this font awesome CDM criteria. Well, you can just simply copy this one or it can go to this Google and search for font-awesome CDO and then hit enter. And then you see that we're going to get the Syrian js.com click here and then copy the very first link and paste it right here. And I'll just go right here. And let me just go back here. And then now search for foreigners and five, and then just go to ICANN and then here, search for you icon. In this case, let's search for Globe. And you see that here, I am using this globe, America's click here, and this will take you here. Now this the court I'm talking about. I can click right here. I can go right there. And let's go here. And I'm going to just zip, just replace it because it's exactly the same. Save it. And now you see that we still have it. This is how I'm using photos or icon if you're not familiar with Font. Awesome. So there we go. This is the left part of our header car. Let's go to the right part. You see the right part. There's only one icon, which is Facebook post menu and even sweet right here. And again, this is the Font Awesome icon. So this is your header part. Now let me just go ahead and collapse it. Now let's go ahead and talk about this card body. So just click here and you see that in current body we have two sections. The first section is going to be the text of the body, and the second one is going to be the media of the body. Here you see that we are talking about texts right here. So this is the text part, and then this is the media. Well, at this point, this is image, but it could be a video or any media format. So there you go. This is a simple facebook postcard body. So this is it for car body. Let me just collapse it. And now let's talk about this Facebook photo. Well, let me tell you that this is quite big. So here, let's start with the second, which is Facebook postcard footer, which is a social proof section. Let me show you and talking about this section right here. You see this is the social proof section because it's showing that how many lives comment and share this post tab and that's associate proof. So let me just go right here and you see that we have two section, the lab section and the right section. And again, the lab section is right this one and light section is this one. So I'll just go right here. And you see that in the last section, we have these three image, which is, I can like heart and Hub, which is right here. This is a like heart and hug. And then there is a 22 cases here. So I'm just putting it on a bouquet, right? And in the right, we have these two 12 comments and 20 to share. And you can see right here, do you want to comment and 20 to share? So this is the social proof section. And I'll just go right here. And now let's move to the next section where you can react on any post. In this case, we have three item in this section, which is a like comment and share. So you can like the posts, you can comment on the post and then you can see are opposed. So I'm talking about this section. This is the post react section. Now let me just go right here. And again, I'm using this Font Awesome icon. You see, I'm using this thumbs-up Chat icon, and this is again the shortcut or Share icon, right? So let me just go right here. And now let's move on to the next section, which is the comment section. So here you see that here we have this comment section. Now let me just go right here. And you see that this is the first one, is obviously you can load the previous comment. In this case, this is your view. 25 more comments. Now we're gonna move on to the next part, which is this one here. And you see this is actually come into box coming, which means it's a previous comment. And here you see that I have this author avatar, which is, you can see right here. So this is the author, our Don. Next up, we can just go down here. I see that we have this commit body. So I'm talking about this section here. This is the command to body. Now inside this commit body, we have this comment author, name than actual comment. You see, we have it here. So this is the comment author name and then actual comment right here. Next up, we have this come into body count, which is the command show shall proof. In this case, I'm using this heart dot SVG. You say it's right here. After that, we have this come into body reaction section means you can react on any comment. For example, you can like comment, you can reply coming, and this is the comment posted time. So here you see, I'm talking about this one. Now let's move to this menu part, which is the third column. And you see it is right here. Now let's move the next part, which is a write a comment section where you can write actual comment and this is the part I'm talking about. So here you see that I have this. Loudon user Avatar, which you can see right here. And then we have this actual command input form where we can write our comments. So this is the comment form. And then again we have this Font Awesome icons. In this case, you can see that we have this phase, then we have this camera, and then this image icon. So basically you can just click on anyone to insert image value is one. So then you, this is our Abby post structure. And now I hope that you have understand this astronaut structure very well. Once we start designing our card, we will revisit to this estimate structure and that time it will be completely, completely clear. So this is our Facebook posts structure. Now, let me just go right here and here. This that beaker CSS, where actually RCS is going to go. And here is the default styling for CSS. So now what I can do, I can get rid of this, everything, and I'm gonna get rid of this. But before deleting it, let me show you something. Let me just go right here. And now since we are here in this movie, let's go ahead and put our default styling. Because in the next movie, we're gonna work on this section right from there to here, right? And in the third video, which is going to be the final video where we'll gonna walk on this comment section. So because we have a lot to cover in this a second and thought with you. So why not? Let's go ahead and just put our default styling right here in this movie. So for that, let me just go right here and let me just get rid of everything. And I'm also going to get rid of everything from here. So now if I say, what if I go here, you see, this is how it's look and this is really horrible. You see even the font family is actually sat if, and we want to send serif font, right? So let's go ahead and code our default stands. So firstly started with body. And here I want this font family to be Arial and which can be san serif font. It totally fine, but I think it'll do the trick and say, Now let me just give it a different background. So here, let us give it a background and it's going to be a shade of white but not compete to i. And this is what exactly I'm talking about, right? So we'll keep this background and let me add some margin from the top. So I must say your empty, which is margin top. Let's make it to Ram. So we'll have some room from the top. There we go. Now what I need here is that I want to give it a fixed size. So for that, let me actually just go to epicardium alone. Just target this one right here. So I'm gonna grab this MP postcard. Let me just go right here. And here. I'm gonna see the max weight. And let's make it something like 550 pixels. If I save it, if I go here to see that, now we have limited, you see the size is limited because this image is not responsive, so it stick even more space. So let me just do one thing. Let me just go right hip and base styling. And here I'm a Save Image and let's make it a bit to be 100%. And you see, as soon as I do that, you see there is a bit changes. You see now it's shrink down to fit its parent container, which is exactly what I was looking for. I think this is doing great. Now, let me just go up here and I'm going to use your flexbox because I want to put it into the complete Center. So I'm using a display flux and then I can easily see it justify contained. And let's put it in the center. And if I save it, if I go here to see that now it is incomplete center and this is what exactly I'm looking for. Now let's go ahead and make it look like a Facebook card. So for that, let me just go right here. Here. I'm just giving it a background and this time I want to make it complete, quite save it Epic. We're obviously, you see right here white, but it's not a fully visible. So let me just go right here. Let me add some kind of a padding. Foster is going to be pairing one of them from all around. You see that now I've got that padding. I alternate the border radius here, so I need a little bit rounded corner, so is going to be border-radius. And let's make it then picks save it. If I go here, you see that we got this little bit shuttle border connor, Now let me just add one more thing which is going to be the bach shadow. So it will look amazing. So here, And I'll just add this bach shadow. I've already covered McLean boots on the paste it here. And if I go ahead and see that because we have that bach shadow, it's actually a Facebook card box shadow, I took it from Facebook post. So this is how exactly it's look like. So there we go. This is what exactly Lena need for this movie. Because from the next movie, winner design our entire card without this comment section. So see in the next movie. 5. Facebook Post Design Crafting Main FB Card Section (Part 2): So welcome to the second video of this project where we're going to design our actual Facebook postcard without comment section. So we're going to work on this section in this video. So let me go to my coater and let's start designing our Facebook card. So in the last movie, we have designed this default styling. So let me just go right here and you see that here we have this header. So what do we do here? We can simply just grab this one and we can just try this one. So dot is going to be, be postcard and is going to be the head up because this will exactly we are targeting. And let me just go right here and you see that this header, there's a two section, the left one and the right one. So this has to be a very lap and this has to be very right for that dynamic is off flexbox. So here I'm going to just use this flexbox. And then elsewhere do that. You see that now they have actually got into this one row right here. You see that hese are actually menu card. You see this is our menu card and this is our image because our image is quite big. So it's not aligning in one row properly. So we'll fix it in a bit. But first, let me just go ahead and put this in magnitude, the very right. Well, it's very easy because we're gonna make use of flexbox property named justify contained here. And I just put here space between. So I won't space between. Well, I can use your space evenly or space around, for example, around. And this is not going to do three because we will have space around this flex item, which is obviously we don't want and we also don't want evenly because if I do that, you see that now we're still going to have those spaces. So here I'm going to make use of this between. Now let's go ahead and style this author avatar for that. Let me just go right here. And just above this, this author, our dot, so Author router is going to be in separate column. So let us go ahead and grab this author, our top. Let me just go down here. And I'm just gonna target is author avatar because we only have one. And here I'm just gonna give it a bit. And this case, let's make it 45 pixels semi-colon right here. It's small and this is what exactly we are looking for right now. Let's go ahead and just make it circle. So for that you see that we have this image. So what I can do, I can just grab this same thing. Um, I go down here and then here I must say image. And then I can say here, border, radius. Let's make it a 100%. If I save, it will go here. See that now we got this perfect circle, and this is exactly what you're looking for. But you see that this outer is up and this information is below. We don't want it to be owned them in a single row. Well, for that, again, we can use flexbox. So you see author Info and this is author our talk. We want them in one single row. So you see that we can make use of this class here. So this is a pattern and we can make this a flex container. So there'll be automatically, you know, in one row. So here I can save the scrap that one. And I must say here, DFD split flax. And at the same it's beggar heresy that now they are in one row. You see it's a magical, the author avatar and author information is tightly close together. We need some margin, right? So let me just go right here. And it's very easy. I can just adhere margin, right? Amount. And let's make it something like templates of epidemics or do the trick if I go ahead and see that now we have enough margin, which is good. Now you see that we have this little space left. You see the space? That's because we're not using that space. How glad to refill it? Well, it's very easy. We can just go right here. I can go to index.html and we talk about this author. Alright, so what I can do, I can grab this one. I can just go down here and under Titus author info. And here I'm going to make use of flexbox. So let me show you what I mean here. So I can use your display flux if I save it. Well, you say that the negating one row, which obviously we don't want, so never change its direction. So I can see your flex direction and let's make it column. So now in column and you see they're back to its default position. Now what we can do here, we can align them vertically. Yes, I can say here, justify contained. And again, I'm using you justify contained. That's because now our default xs, which is the mean exist, is if I'm not using the column, then here I need to use a line items which is going to align the items in cross exits. So here justify contained, and here what I want, I can see here, speeds between the sea is fuzzy space between. You see, we've got a space between, but obviously we don't want it. We want to look good. So for that, I can use USPS evenly because it's based easily. Do the trick. You see that now because they have spaced evenly, it's looking nice. And again, we don't have to touch this guy over here because this is totally fine. Now I need to do one thing here is that this should be a little grayish text color. I can just go ahead and apply the text color right here. But we're going to need that gray color in more places in our card. So for that, what I can do, I can create a utility class. So for example, I can go right here and I can say here, dot txt, gray, name, colon. And then this is the color. Again, I've copied from Facebook. So now we got it. We can just grab this class and we can easily apply it here. Yes, so here, I want this guy to be great, so I can just apply it here. And you see that now it's Tn into this grey here, which is fine. Is it? This is exactly I looking for. And also I want to make this icon to be great too. So I can go down here and I can just put that text script right here. If I go here, you see that again, I got this k color and now this looking scott. So now you see that the header of a car is done. Now you see that this is our text and the line height is quite low. So why don't we just go ahead and make it a little bit big. So because I know that this comment budget texts is paragraph so I can go here and I can pack it all the paragraph, right? And I can see your line height. And let's make it 1.5 m. If I say, if I go here to see that now we got this 1.5 line, right? Which looks good to me. And this is it for this Facebook postcard body. Because there is nothing much you say. So this Facebook cardboard is already looking good so we don't have to touch it. Now let's go ahead and move on to this part, which is the social proof section. So let's go ahead and hear. Let's go ahead and target these Facebook foot up, which is going to be this a social proof section. And this is the class we need to target. Now let me tell you that in this class we have two section. This is the lepton and this is the right one. Let me show you if I go here, you see I'm talking about this one. So this is the left one, and then we have this right one. So that we can easily do that by using flexbox. So I can go right here, I can just go down and I'm a target this class. And then I can set here display flax. And as I do that, you see they all will be in one line. It's not working properly because these are the SVG icons and there are very big. So let's go ahead and first fix this icon size. So am I just grabbed this class icon because this class is common to all the icons. Sometimes it's grab it. I'm no down right here. And we're gonna be dot icon. And here I'm just gonna give it a width, and let's make it 15 pixels. If I semi-tropical here, you see that now they're quite small and exactly what I'm looking for. But again, they are all in one row and they're sticking together. But I want this part, this commit and shear to be vary, right? And these are shorter group section to be very lumped because we have two section. You know how to do it, right? Yes. You can say hit justify contained. And then I'm going to use your ISPs as going to be between. So there we go. If I save it, you see that now distinction got into very right and the Social Work section is very left. But you can see that a decision is actually close to our body. So let's add some margin top. So what I wanna do here is that here I must say md, margin, top, resume, get one dime. So another semi-tropical here you see that now we got some breathing room from the top, and these are quite small. I think this icon is small, so let's make it 20 pixels. Say me, and if I go here, you see that now they're looking good. I want to align this left section item in horizontally and also the selection, it's also horizontally. So for that, we can just go right here. And I'm gonna grab the social proof. Let, let me just go down here and here, and I'll just paste it. And also I wonder, right one, write this one. So I can just grab this one. And I can just paste it here. And then I can say here df display flex mux. And if I go ahead and see that now they're all in one row, this is exactly what I'm looking for. So let's go ahead and style this one. Well, let me just zoom it here so you will be able to see it completely. There you go. So now let's go ahead and style this part here. Let me just go right here. And this is the icon we're talking about, right? So what I'm gonna do here is basically first, let me just go ahead and I need here border. So I'ma say her border, and let's make it one pixel solid. And this time let's actually make black Foster, So you'll get to see it. You see that now we got this a black border around them. So what I need to hear is that I just go here and I need border-radius here. So UNEP border-radius, let's make it a 100%, which is going to turn into soccer as it did now, it's 100% soccer. And obviously this border is going to be complete light. So let me just sit here, right. And you see that it's actually become white and you can't see properly because RF, Facebook cartography is also wide. But what I'm talking about here is that you see that this is shuttle. Does shuttle one pixel border around Dislike button? Yep, I'm talking about that. And this will exactly I'm doing here. So here you see that this light button is the very top. Then we have this hot-button and then this hug button, right? So you see, in this case, we need to just stick them together. So for that, let me just go here. And let's say here MR, which is in imagine right? And see her minus, and let's see 0.1 RAM. And there you go. If I save it to take away receipt. Now they're indeed stick together. That is like I can at the very bottom, then they have this one and this is the very top, which in this case, you see that this a like button has to be taught, not this one. So how can we fix it? But it's very easy. Let me show you. I can go right here. And now you see that we need to make use of zed index on these icons. But how we can do that, because every single icons is going to have a different Zen index and we don't have unique class. How will do that? Well, we could use here pseudo-class selectors. Yep, I'm talking about the nth child selectors. Let me show you how it's done. So I can just grab this guy over here. And let me just go here. And just after this one, or let's go after this one. I must say here, this shows proof left and then I'm a packet at my icon. And then I can say here and child. And then which one I need to grab via our target, the very first 1 first. So now you see that the first one is this line. Well again, if you want to put it at the very top, this has to be a higher index than others. So in this case we have three. So I can easily just go here and you can see here zed index to be three because we only have three icon. So I can just see gedit X3 because it's going to be top one and other, which is this one is going to be didn't X2 and it takes one. Yeah, let me just go to Ikea. And again, let me just get rid of it because we actually have only this one. So this is unique. So you don't have to make it specific. Well, you can do it but I don't have to do it. So I'm going to say copy paste again. And now at this time counterattack it does second, icon and secondary, this is going to receive the genuineness of two. And then we're going to have the third item has one. And this is going to receive the lowest Gen index, which means it's going to be at the very bottom. And if I go here to see that now this like I can at the very top, then we have this hot icon, and then we have this hug Eigen. Let me just go up here. Let me show you. So if I just say here something like 0.3 RAM, you see that this link is at the very top, right? So perfect. Let's make it one again. And they, oh, yep. So now this is fixed. Now let's go ahead and push it to the right because we need some margin night, right? So the one way you can do it is that we can just grab this third item and you can see a map and give it a margin-right of 0.3. them. If I save it, if I go here to see. Now we got this margin here. But what happened? If I just go here and if I remove this one, then we will not have that. I can see now it's not working. So how minutely fix it? Well, it's very easy because you begin to use your Type select up. Let me show you and let me just go grab this class. Yep, let me just go right here. And here, we need to be able to be specific because I'm or target the broader one which is the image. So I want to just limit it, okay? And now what I want here that I want to tag it, the image, which is the very last image on this class. Yep, which is this light. So what I do here, I can see here last time, this is the type selector and this is again a pseudo-class selector. Now I can grab this seam line and I can paste it here. Yep, seven. And if I go here, you see that now it is working. But what happens if I remove that hug and say if I remove it, save it. It's still working because if we are targeting it dynamically, we are grabbing the very last image in this period and then we are saying the margin die, okay? So this is going to work no matter if you have one or 100 images. And now let's go ahead and move on to the next part, which is this one. Here. We only need a margin right from there. So it's very easy. We can just go right here. And you see that we're going to grab this particularly because we need money right there. And here I can say that class, NSA Monday night, MR. Let's make it 0.8 ramp savings. If we go here, is that regarded and see that this section is ready. Now let's go ahead and move on to the last section of this video. And that is actually going to be this right here, this social reaction section. So Emerson's grab this one, right? This class. I'm going to go right here. And here. I want to paste it, right? And what do we want it? First thing is, as I say, a margin top, let's make it one of them because they're actually stick together. You see that now we got some margin top. Now I also need a border. So for that, I can go here and I can see here border and I need a top border, right? So as I'm on the top and it's going to be one pixel solid and discover, save it. And if I go here to see that now we got that top here, we also need some padding top right? So let me just go ahead and see your padding top. Again, it's going to be the same one. Then if I go here to see that we got at padding top, perfect. And I need this in one row. You guessed it. Rena easier, flexbox, there's going to be reflux if I go here to see that now there in one row. But we need to put them right from there to here. So let me just go here and I'm going to make easier to justify contained. And here again, we have these three option speeds around space between headspace, Italy. This both on a walk. And I want to keep this piece initially because it makes them even more closer together. I think this is gonna do the trick and this is very powerful. And this is a, now let us do one thing is that I want to turn this into Greek lab. Also this one's going to be great and this is also going to be great. So for that, let me just go right here. And you know that we have this utility classes is tasted great. I can wrap this one. I can go right here. And you see that I need this to be great. So I can just paste it right here. Cv difficult here, is that now this turn integrate and I think this looks nice to me. Yeah, this is fine. So let me go up here. And I also want to turn into this grey or lectures just applying the pellet. So all the title is going to see, I wouldn't own this, wants to be grape. So it's very easy. I can see here class and let's make it x scream if I say between here, you see that now this is also turning to crave, and this looks pretty fine. Yep, this is, let me just make it 100%. And yeah, this is how it looks. So this is it for this movie and this movie, you have learned that how to design this area of the car. Now let's go to the next movie where we're gonna work on this Facebook terminus section. See you there. 6. Facebook Post Design Building Comments Section (Part 3): So welcome to the power three and the final Facebook postcard design with comments. And in this movie, we're going to pick up where we left in the last movie. So here you see that the last movie, we have designed this part. Now in this movie, we're going to walk on the Facebook card comment section, which is right here is a winner design this comment section. So let us just go right here and let's start designing it. So for that, let me just go right here. And you see that now we are going to walk on this section. So first of all, I'm gonna grab this class here because this is where our comments located. Now let me just go right here and I'm gonna target this. But to the class. And what I want here is that I want this border top, face it right here. And I also need to base your margin top, and it's going to be one of them, save it. And if it clearly see that now we have a clear separation between this reaction and this Facebook coming. So now these are viewed 25 more commits is looking go to, so we don't have to touch that one. Instead. Now being a designed comment section. So it's gonna be three column layout. So in the first column, design coming total avatar, then in the second column, the actual comment is gonna go, it's right here. And then we have this third column where the command demand going up here. And you see that this is second column is way bigger than, than the first and the third column. So in this scenario, we can't use flexbox because flexbox is made for the same EBIT column, but in this case, the second column is way bigger than, than other columns. So in this case, we're going to make use of CSS grid. And this is the best opportunity to see that this greed in action. So let me just go right here that we will design this coming box coming. And here we have this first column, which is the commit author, our data. Then we have the second column we're, are actually coming into gonna go. And then we have this part column, the man who will appear. So basically we need to make this box come in to be the greed container. So for that, I'm going to grab it and I'm gonna go down here and are now just the space sit-up. And here I want to make it agreed containers, there's going to be displayed as going to be great. They can use this property which is grid template, is going to be columns. Now the first column is going to be a pretty smart, so I will just make it 10%. The second column is going to be v bigger than the other two columns. So I'm gonna make it 80%. And the last column is going to be 10%. If I save it. If I go here to see that, now that you see that this is the 10%, then we have this one is totally 80%, and then we have this 10%. Let me actually just make it a little bit big so you could see it clearly here. There we go. And now I can see that this is the first column we're often outta is located. Then we have the second column, the actual commit, and then we have this third column. So let's go ahead and style them. So for that limit, just go right here and let me just go right here. And what we'll do here is that I'm going to again grab this comment box, come into class and hear. And I said, come in and then you see that we have this author habitat or let me just tell you here, you see that this orthonormality is quite up here. So let me just push it little bit down. So for that, I just used this author, our town. And here, I guess c and d margin top. And let's make it one plan. Save it if I go here, you see that now it's pushed down and this is exactly what I'm looking for. So not this session is done. Now let's talk about this second column, which is quite big. So for that, let me just go right here. That here we have this coming body. But specifically we're attacking this one, right? This is the second mean column. So what you can do here, I can just grab this guy from here coming to body contained. It's going to be there. And then I'm just going to be the background of this color. If I go here to see this is how it look like exactly what I'm looking for. And let me just add some padding yet. So there's going to be padding and I want to make it 0.7. em around it. If I go here to see that now we have this padding. That's cool, but let me just add some border-radius here. This is going to be border radius. I want to make it 20 pixels. If I just go here, is that now we have this 20 pixel border around it. Now you see that this the commit author name. We actually have a lot of margin here and at the top, so we need to fix it. So for that, let me just go right here and plenty about this comment author, right? So I'm just gonna grab this commit author. And here I'll just paste it in. And here you see margin, I won't 0 margin from every VM. We indeed remove that margin from the top, but we have little more margin at the bottom. So what we can do here, we can see here 0.7 and let's make it a minus, and it's going to be them, right? If I save it, if I go here to see that now, we actually gotten rid of that margin bottom. And this looks fine to me. Again. Let me just go ahead and you see this font size is a little big. So why does this go ahead and make it one? So it's gonna font-size one time because I really find it comfortable. There we go. Now let's go ahead and work on this particular section, which is the social proof of that comment section. And for that, let me just go right here. I'm going to just go right here. And you see that we are talking about this section, coming party count. And I grab it, I'm gonna Russia, Europe, paste it. Now here what I need, I need to set your position to be absolute. And you see that now the push in absolute, so that's why it's actually appearing here. But we want to make it a little to the actual, this right recommend body. And it will just grab it. And I can go right here. And let me use this commit body. And I can see a portion to be radio, right? Save it. And now it will going to be related to our comment. Body means this area only. So that's perfect. Now, obviously, I wanted adopt right here. So it's very easy. I can just go out here. I can see, right, let's make it 0. If I go here to see that now it's appearing at the right. Now what I want to, I want to give it a background. So let's make it no background, and I want to make it a complete white. If I go here, you see that now it's had white background, but you can't see it because we need to push it a little bit up. So for that, let me just go right here. And why don't we just go ahead and let's add this bach shadow, right? I'm old, comically boots on and paste it right here. And you see, this is how it look likes. So let's add some padding him. So honestly are pairing. And I won't padding from the top is going to be 0.2 Rem, and from the left side is going to be 0.4 amps, even if I go here to see that now we do have it. Let me add some border radius. So it's going to be border radius. And ulna we get 26 civic Gregor heresy that now they got this border radius. But you can see that they are not aligning in the center vertically. Well for that, we can just go here and we're going to use flexbox again. This will flex and I guess I have a line items and I can just put it in center if I save it, if I go here to see that now, they're in complete center, Let me just push it little bit uphill so I can just go here. I can see and d margin top. And that's because 0.6 RAM. But here I'm just using minus, say if I go here, you see that now it's posting the top. Let me just push it more. So I can see here maybe nine RAM, this is close to one them any up, this looks fine to me. But I think we need to make it little bit smaller because this text is quite big, so it's gonna be font size 80%. And if you really see that now these texts becomes one, which is pretty neat here. But again, this icon is big, so just fix it. This I can do, well for that, let me just go right here. I'm going to go right there. And is it a Steichen, right? So what I can do, I can again just copy this class because I want to be specific here. Because we have too many icons. You see, we have icons right here also, so we don't want to modify it. So it's gonna be dot icon. And then I want to make this width to be 15 pixels, 15 pixels semi. If I go here to see that now it's nice because Malia, Perfect. Let's add some margined items. There's going to be a map. And here is going to be, let say 0.01. level. If a cemetery here, you see that now because I'm matching and there we go. This is our social proof section working properly. Now let's go ahead and walk on discriminatory action section. Well, for that, let me just go right here and just go here. And I'm gonna grab it. I'm just gonna go right here and just paste it right here. And now I want to talk a DCIS spans, I destroy the content. You see this span? So I can go here, you can see here spent. And I need some margin. And here I want margin 0.05. and from the top one them from the right. And judo from bottom has 0 form. Let, if I say, what if I go here to see that now we do have, now we see that we need some margin left here, right on the first side. So now what I can do, I can just go ahead and grab the same thing. I can just put it here. And here I can see foster child. So it's going to be the foster child in this particular section. And I want a margin left here. So it's going to be from the left. And let's make it 0.8 RAM. Let me get rid of it. We don't need it. Save it. If I go here to see that now we got some margin from that. Now what I wanna do here is that I want to reduce the font size. So for that, let me just go right here. And let me just go here and I can just read another iterative function. So it's going to be font-size. So fs and I wanted to get 90% is going to invest 90. I can say font-size 90%. And again, I forgot to add this dot here, which is going to be the class. Now I can go to right here, and I can just apply fs 90 here. Fs 90, save it. If I go here, you see that now they become little small. Perfect. And one thing I want is that I want to make it look green so I can easily see a text is going to be great. Say we see that now, the time degree, and you see this exactly what's it like. But you see that it has some magic from the top. So what I can do here, I can do the same thing, right? So you see that we have this particular section reaction and we don't have the actually. So I can just grab it here. And I can just see here little bit of margin top. So let's say m, t, and here this mega 0.5. save it. If I see that we got some margin for the top. And now this is how it's looking. Now let's go ahead and work on this last section. And what I want to do here on menu is that I want to make it incomplete, centered vertically and horizontally. So this is pretty easy because you see that these three columns are now Grid container. We can actually use greed item property there. So what I can do here is that I'm going to grab this comment menu. I'm gonna just go here and I can see a dot kind menu. And here it's very easy because if you want to align a single item, well, you can use a property Liam self, so I can see her justify self. I can put it in the center. So this is going to put a center horizontally. You see, It's horizontally center now and put it in vertically centered. It's right here. Well, I can say here, align self and center, saving. If I go here to see that now it's aligned to complete centre. And this is now our, this section is complete. Now let's move on to the next section. We're going to stay about a writer comment section. And for that, let me just go right here. I'm gonna go here. So you see that enlightenment section, we have basically two, but this is dot router, which is going to be the very left, and this is going to be the right. So what do you do? I can just go down here and I can grab this one. And again, you see that this router is going to have a small column and the site construction is going to have this much paper. So again, because we not want to have DUS theme with column, we're going to use your greed. So it's going to be displayed and it's gonna be great. And for column, I must say here the template columns. And the first column is going to be 10%, and the second column is going to be 90% savings. If I go here to see that now we have this fourth column, which is auth route out, and this is now half the remaining bit. So let's go ahead and make this a bit to be 100%. Well for that, let me just go ahead here and actually let me just add here empty margin top. Let's make it to one line, right? So because it's stuck together, so I don't want it. So now let me just go right here. And let's grab this command input form, right? As a score here. And here is going to be.com input. Now we can just say here width. And I'm gonna make it, let's say 94% or 96% because I want to leave 4%. And he said it's not working. And that's because I need to target this input. So it's coming input, that's going to be input and say what if I go here, see that now expanded, perfect. Now I want to get into this border around them. So it's gonna be border. And let's say here none, I don't want border. The border has gone. We're going to need some kind of a bearing and padding is going to be 0.8 RAM from the top or from the right, I need 0, but n is 0.8 RAM from the bottom and 0.8 lamb from the left to save it. If I go here to see that this is how it looked like and as it is outline, where I can just get rid of this outline here. So it's going to be outlined. Let's make it none. Save it. If I go here, see that outline is gone. Now, I want to give it a background just like this one. Right here. You see this one, rabbit. I'm gonna go down right here and paste it, save it. If I go here to see that now we have this background and now we are going to need that border-radius. It's the same, right? So he's going to be border radius and it's gonna be 20 pixels. If I go here to see that now we got that border-radius. Now I want this icon to appear at the very light. Obviously, we need to make use of position absolute. So for that, you see that I'm at this particular section class, right? I can go down here, again, this target, this one. And here it is going to be positioned to be absolute, so absolute. And again, if we need to make it to come in input here, so let me just grab this commit input. And here is going to be dot-com and input. Let's make it a portion to be related profit. Now what I can do here, because there's going to be at the very right. I can see 20 pixel from the right, save it, and then go, perfect. Let me just push it up. And now here, let's say popular. So from pop is going to be 0.8 RAM, right? And out there you, it is there. And let me actually just increase this to be less 24 pixels. And there it is right there. And again, I want to make it look like a gay club. So I can just coherence here. Next n is going to be great savings Megawati. Now it's good, but I need the margin right here because we need some space between them. So let me just go right here. And you see that we do not have any specific classes for them. So we need to make use of here, Attribute Selector. Let me show you how it's done. So I can just grab this class here, because every single of them have this effort S patent in common. So what I will do, I can just go right here and I can make use of this attribute selector. Guess I can say here, go ahead and grab this class attribute. And then I'm going to use the star sign, which basically means that find this pattern any weird in that class. If you find it, go ahead and apply the styling. And again, I want to limit it to this particular section only. So let me describe it on a page. And now I can just go here. I can say margin-right. And let's look at 0.5. friend. Save it if I go here to see that now we have this enough margin, right? So now it's telling is done. But again, we need to test its responsiveness. So for that, let me just click inspect element and we're going to simulate it in iPhone X. So you see that this part is looking good. But this common area is not looking good in mobile devices. So how can we fix it? Well, it's very easy. We're gonna make use of here media equities. So I can see it is going to be media. And our target here, the mobile device, is going to be max-width. And in this case, I want to make it 449 pixel. Now let's test is honestly or body and see her background to be black savy difficult here. See that now the background is turning to this one. So I think it is working. You see, now this is wide. And as soon as we hit this fourfold nine pixel, the ban on trying to black. So it is working. So let me just go at the place where we have used this concrete column. I'm gonna grab this part here. You're gonna go down right here and paste it. And now you see, I'm gonna get rid of this disputed when needed. And I say this, the coming and coming into, we have this 10%, 80 percent and investment, you see right here, right? So that's because we have 10%, this first column, this is overlapping. So what do we do here? We can simply just in case the 15% and we're going to make this to be 75%. And see, if I go here and see that now it is working fine. Same thing you can do right here. So let me just go up here and let's grab that right coming section C here. I'm going to grab it. I'm going to just paste it right here and here, and we get it off everything, right? And here I'm going to just make it 15%, and this is going to be 85%. And if I go here to see that now, it's also working fine. So you see, now our card is totally responsive, which is amazing. Now let me also add one more card here. So what I can do here, I can just go right here and let me just do one awesome thing. Yeah. So what I don't know, I'm just gonna comment it out. I'm gonna grab this another card. Exactly. I'm gonna paste it down here. Now we have two cards. You see that we have these two costs. And what I want to do here is that I want to get rid of this comment section entirely. So let me just get rid of it. Save it if I see that. Yep, it's gone. Now. I wouldn't want to change the picture because I already have pictured in my image folder. So I'm going to go ahead and get rid of it. Ie image. So e is going to be image dot JPEG, figure USE. This is house look like Now. I want to put them in the column. So for that, we can just to go to flutter. And let's do something here. So here, let's make this flex direction column. So flexed option. And you can call them, say, if I go here, see that now, indeed there in one column. But we need to put it into the centre. Well, it's super-easy. I can use here a line items which you want to work on to us access. And I can say a center if I go here, see that now we do have it. But to see them sticking together. So let me add some margin bottom on the card here and say MB margin bottom. Let's make it two RAM. Say, if I go here and see that now we have this margin bottom, and then you go, Now I have this two cart, one with comment and one mid without comment. You see, so this is it for the project. If you haven't doubt limit on the forum. Thanks for watching. 7. Breezy Typing Effect Animation For Your Headlines: This movie, you're going to learn that how to create this amazing Papi effect and emission in pure CSS. And let me tell you that we're going to create two kind of typing if it animation. The first one is the step typing effect and emission, which you can see right here. This one is a step tapping effect animation. And then we have another one which is smoother typing effect animation. Let me show you. So if I get rid of this code here is see, it's right here. So now if I refresh, you see that this is a smoother tapping effect animation and it's very powerful. And one more thing you can notice here that wants our piping effect and emissions get completed then and only then this paragraph feedings and after this paragraph fade ends that are only our buttons, fades in say C right here. If I refresh, See this is appearing, then our paragraph, and then we have this button. So I also showed you that how to create the staggering and emission delay fading effect. So either way, if you want to learn step tapping effect animation or a smoother typing effect animation, or this animation delay fades in. You're going to learn how to do it in this movie. So let me go to my goiter and let's get started. So heavy go, I'm on my VS code eta and we have the simple STL file to work with. Well does another file in tapping effect or CSS, we're gonna write our CSS code, but as of right now it's empty. And then we have another final limb, default or CSS, where we have some default CSS code and that is only to make our projects look good. So here's the preview of our project and we see that it's looking really good. And that's because of these lines of CSS code. And let me tell you that our focus for this project is to create that awesome typing effect animation. Not to make our projects look good because that is going to distract our focus and also going to make this video land here. And obviously we don't want it. But of course, I'm going to give you a quick walkthrough to the score so you will understand it better. But first, let me go to index.html and let me explain you the HTML structure of this page because that's really important. And you see that we literally have these three lines of HTML structure for this project. The first one we have this a heading, then we had this paragraph, and then we have this anchoring. And you can see in action right here, this is our heading. Then you had this paragraph and this is our link, which is look like some butter. And that's because of this default CSS. Yeah. So let me just give you a quick walkthrough. You'll see that on body and esteem and using this height to be 100%. So basically I am using the entire height of the viewport and I'm using it to just to place our contained in center, both horizontally and vertically. So I'm using the flexbox to do that. You see right here. And then we have some background as a linear gradient and can see gradient right here. This is looking really nice. And then we have this font size to be 140%. And that's only to make it look big so you can see it properly. And if I just go down here to see that I have some default styling for a paragraph, which basically I'm aligning my paragraph incentive and then, and giving a line height to be to ram. And after that, we have some styling for our anchor tag. So this is our anchor tag right here. Basically I'm using these styling to make it look like a button. You see right here. So this looks like a button that's because of the styling. And then we finally have this a media query. This basically going to rotate our background of the body to be 180 degree instead of 90 degree. So what is mean by that? Well, let me show you, you see that right now it's a 90 degree means it is going from left to right. But in the smaller devices, it's going to go from the top to bottom. You see, now it's going from top to bottom. So z at the top, we have this blue, at the bottom, we have this green. But in big devices now blow isn't the left and green is the Right. So this is what exactly this media query is doing, and this isn't about our default CSS code. So now obviously we do not need it. So let me just go ahead and close it out. And now let's go ahead and create that awesome typing effect animation. So for that, let me just go right here and now just think about it, how you can make these work. So you might say that we can start from the width 0 and then we can animate it over some course of time to expand that, to wait, to fit this entire headline. And if you say that, then you right, let me show you what I mean. So let me just go right here. Vena need here animation. So let's create one animation. So I'm going to just get, say, her key frames and then I'm gonna give it a name of typing. And then here what do we wanna start from the 0 weight? And then over the course of some time, for example, one or two seconds, we will expand that weight to its full 100% of it. So let me show what I mean here. So I can see her from, and then I can see here will be 0. And obviously we want that animation effect on our heading tag. So you see that heading two is one. So I can just go right here. So here can target heading one. Here is gonna be an emission, and I'm gonna give it the animation name of typing, which exactly, it's right here. And then I say are over cos of 2 second and save it. Now if I go here, you see that now indeed to be seeing some differences, if I refresh, you see now it's wrapping into four lines. And that's because of we have four word. So every single word was actually having its own line. And obviously this looks ugly. You say it's look ugly and it is not to be warned here because we don't want to wrap every single word of this headache to be in their separate line. So how can we fix it? Well, it's very easy. We can use your one property name, whitespace. And then I can say here, no rap. Now if I say that, if I go here, you see that if I refresh, you say now it's not wrapping into four different line, but now instead, it looks like it's appearing from right to left. You say it's kind of a sliding is a sliding from right to left. And obviously, we don't want it because we want to appear it in its same place. But now it's not happening. It's appearing from right to left. Well, that's me cost off Overflow. Let me show you if I just go right here and if I said your overflow to be hidden, you see if I go here and now if I refresh to see that now that is fixed, now it's appearing from the same place, instead of sliding from right to left. So that is fixed. Now let us go right here and get into this whitespace neuron. Now if I just go ahead and refresh to see that again, we're wrapping in these four separate line. That's why this paragraph and this anchor link got pushed bottom. You say, if I refresh disappearing. So we need this whitespace, no rubs. So let me just go ahead and now I see that it's fixing. Awesome. So now we are doing some progress. Now let me just go here and you see that we have is the animation which is tapping invasion from bit to 0. But we haven't given any wit to our heading one yet. So what do we get to here? We can just go right here and we can just give it. We'd talk, let's say 400 pixel. If I save it, if I go here, you see that now there is no difference. But if I refresh to see how it's going to say, oh, now it's appearing, you say. So it's actually expanding from width 0 to 400 pixel over the course of 2 second. Yes, if I make it 1 second here, you see that now very fast within our second Right? So that's very powerful. And if I make it five seconds, you see if I refresh is a 12345. So now this is working. So now let me just go ahead and make it do second back. So this is kind of a smooth transition, which is really good. But again, this is not giving a typing effect because we don't have that concept yet. So why don't you just go ahead and let's create that caso. Well, for cancer, I can just see here border, right? Yes, I can say border, right? And then I can say here, five pixels, solid and the liver, the color because it's ultimately going to inherit e to c, then also actually turned to white here. So now if I refresh, you'll see that now it is given that typing kind of effect. But again, that Kauser is not blinking, right? So we need to make these courses to be blink. So for that, we need another animation. So yes, I can go down here, I can say at keyframes, and let's make it blink. And now here what we can do is that you see that we have this border, right? So how can we make that blink effect? Well, it's very easy because this is a border right? Colors. So what we can do here on the half-way through the animation, we're going to make these border color to disappear. Yeah, let me show you if I go here, you see on the half-way through the animation, so I can say that 50%. So this is the hopper through the animation. And what we can do here, we can see border and let's make it colored. And then I can say here, transparent, watercolor is going to be transparent. If I say read, obviously the need to go up here, and we need to use these blink animation. So again, we continued here. We can say here blink N over course of 0.5 second. Now if I go here and if I refresh to see that now it is not working because not blinking. So again, if you know that we need to reuse your in finite, right? If I say, if I go here to see that now it is blinking, you say now it is will again, so it's now working. But the one thing we can do here to make it look even more unnatural cursor, we can use another value here that is alternate. So basically it's going to alternate the blinking and you can see the onetime it's going fast, but another time it stopping and then went fast. But again, we still don't have that step tapping effect because this is smoother typing effect. We want that step by step, letter by letter typing. So how will do that? Well, it's very easy here because here in animation we have another function name, steps. Let me show you so I can see her steps and then how many steps you want this animation to take place? I can say 16 steps, another c, But if I go ahead and see if I refresh this 1234, it's look like these letters are typed by discussed salesy. But let me tell you that. I didn't give it a by randomly that 16 step. Let me show you how you can actually just the decide that how many steps you need. So here we see that in Friday we have six character than in CSS. We had three, sig x3 nine. Then we have four, which is 9413, and then we have another one which is 14. But here we have three space, so 123 space, so 143, it's 17. So this is 17 character in this heading. So we need to make your 17 steps instead of 16. So let me just go ahead and make it 17. And Africa heresy, that if a refresh, so 1234 given 17 steps. So it's sort of like a more typing effect. And again, it's very fast. So what do you do when you can say something like five seconds and now you will be able to see it clearly. So let me refresh it and see now it's very, very slow. And you can see these costs are tapping our herring. So now we have that typing effect. Amazing. So let me just go ahead and make it to second. Now let me show you one awesome trick that you might don't know about it. And what is that? Let me show you. So you see that in width, we set L 400 pixel. But what we can do here, we can grab this 17 character and we can just put it right here, 17. And then you can see, I see. Have you ever heard about it? No, no problem. Now you can use it. So there's a 17 kept a unit. It means that we are saying that our rate should be equal to 17 character because we have 17 character in our heading in Africa here you see that if I refresh, you still see that is happening. Say powerful. But what happened if I did use this scatter, For example, if I make it pink actor it, you see that now it's cutting right here. The Friday is gone. So see, it's very powerful. So let's make it 17 character element. Just go right here and refresh. You'll see that now we have it, but you save that Koster is quite far from this year and this is really depend on the font type. So let me show you what I mean here. If I just go right here and if I say here, font family to be monospace, you see monospace. Now I can guarantee that this is going to be exactly at the same place you see, it is exactly at the same place you see in mono space. And the reason is because this monospace is a computer character formic language, right? So if you're using a different font, family or fund type, you have to adjust this manually. So in this case, let me just go ahead and get rid of smaller space because we don't need it. But you see that the cost is far away. So what we can do, we can change your, for example, it says 16 a character. And I see the 16 character is quite close. This one, I think 16 collector is gone, right? Yeah, you need to manipulate it because it's really depend on the font type. And there we go. This is your typing effect animation. So this is your step-by-step tapping effect animation. And then if you want smoother animation, then get rid of this steps and then save it. And you see that now this is going to be small, the typing effectively measure C. Now let's go ahead and walk on the bonus contained. It means that once this type of effect and emitting complete, only then this paragraph and this link is going to fading. Yup, exactly. So how can do that? Well again, you know that for fading animation, it's basically going to start from opacity 0. There are a 100%, you'll meet opacity to be one. And that's a fading effect, right? Let me show you. So I can just see here at keyframe because he's going to be another animation and let's make it fading. And here I'm just gonna say here at 0%, make this opacity to, to be 0. And at 100%, make it one, right? So on a 100% and let's make it small and right? And then you. So this is our simple federated animation because at 0 points there'll be opacity 0% opacity one. Now, obviously, in order to apply it, we need to have a class. So I can simply is a c here, fading glass. And then I can see animation. And then I can see here fading. And then I'd say over the course of 1 second, go ahead and fading and obviously enemies and Mickey small here. And now what I can do, I can just grab this one and let me just go right here. And let me just give it a class of feeding to my pregnancy. If I save it. And you see, if I just go here to see if I refresh, you see this is going to feed NC, it's fitting in. You see, very smooth. I mean, it's very fast, so let me just go right here. Let me just say here five seconds. So you can see clearly, if I refresh to see that now 12345 and I'll say it's taking phi second to fading. Our Fidel emission working properly. But obviously, we need to wait until this animation completes. So for that, we can just go right here and we need almost two seconds to wait here you see this typing effect animation will act take two seconds to complete. So we need to wait two seconds. So one way we can actually just not just add it here, for example, I can say animation delay and make it to second. Or I could get another class and I can stick it. Let me show you. So I can see here, wait two seconds. And now I can grab this animation delay from there. And I can paste it right here. And now what I can do, I can grab this, wait two seconds. I can go right here and I can see her fairing, but wait two seconds and save it. And now if I go here to see that, if I refresh, you'll see that now it is Yasi, it's not working. Actually. It's a fading in and fading out in the very last moment, which is not correct. So how can I solve this problem? Well, it's very easy. We can go right here and here on fitting, I can see him animation film mode. So I can see an emission Fillmore and I can see here both. So it's basically was going to do, is going to apply this first step at the very beginning. So at the very beginning it's going to be 0 and it must, the dealer is over, then it is going to apply this effect here. But if I get rid of this one, you see that this animation applying instantly, right? We don't want it. We want the first step to be complete at the beginning and the second one is computed to be at the very end. Now what happen if I just go right here, you see, now it is going to, if I refresh, see, it's gone. And now after two seconds, it's appearing and it's signify a second, which is not good. So let's make it 1 second. And now if I refresh to see that now after two seconds, it will appear, say it's instantly fatty. So now it is working at really good. Let me just go right here. We need to do same thing for our button seconds and just go ahead and I can see her glass and are getting media fading effect. But here, because this is appearing after two seconds, you see after 2 second and it's taking once again to load. So what we can do here, this encoding should wait for three seconds. Yeah, because this is two and this is one is t. So let's go ahead and say here dot v. And let's look at three seconds. And now here, I can just give it a, an emission delay of three seconds. So once our animation complete and then pair of affairs, then only this one is actually going to get appear. So I can just go to it, it's here. Now. You wait for three seconds. So if I refresh S0, S1, then you go, then pack enough, and then our button. There we go. This is our project. This is completed, right? You see that now we have this amazing typing effect animation. And then that fading effect with animation delay, which is a really powerful. And again, I really like this smooth tapping effect. So I get rid of this one here. And I didn't like this one. You see, this looks really greasy. It's very cool. So again, it's your choice. If you want to use that stop tapping animation or smoother typing an emission, it's up to you, but this is how you can create these Taiping effect. Thanks for watching. 8. FullScreen Overlay Navbar With Circle Animation: This will be your going to learn that how to create this amazing fullest skin overly navigation bar in pure CSS. And you see it has this circle animation. So this is what exactly you're going to learn how to build in this movie. And also let me tell you that if I just go in these smart devices, it's completely response. You see, this is how it will look like in iPhone acts. And also let me tell you that if I go to this Dec stopped here, and if I just click here, you see if I just modify this one property, for example, if I make this 30%, now you see that hearts look like. You save that. Now it's giving the same circle effect in this. Suddenly see. Yup. So now instead of this full screen, it is not encircled. And you will learn exactly how to build it. So you can build it as a full skin navigation bar or even a simple circuit like this one. And this looks really creating. So if you're ready, then let me go to my quarter and let's get started with this full screen overlaid Napa. So heavy go Amun-Ra VS Code Editor and we have this simple estimate file to work with. Well does another file in main.css, we're going to write our CSS code, but as of right now it's empty. And then finally, we have another CSS file name default or CSS, where we have some default CSS code to make our project look good. So you see right here, this is the live preview of a project. And as you can see, that this project looking really good, and that's because of these lines of CSS code. So let me just go right here. A limited will explain you the HTML markup of this project. So here you see that the very first we have this heading, then we have paragraph, and then this anchor link. And you can see it right here. This is our heading paragraph, and this is the anchor link, which is basically I used this to just turn into a button. So now let me just go right here. And after that, our man who starts so you see that our menu is taught right from there. So this is our menu. It's a very simple and not always go ahead and uncomment it. And here's three. This is our menu. Look like it's look ugly for now, but obviously Vienna design it, right? So let me just quickly show you the HTML structure. So here you see that I have this section. We have a class name menu, and inside this amended class, we have one input, which is basically, I'm going to use for this hamburger icon. So when they click on it, it'll basically we're going to open our menu and then I click again, it is going to close it. So basically this check box is for totally our Manning. And next up we have our actual menu, whichever class off many wrapper. And inside this menu wrapper, we have only four menu, which is whole About Blog and contact. And obviously you can place whatever you want. But I think these four will do the trick. So there we go. This is our simple HTML structure for the menu. So now let me just go right here on men versus, and let's start styling our project. But first let me just go ahead and close it out because we no longer are we going to need that default CSS. So let's start with our actual menu wrapper. So let us go ahead and grab it. Images go right here. And our target, that menu wrapper class, I'm gonna start with width. And I just want to give it a 100% of the width. And then I want to give it to 100% the height. I'm going to use your position. And here it's going to be fixed. And now just after this, I want this to be 0. So I just want to put it on the left and that at the top here. So he's going to be top 0. Save it, and there you go. There's on many look like. Now what I can do, I can see her background. I just want to give it a white background. It's a plain white background. Obviously, I want to put these men who at the very center, vertically and horizontally. So for that, I'm gonna make use of flax boxes in our display flax. And now here, say justify content is going to be center and a line item is going to be centered. So now this is going to put them into compete center is because of we had this bit on the person and heightened represent. So we are taking the a 100% viewport, height and weight. So that's why it's going to place in exactly centered. And now because we have our all men in center, let me just go right here, and let's start working on these individual list. Let me just go right here and I'm gonna grab this man wrapper. And you see that in many wrap up, we have this list. So I can just, again, I'm going to paste that in and wrap up and look at this list. And you can see here that list is a tied off this man Rapa. That's why I'm targeting here. And now here, let's start putting our texts into sent out. So takes a line is going to be in centre. See there's an on-center. And then let me just add this list style to be none here. So in case if you have some time, it will get rid of it. And then I want to add some margin, top and bottom here. So I can say or margin. And let's set here. Top and bottom is going to be through them. And left-right is going to be 0 and m. And there you go. We have some space between these nav items. Now let's go ahead and style our individual link inside that neighbor, you see it's anchor tag. So let me just go right here. And here, I'll just put this anchor tag. I want to get rid of that underline. So I say your text is gonna be decoration. I set it, none. Secretion is gone. Now, I just want to increase the font size so I can say if one side is going to be 2.5 RAM. There we go. This is how it's gonna look. And then let me just say this color to be black because I need that black color. There we go. Now I want to set the font-weight to be bold, because ideally like Voltaire, and they go non-silicon bold. And then let me just add a little bit to padding around your texts. So it's gonna be 0.5. from top and bottom and one ramp electrolytes. So let me just go down right here and let's start working with that underlying. So for that, I need to target this list here. So let me just grab this man wrapper list. And then I can see here, after. Then here I can just walk on this content, which is basically going to be nothing because we don't want any contained here. Yeah, I need height here because my underlying is going to have some specific height, which is 12 pixel. I want you to display block here because I want it in separate line. So display block. And then also I want it to be a 100%, so it will take the full 100% 2-bit topics and parent container and you say it's already there, but we can't see that because we don't have background. And I can say to black and now you can see we have it right? So we'll obviously going to change this background in a bit, but first limit just post them up. So for that, we can set her portion to be absolute. So once we have that position. We can use that bottom property. And let's make it around 5%. Let's see, snow up. Yeah, it's, it's not pushing you to see it's not working. That's because we haven't seen this position relative to our actual list. You see we are targeting on this list after, so we have to push it right here. So we can say a position and let's make it relative. And there we go. Now it's up. Now you see that we cannot see actually that to reach one is above this font or this underline. So we need to make sure our font is above. So for that, let me just change the color to be red. And you see, now red is actually on the top. We don't want it right? We won't that red line to behind our font. So for that, I can make use of your jet index. And because I want it behind, I can sit here minus one and it's going to put behind our texts. And there we go. This is exactly what I want. Now obviously I want that a border radius so I can see a border radius. And let's make it ten pixels, save it. And we see that we had that border-radius. And now it is looking good. And obviously I do not want these kind of background. I wonder different banging on it. So I'm just gonna get rid of it. And at the below, I'm going to paste this code here we see that we have this background which is a linear gradient, 90 degree, and this is the background color, right? So I'm using this one and see how it looking, it'll look good. And again, if you want these kind of UI background, you can just always see UI gradient. And you'll get that site. You see this the first side. And here you can grab any kind of gradient you wish. For example, I can just go right here and you'll see that we have this tons of background and obviously can select by the color, green color or anything you wish. So for example, if I want this one, I can simply just go right here, copy this one, and then let me actually just get back to our Google because we needed to. And let me just go right here. And instead of that, I'm gonna paste it, this one. And obviously I need to go right here and you see there's an important so I need to get rid of it. So our last background take If it and there you go, you see? Yes, exactly. But obviously, I do not need this one because I already had this here. So there we go, save it. And there is our actually that line. So now this state is done nullable. Just go ahead and let see on how us, how it's gonna look like on a HAVA. So let me again just get rid of everything as of right now. And then here what I want is that I say list on how. And then after I do this, so once we hover while this one, it's actually going to change this after state so we can actually change it on how a, so what do we want to do on how a state? Well, obviously we want to make it look like a button. So it's very easy. We can see there's a height is 12 pixel. Well now we can make this a 100%, so we want a 100% height. And then you see that we have this bottom 5%. Well, I can just turn into 0. Yep, I don't want any bottom. And these two are enough fuzzy. No, it's actually pushing it here. But again, a v1, that transition and all the stuff just go here and you see that this actually that border-radius there. So let me just get rid of this border-radius so I can go here. I can say border-radius and let's make it 0. And you see that on how're, you see that now border-radius is gone. Perfect. Now obviously, I also want to switch that background color on other side. Well, on haha, I won't that pop on to appear on the left, this blue to appear right? Well, it's very easy. We can grab this background and you can just paste it right here. And if it is a 90-degree, once I make the 270. Now you see the difference, if I will see that now the Popper is appearing on the left side and these blues appearing on the right side. I want this to turn into white. Stop Black. So it sounds like a job for this list anyhow. So I will grab it from there. I'm gonna go right here and paste it. And then I say here, list on how. And then what you do. Balance. It's really easy because I does color to be white and that's it. If I go here to see that now if I have this one, see white. But again, we need that transition because there's no transition happening right now. All images go right here. Let's add it right here because this is all 200. What's great here? Some see a transition. It's going to be all pin 0.32, that Nivea, how others might see it slowly transition toward C. Now let's go ahead and do the same transition. After here. They're young here. So here, when I do that, let me show you if I just go right here, if I pasted the same transition. Now you see that if how this one you see, it's slowly, that buttons coming up see slowly, very slowly. Perfect. If I make it sound like a 3 second, you'll see that it's going to take the second appear C. C, oh, say, it's very slow. So now this is making it smooth. And there you go, perfect. So now this part is done. So also go ahead and style our actual button. You see right here, this is going to be many button. So this is what exactly we are going to style here because that's going to be our hamburger icon. So for that, we can just go write him a lemon. Just go down here. Hi, this Menu button. But you see that V can't see that button. So let's say if I set a background, you see, you cannot say. So we need to get rid of this one, Right? Well, for that, we can just go right here and never APA. And here I'm going to make use of one property name, clip path, which is going to clip this menu. So let me show you what I mean here. Here I must see clip pop. And then what I want to do is that I want to say here, suckle. And then I want it to only a beer, 25 pixel ISPs. And we'll just go ahead and grab a 100% and then minus eight, well, let's say around 80 pixel. And here on US auto save 80 pixels, every pixel on the size and see that now it clipped it and now it's look like a button. You see it is right here. So this is 25 pixel at this position, so this is x, and this is why. Now I can see my menu button. You see right here that hamburger icon. So first let me just put this menu button right here. So what I can do, I can obviously see that patient to be absolute because that's what it's going to put it there. And then I can say here top, and let's make it 50 pixels. And that's because I want to put it and top right. So I can say here, right, 50 pixels. And you see, it's going to put it right there. But first limit is give it a background and let's keep it black for now. But you see that it's limited, assume it little bit. So you see that this is how's look like. And again, it's not good. So we need that in a socle around there. So what I can do here, I can give it a width. Let's make it 50 pixels. Width and height is also 50%. And then what I can do here is that I can simply say a border radius. And then I can see at a 100%, which is going to make it suckle. And there you go. We got that circle right there. So let me first actually just an ohmic dim at the top. So I will use it to the index. And let's make it do here, which is going to put it to the top. You see that now it says up. So this is exactly what I'm looking for and then give it a color. So for color, I want to give it don't only we, let's say this one. So I grabbed this one, RGB color. From there. I'm going to go down right here. And I say Here are because I cover crop, you'll see, save it and there you go. This is how it look like. And this is what I'm doing, right? So let's make it white. Now. Save it and then go. Now it is a, it is not incentive. So for that, let me just make use of this. Flexbox is going to be displayed flux. And then I guess it quickly see your justify contains is going to be center, aligned, item is going to be in center. And then I can say a flex direction column. And that's actually going to put it into the centre. You see that is not in the exact center. Now, what I can do here, you see that it's actually look like this arrow here. So we can make this cursor to be pointers. So let's say a cursor is going to be Pointer. Say go here and see the not, the causes look like a pointer. Perfect. Exactly what I'm looking for. And you see when I click this one, it's actually checking this box here is taking this box. Obviously, we'll get back to it. Because if I taking it and taking this box here, you see that because happening, you see that here I have connected this input and this label. So see that is actually acting on input which is connected by this for active. So if I click on label, this is going to check. If I click on check, its automotive check. So that's what's happening here. There you go. Now let's go ahead and make them fit in perfect position. So for that, let me actually just go ahead and let me just again turning to black here because obviously I want to just, you know, basic, you know, one line. So for that, let me just go up here. And you see that at the very top right here, we have set it right? So let's seem to X value. So here I just want to make, let's say 76 pixel. And I think you see that now it is in little bit center. That's perfect. And then we'll see that it's pretty much down. So let's make it 76. Also. Save it, and then you go, it's not at the same position. And again, you can just play with it. For example, if I play 75 year, I think this is actually going to push it up. Yeah, and also let's make this 75. And there you go. So you're not going to be sick. I just it's very simple, right? So let's go ahead and fix it. And then I wouldn't just go right here. And let's make it white. Right. Now you see that we have our icon and again, this is quite big because of this. So now this is how it look like in the smaller stereo. So yup. Now this Menu button is done. Let's go ahead and display auto menu on click. So that's gonna be really interesting. So for that you see that we have their ID active. So what I can do, I can grab this idea to you so I can say a hash. And let's go with this active and then I can see checked. It means that we are looking for the checked stops. So see that once this check box is checked, then we're going to do something. So once it's checked, then I want to use this sibling selector. So you see this menu wrapper is a sibling of this. I can simply just grab this man rap. I can go here and I can just see Gottman wrapper. And then you'll see that we are clipping this path, right? You're going to have Excel. Well now I can expand it, fit. And then here I can say cycle, and let's make it a 100%, and that's it. If I save it and you see if I click on here, it doesn't went up yet. It's appearing. It's instantly appearing here. But again, there is a problem as because I want that circle appearing animation. Well obviously we haven't placed any transition. Right-hand man who wrapper. So we need to do that. For transition, I can just click here. I can go on this actual men wrapper. And I can just sit here transition. And let's make it all zero-point, maybe five seconds. Or once again, it's up to you and let's make it iss, which is a timing function. Say me. If I go here to see that now, you will see that you see, there you go. So this is our circle animation safe. It's pretty fast. You see the night is working and then you go, there's a menu. And again it's responses. It is responsive effect. So let me just show you something here. If I just click here, now see, once I click this one, it is actually working. It's toggling on a menu, but I can also click right here. You see this box click and say it's appeared. Yep. But again, we don't want these checkbox so we can easily Heidi to begin just enough. Grabbed this checkbox. And because we only have one checkbox, I can go at the very bottom. And here I can say this input. And I can just draw this, place, this display to be none. Save it and say that's actually gone. Now again, I can just use attribute selector. For example, I can just go right here. I can say input and let's say up type. And if it is typeof the checkbox, do that. And again, it's already gone. So we are being a little too specific here that but they'll go. This is the only thing won't hear. So that's part is done. Now you see this hamburger icon, will I took it from Font Awesome icon. So let me just go right here. Let me show you. You see that I'm using here. Wait, let me just make it big. And you see that I'm using this Font Awesome icon. You'll see Font Awesome icon. And it's very easy. You can just Google here and you can just search for font-awesome CDM. So CDN, CDN js.com. And then you can simply just click kept a copy. And then you can just paste it right here. And then for the icon, does go back. Search with Font Awesome. Here and then again click here and just search for air bar. And you see that we have this mouse click here and then click right here. And then you can just go right here and pasted. See, it's exactly the same thing. Let me just replacing ten is the same. So then we go. This is how I got this, I come. Now. This part is done. So now let us go ahead and design our closed state. Because you see on prostate, it's still the bar, but we don't want it Right. So for that, what we can do, we can go right here and then I'm going to grab this again from there. And let me actually just paste it here. And then here, I just want to target this guy over here. So you see that this is our actual menu button. So let me just grab this Menu button here. So it's gonna be dot Menu button. And then here you see that I have this active on, this active on. So I want to add dynamically here that goes icon. So I'm gonna describe that here. And here I can say span dot. And then I can say here before. And then here you see the secondary span act. You will see that we have it, see the span, and then we have this class active on. So I'm just grabbing the Spaniards. I can say this content clothes icon, click here, and it's going to appear right here and say it's not appearing. And that's because of this right here. So before and then we go, now it is appearing, but we need to hide this body. Well, you see that this is right, this one active off. So we can simply just close it off. So again, we're gonna grab the same exact thing. But instead here, I'm just gonna say active off. And then I can say here, let me get rid of it. And let's say her display to be displayed and let's make it save it. And I said that now is gone. So now we're left with this cross. I can see when I click appear and disappear. So that's pretty neat here this working and let me just increase the font size. Font size. Let's make it 1.5 mm. Save it. If I go here to see that, there we go, we haven't. So that's perfect. Now what I wanna do here, I need their Gradient Circle background. Well, for that, I can simply just grab everything. And because you see this is actually our many button, you see this is our menu button. But I can say here that on active checked, then I can put the styling for our menu button. So this is a styling for check the menu button. What I can do here, I can just go down and then I can go up right here on our gradient. Grab it. I'm going to go down right here. I'll paste it and I'll save it. And you see that now we do have it. So say we have it, but again, we need to make these color TV rights. So let's make this color. And it's going to be right. There we go. So again, we got it. And this is going from left to right. So what I can do here, I can make it top to bottom, so it's going to be 180 degree and now see it's top to bottom. Perfect. And then he is now working. So yeah, that's OK to say that now we have our fully functional menu. Is it? And this is quite small. So you can actually just give some padding around our button. So what I can do, I can go up here as it is our menu button. Let me actually add some padding. So say a padding. Let's make it 0.5 gram around our button, save it, and now see our buttons rookie quite big. And you can see that again, we're overlapping that stuff as I see it looking like ugly. You see this other way targets look like a really bad limit is no zombie Tennessee, this is looking really bad. So you can actually easily fix it. We can go up right here again and again. We can just make it a slash, something like 80, right? It's still going to work. 87 and z that now it's actually gone. And let me just go right here and click heresy that now we have our menu icon. And I'm going to show you something really special. So what happens if I just go right at the bottom on active, so it's right here. And what happens if I make this 30% incidence of a 100? And now what I think was gonna happen, let me just click here and click. And this is how it's looking. It's appearing like a circle in the very middle, you see. So this is a nice cool effect. You can actually have it even academic it 20 and this is going to make it even smaller. So this is pretty neat yell he's added. But again, it's up to you what you want to do. I can make this a 50% and this is how it's gonna look like. Again, it's not looking that much good, but you get the idea, right. I'm just play with it. So 30%, and there we go. So now let me just go ahead and make this again a 100%. And there you go. There's our fully skin menu. And again, this is fully responsive. It's going to work in solar devices, see. So yeah, this is how you can create these awesome full-screen circle animation, overly navbar. 9. Luxury Custom Scrollbar for Your Website (in Webkit): So in this movie, you're going to learn that how to create these amazing luxury custom scroll bar for your website. Obviously, this call-back is going to increase the look and feel of your website design. And in this movie, you're going to learn that a, how to create this one. And even you see that when I hover over this one, it's changing the sprawl track cover is safe. It's incredibly powerful. So are you ready to create your own custom scroll bar for your website or for your next project. The let me go to my Quatre unless guess status. So heavy go, I'm on my VS Code Editor and we had this long, long STL file to work with. But let me tell you that you don't have to worry about it, because the only reason you're here is to see one line of code. And you see right here, they said this is the stylesheet file I've linked in the head of this document, which is scroll bar dot CSS. And you see this file right here. So this is the only file we're going to care about. And we're going to walk on because we don't need to see or understand or modify the ANY estimates structure we already have. We just need to customize this scroll bar. And for that, we don't need to understand the structure of our webpage. So let me just go right here and you see this is our webpage and this is basically our estimate file, tablet I have downloaded from internet because obviously it's looking good and we're going to make this scroll bar looks good. So it's going to match the theme. So that's why I have downloaded this estimable tablet. And obviously we don't have to change any estimate structure. So we only want to focus on this scroll bar and we're going to style it right? So you see, now this color is not looking that good. You say it's a very basic, simple a scroll bar, but we want to make it look like this. Css tricks called, but you see, it is right here. And obviously this is the place where I got the inspiration. So here you see that I'm on this page for a reason. You see we have many property or pseudo element we can use to target the specific poster of this scrollbar. Well, obviously I'm going to talk about them. So let me just go ahead and zoom it in a B2C. It's looking good, right? Yeah, there you go. So the very first you see there's a webkit scroll bar. And this is basically saying that you can target this entire scroll bar by using this pseudo selector. So why don't we just go ahead and let me just grab it. Let me just go right here. And I'm just going to just paste it here. And here. I'm gonna give it a background of something like different. For example, let's make it red. And if I just say what if I go here, you see that now this is our call bar, and now this has become. And so there we go. We have one thing. Now, obviously I want to make it wide because you see that this is quite wide, right? So I can just go right here. And I can see here with the b, let's make it around 30 pixels. 30 pixel saving images go right here. And you see that now we have this 30 pixel wide scroll bar, which is perfect. So now let me just go right here and you see that we have this webkit scrollbar buttons. And you say, this is kind of that scroll up and scroll down buttons. And obviously we don't have that button in here, so we're not gonna need that pseudo-selector, but we definitely don't need data that gets called track. Because we are talking about the track here. And you see in three, you see this is the track mince way or we can use that scrollbar. Tom Ni. So let me just go right here and let me just use that web gets Colbert crack. So here I'm going to just use it. And now I'll get into this as background from the scrollbar. And instead I'll paste it into web gets called by prime. But for that limit is go right here. And I want to make use of linear gradient. So let me just go to this blacker because obviously we're gonna need that black stuff. So you see, it's like midnight city. We'd like to be grab it but it's not good. So let me just anyway, grab it. Let me just go right here and let me paste it. There we go. This is our track and you see this is how it look like. You say, Yep, so this is our frac, which obviously looking good, but this is not exactly what I want. So what I can do here, I can paste my custom background here. So I have it in my clipboard and paste it right here. And now facility, you see if I go here, you said now look like this because this is the exact backgrounds Colbert crack from CSS tricks. So that's why I copied here and I pasted here. You see, now it's looking good. But obviously, we need to work on this, a thumbnail. Yup. It's called permanent or thumb button. And you can see it's right here, webkit, scrollbar, TM. So what I can do, I can easily copy. I can go right here and I can paste it, and then I'll give it to some kind of a background. Yup, I can go right here. And this is the gradient background. Obviously, you can just go ahead and give it anything you wish. For example, I can see her background. Let's make it red. If I just go here and you see that now we have this red tonally say, Yep, it is working. But obviously I want to give it a, some kind of a gradient background, which actually wanted to make it look really good and really nice. So what I do, I can just grab this here and I can just copy this one. I'm gonna go right here and I'm gonna paste it. Now if I go here, you see that we do have this gradient background tongue and let me just actually make it to top so I can say it to top and lets me, It's good to top. And if I save it, if you're going to see that now, it's going from the bottom to top. And C, we have this gradient thumbnail. And obviously we have to give some kind of a border-radius you see right here. So it's very easy. We can go right here, and obviously, we can see here border radius. Let's make it 30 pixels. Save it. And if I go here to see that now we do have that 30 pixel border radius, which looks really good, isn't it? So there we go. This is our custom scroll bar. Again, if you want to increase the width of this callback, for example, if you want to make, let's say 50 pixels, It's up to you. You see that now it is quite big. Or if you want to decrease the width of this scroll bar, for example, let's make it ten pixels, while it's totally up to you. Now this is how it look like in ten pixels. And this looks really nice. I mean, this giving a nice effect. So if I just say 20 and say, This is how it look likes. So this is really good. And again, we can give some kind of, you see right here, I'm sure you, this is some kind of insect box shadow right here is if there's instead box saddle and I have that box shadow, copy my clipboard so I can easily paste it right here and see this is the box shadow which is inset here, means it's going to create a shadow. Inside the thumbnail, if I save it, if I go here, you see that now we have that shuttle shadow effect. Let me show you, let me just make it big. You see that the equity, them just go right here. Let me make it something like a 200 pixel, which is very big. And you see that shadow, that into shadow. Yes. This is the shadow I'm talking about. So this is very powerful and it's actually giving you a great bloke here. So let me go ahead and reset it and they'll go, This is our custom scroll bar. And again, we can do a ton of things. For example, if you want to style that corner of the scroll bar, you can see right here the six position when obviously we don't have that corner. So it's not going to work here because to be obviously cannot make use of it. And we also have that Beckett resize it. So you see that is a resizes means. If you want to create your own scroll bar for a custom section, then you can use this one. But we obviously not doing it here. We are using the scroll bar for our entire website and we don't have resize our button or this corner and so on. So we are working with only scrollbar than track. And then finally, the thumbnail which is right here. So yep, this is how you can do it. But let me just show you one more thing. So let's say on Howard, this track color should be changed. Well, it's very easy. You can just go right here and we can grab this entire set here. I can go down, I can say here on how a, and let's change it right? So I can say here's something like a background and I don't know, let's make it something like, I don't know, maybe green, right? Or let's make it lime light is gone. So say if I go here, you see that now if I just go here to see the restaurant to line Z o, now it's to underline, say, yeah, there you go. So you can actually turn the background of the scrollbar track. Yes, but let me just show you one awesome thing. Let me just get rid of it. We don't want it. And what I can do, I can just copy this from there. And I can say here that comma and on her. Just go ahead and apply the same background as a thumbnail? Yes. And if I just go crazy that now we have same bag around as a terminal. It's a gradient scrollbar, right? It's very nice. And then you, this looks really good. And we can do same thing right here. Yes, we can grab this TM and I can just give it a comma. And here I can see that on Howard. So now what we are doing here, that one, however, we are sitting in the background. Now the track color is going to adopt the TEM column, and Thumper is going to adopt the tracker. You see. So it's incredibly powerful and this is how you can create your own custom scroll bar for your website. Now let me tell you one more thing that this custom scrollbar is only going to work on web kit browsers, for example, Chrome, Opera and so on, but not in Firefox. Let me show you. So here you see that I've opened the same page in Firefox, right am. And it is a it is not working. Yes, it's a live preview, but this is not working in Firefox because this function is only for the web get browsers. And you can see right here by the code you see it's only going to walk on webkit process. So just remember that it's very important to understand and let me just get back. This is called tack to 30 pixel. So if I save it, if I go here to see that now we have this 30 pixel tom, Which is really good. Now let's just go back to CSS strike. And you see that this is how you can create your own custom scroll bar for your website. But let me tell you that again. If you want to create a more kind of a complex, a scroll bar where you can come visit this URL to get to this article or lemons is go ahead and copy this URL. Let me just go up right here and just paste it here. And let me just committed. So now it is commented right here in so score. So you can download the source code of this project where you'll see the link. So yeah, this is it for this movie. If you haven't out, then let me know in the forum and thanks for watching. 10. Creative Background Shape Divider: This will be, you're going to learn that how to create a discrete you background shaped divider in pure CSS using SVG. Yeah, you're going to learn that how to create these. And not only this, you are going to learn that how to create any kind of shape divider you want for your project. For example, we have this one divide example. Then we have here another one. So if I just comment it out, and if I just uncomment this one, you see, this is a totally bag and divider, but it's working on the same CSS essay. It's powerful. And then we have another one, for example, I can just get rid of it and then I can turn this on here. If I just go here, again, we need to rotate it so I can go here and let me just comment it out. You see that now these kind of shaped you and I say it's powerful. And if I just go right here, let me just comment it out. And you see at the finally, we have a ton of things and we're going to learn everything. But first let me just turn it on and you see that this is a very simple divider which is polygon. And again, I'm applying it at the bottom, but you can also apply it at the top. Yup. We can just go right here and you see that we have it at all. I'm committed. And if I go here to see that now we have the same divider at the top. And you see it's giving these kind of look. So you're going to learn how to create all these kind of shaped divider in this movie. So if already the, let me go to my code editor and let's get started. So heavy go Amun-Ra VS Code Editor, and we have the simple estimate file to walk with. Well does another phylum, app.js is where we're gonna write our CSS code. But as of right now it's empty. And then we have another file named default or stasis, where we have some default CSS code to make our project look good. So here you see this is the live preview of a project and this is looking really good. Thus because of these lines of CSS code. And also you see that we have only this one section, which is the hero section. And to be honest, this is the only section we're gonna need for this. So our goal for this project is to create that amazing background shaped divider and not to make this project looks go to because that is going to distract our focus and also will make this video lens here. And obviously we don't want it. So now let me just go to index.html and let me explain you the HTML markup quickly. So here you see that inside this body, we have one section, and this section have a class of Hero, which is basically, this is the hero section. And inside this heterojunction, we have this main contained, which is the hero body, you see right here. And inside this hero body, we have to, the first section is basically the normal information. And then second one is the image. And you can see right here, this is the first section, and this is the second section inside the hero body. And this is it. This is a very simple HTML structure. So now because we already have this section, now let's go ahead and create that shaped. You've either at the bottom of this section. So for that, we obviously going to need that shape. So what do we can do here? We can create a shape in Adobe Illustrator. And later in this movie, I'll show you how we get pre-built shape online for free. But first, let me just show you because if you're a designer, then this will be a goldmine to you. So how can you create safe? Well, you can obviously use this pen tool to create any kind of more complex and something like a shape. But obviously, I don't want it. I just want to keep it as simple as possible. So I'm gonna create this, strangles it. So I'll just start from there and I'll go till right here. And then it's a simple triangle. And then let me just use this to Riyadh word. And let me just make it small, right? So we're going to easier SVG. So here, there we go, be habit. Now what I can do, I can just feel it if I wish to, for example, if I want to feed it with some color. So let's say I'm going to have just fill it with this red color here. And there you go, we had this great color. And if indicated are the strokes, while it's very easy, just getting stuck here. So then we go, our shape is ready and this is the most simple shape. Now what I do, I need the SVG file of it. So I can go to this file and then I can go to export and export as. And then here I can choose, let's say SVG here. And then I click hit Export and you see, you see there's a button option record click here, and we want that code. So I can simply just grab the code. And I can just go right here. And I want these safety wedded to be at the bottom. So I can just go ahead inside this huge church and I'll paste it and let me just go ahead. Form it is document so you can see clearly. And there we go. Here is our shapes. So see, this is an SVG and we have this depths. Obviously, I'll get rid of it in a bit. But this is our shape, right? And we want the shape to be appear right here. So what do you think? How we can make our shape to appear at the very bottom in this section and create that shaped divider effect. Well, obviously it's going to sit at the top of this hero section. Yep, let me show you. So I can just go right here in atherosclerosis. And here you see that this is SVG. Well, hominins give it an ID of something like a divider. And then what I can do, I can just go right adaptive CSS and I'm a target ID divider. And here what I can do, I can simply say position and it's going to be absolute. So let's say here absolute. And let me tell you that because they're using your equation absolute right here. Well, we need to set its parent to be positioned the let u, which is this hero. So what you can do, we can go to default of CSS and you see that here, I have styled at Hiroshi action. So what I can do, I can say here petition to be relative, and there we go. And now we can just close it up because we don't need that default CSS anymore. Now I can go right here. And because these apportion absolute and I want to make it sit at bottom, I can use this important here, and I can set to be 0. And if I go here to see that now it is already there. So there we have it. But again, this is red. So I can just go right here and I can make it something like a white. Yeah. It's that simple. Why go here? And there we go. We have that amazing divided you see, let me just make it even bigger. You see, now you will see it clearly because it's sitting at the very bottom, right here, and there you go. This is our shape divider. So it's all about shape. I mean, you just need a shape and then you can simply just put it any way you wish. For example, if you want that divider to be appear on bottom, you can just basic bottom. And if you want that, you want it to appear in the top, you can just place in the top. Now let me just go here and you see that we can simply get rid of it if you don't have one, right, you can just simply get rid of it. And instead, I can just use this polygon. And here I can see that polygon. And then I can say here fill. And let's make it white. Enough ego heresy, that still white. But the best thing is that we are controlling this background in our CSS file. So that is really good. And again, you can just do whatever you want. For example, I can say here pink, and if I go here to see, now, it's turn into pink here. So this is the best part. You are controlling everything from the CSS file where it needs to control. So there you go. Let me just back to white and there we go. So now again, I set it to be at the bottom. But if you want this same divided at the top, so just specify here. And now we have the same stuff at the bottom and the top, but say the top one is not working. The reason is because we are just using this divider. So what you can see here, we can say here something like Wharton divider, because see that I'm seeing these bottom two zeros. So that's why, and to say the bottom divider. And I can use this ID and apply at the bottom divider. And then we have this top divider. So I can say top divider. And now the only difference is going to be this particular property. Yep, so let me just copy it. I'm gonna go down here. I'll paste it and I'll keep it to bottom, but I'll change this one instead because this is technically at the top. So I'll say atop divide up. And now instead of bottom LCD dot 0, and that's it. If I go here, you see that we, again do have it, but it is not working. So the best way is that you can simply rotate it using CSS transform property. So it's super simple. I can just go right here. And I can say here, transform, right? And then I can say here, repeat, then it's going to be 180 degree. So if I save it, if I go here to see that now, I've rotated it 180 degree and see it's looking really good because we have now two shapes. One at the bottom and the top. Say, it's incredible. So this is how we can create these background divider. But again, it's really pain to just go to Adobe Illustrator and created until and unless you are a designer. So again, if you're a designer, just go ahead and use this pen tool to create any kind of a complex shape. It's up to you, right? Go ahead, give it a shot. So actually let me just do it for you. So let me just go ahead and get rid of it. And now I'm gonna just grab this again Paint Tool. And we're gonna do something like this one, right? So we're gonna create like these kind of shape. Again, this is not a perfect. So I'll keep it like this symbol here. And there we go. And then Hiroko, right? So let me just go ahead and again, I'm gonna do the same thing I'm about to file. I'm gonna go to Export, Export As. And then I can just go SVG and then I can say export, and then I grab the sugar. And now I'm gonna grab it from there. I'm gonna go right here. And here. I'm going to paste it at the bottom, right. And now let me just form it is documents, so it'll be really formulated. I do not want this one because I'm controlling it via our CSS. So this is it. Now what I can do here, I can grab the same thing, the same ID, and I can just get rid of it. And let me just comment this out. Now if I save it because you see that we already have that styling right here. So I can just simply apply this ID divider. And if I go here, you see that now we have that shape. Right here. You see, yep. You see that sheep I just created, it's looking nice. No, obviously is looking ugly. But that's not the point here. The point here is that you can create any kind of shape and it can use it here. Do I do? So let me just go ahead and again, commended. And now let me go here and let me show you a side. We're going to get any kind of shape for free. So here you see that I opened that side right here. So we can simply just type on the ruble shaped divider, or you can visit this shaped divider dot app and you'll get to this website here. Now this website already have Millie kind of shapes. So for example, you see there is a v shape. So we already have this wave shape, so I can just turn his height to be small, big or anything you wish. You can simply say at the top or you want this to be at the bottom, you see right here. Or you can invert it. Or we can simply say a flip on anything you wish. It's up to you, right? You can create anything you wish. For example, if I go here and there's a wave opacity, you see this one, then we have this call. Again. You can just see how much you want. It's up to you. For example, if there is a triangle estimate rate and there's a tilt, and then we have this arrow, you say, and it's split. Also this book here does a ton of shape, but it's up to you. Just go ahead and choose anything you wish. So as if I don't, let me just make this Malia, and I'm going to use this. Okay, sometimes you click here and I just need this SVG file and that's it. So just click on this SVG. I'm gonna go right here and I'm gonna paste it here. I can just grab this ID bottom divider, and I'm going to just paste it right there. And now if I say, what if I go here and you see that indeed we have that shape, but it's in black. So what do we do here? We can just go right here. And again, you see that now we previously had this polygon. Now we have this path. So what I can do here, I can put a comma and I can say apart. And now if I save it, if I go here to see that now you see this wave and this wave is quite big. Obviously. We do not want that much big wave, but it looks good in small devices you see? And the small, it's looking good. But in the big devices like I met, it is not looking that good. But that's not the point here. The point is that you're going to get any kind of shapes right from here. So let's this time, try this. Cough. And let me just give this kind of height here. Let's make it distribute to be something like this. I don't know how it's looking. I'm not sure exactly. I don't know. Let's skip this one night and always grab it from there. Again, I'm like rap is SVG. I'm going to write here. And here I'm gonna write, I'm gonna just grab this ID bottom D wider, and I'll just paste it right here, right? And here. I'll just comment this out. Save it. If I just go here, you see that we have that background divider, which looking really nice. And let me just go up here and let me just committee down their young. And you see it's looking nice. So yeah, this is really powerful and it can do whatever you want. It's pretty fun here. So now this time I want to use this wave opacity. And you see the red is like, I'm going to use this one here. And I think, yeah, I think this is fine. And I'm not sure. But let's create this one, right? This looks good to me and I can click here. Let me just grab this one because this is gonna be the final one. So let's grab it. I'm going to go right here. I'm going to just paste it at the very bottom here, right? And here again, I can grab this ideally by the bottom. I can just paste it right here. And I just commented out the previous one, save it. And if I go here, you see that now we have it and again, it is not working properly. So obviously we can just go right here. And you see that we need to rotate it 180 degree. So let me just go right here. And again, copy the same code here. I'll go to this modern divider and I just pasted here transform and now rotating each 180 degree. If I go here to see that now it's what editor you rotate it and this is how it's looking. So it's looking pretty nice, isn't it? But I see there is actually a very shuttle border right there. Well, that's happening because we have some default margin right there. So I can get rid of this module so I can see that margin is going to be Bottom. And let's make it minus 0.1 RAM or three pixel for pixel. And I see that margin-bottom is actually gone. And now it's look like a real shaped divider. There we go. It's super easy and super simple to do that. So this is how we can create that creative background shaped divider. So again, if you want to go back to our previous one, which is that triangle, you see polygon one, right? This one. Well, we can just go ahead and uncomment it and Amato and uncomment this one, right? This is pretty neat here. The figure here you see that again, have this is rotated because of this. So I can just go ahead and comment it out, save it. If I go ahead and see that this is the very first shape, whether we have talked about and this is hearts know. So yeah, this is how can create that, create you background shaped divider. And again, if you want any shape, just visit this website, shaved divided dot app. And just, you know, just click anywhere you wish. Just manipulate it as you wish, right? And use it. So yeah, this is it for this movie. Thanks for watching. 11. Smooth Gooey Menu Buttons: So this will be, you're going to learn that how to create this amazing GUI Button with the fascinating animation or transition you see. This is the Google button and see it smoothly transition to expand and smoothly transition too close. You see. And this is very amazing. And you see even this close button is smoothly animating. And in this movie, you're going to learn that how to create it. And no matter what the size of your window is, it will always go into stick at that position you define and you're going to base it any way you wish. For example, in bottom right, on bottom lived or top-left, top-right, it is always going to remain at the same position. And in this movie, I'll show you how to create this amazing goal button with this transition. So if you're ready to learn the let me go to my co-editor. Let's get started. Here we go. I'm on my Viscoat, eta, and we have this simplest Timofeyev to walk with. Well, there's another phylum app.js is, where are we going to write our CSS code? But as of right now it's empty. And then finally, we have another finding default OCS is where we have some default CSS code to make our project look good. So let me show you the live preview project. And here we go. You see it's looking quite good. And that's because of these lines of default CSS code. Easily see that this is a very simple default code for our body. You see I have some code for our heading one then for this paragraph. And then these are the enter specific styling to make this look like a button. You see right here. And here we have this button. You see, yeah, this is a code to make it look like a button. And then we have this media query to make it look nice on smaller devices, and that's it. So obviously this is not the focus of this project. So let me just go ahead and close this default diseases because we're not going to work on that. Now let me just quickly show you the HTML structure of this project. And you see that we literally have ten line of HTML code. You see that first one we have this heading which is a GUI better. Then we had this paragraph and then this anchor link. And you can see right here, this is the heading. Then we have this paradox. And this is the anchor link, which will look like a button. But now this is not the focus. The focus is this section. So let me just uncomment it. And when I do, if I go here to see that these are not styles, you see, yeah, I'm using here Font Awesome, icon, but we'll get back to it in a bit. But first, these are the very simple buttons, right? So you see that this is a div section which has the idea of a GUI menu. And then we have a class of GUI menu solving a target. Both of it, the one with JavaScript, which is this ID and this class with CSS code. And you see that I have this app.js. And that's because we're going to need a little bit JavaScript just to open it and close it. That's it. So yeah, we will get back to it. But first here to see that I have to tell five menu item. See that every single man you have this one common class which is going button, and then one unit class, which is good, but in 12345, right? And then in the very first, many would end, which is this plus sign. Where are we going to click it to open it, where it also has this ID. It's a CB1. Again, this is for JavaScript to target it. And then we have this Font Awesome icon. So you see that at the top, I'm using this font, awesome firefighter. Ellie could easily just use it from here. So here on Google, just type you have Font, Awesome, Syrian. And then you see that there'll be CDN JS right here. Click and then grab the very first ones. So copy this URL and then you can just paste it right here. Now, in order to grab those icons, you can just see iPhone five, right? And then click on right here. And then here you can search for your icon. So let me just go right here and you see that I'm using here this Facebook WhatsApp, Facebook Messenger than analog and Instagram, right? So these are all Font Awesome icons. So here I can say something like, let's say Facebook. Click here, enter. And then you see that we have this Facebook icon and we also have this Facebook Messenger. Click on Facebook Messenger. And then it will go to take us to a different page. And you can just simply copy this one. And then I can paste it right here. So let me just replace it because it's exactly the same. You see, I just simplicity. Yep, this is how I'm using Font Awesome icon, and that's it. So then we go, this is our basic estimator structure and this is how it's looked like at this time. So let me just go right here and let's start styling. I'm gonna grab this GUI menu class right here and just type it in class. So the very first thing is that I want this blue menu to appear at, right at this position at the bottom line. So what I do, I can go here and I can use this position to absolute and R here, I can say, just go ahead and put it the right, let's say 50 pixel and bottom 50 pixels. So it's going to be on bottom right. Now if I go here to see that it's appearing at the bottom right. So there you go. Now you can see it. And why don't you just go ahead and make these icons a little bit big. So I can simply just grab this here, and I can just go here, and I can use that attribute selector. So it's going to be our class. And then I can say this star here. And then here I can say if I found this any beer inside our icon, then just go ahead and apply the styling. And in this case, I want to make this font size to be 40 pixel. And obviously we can always decrease it later. So as of right now, they are good, not directly very big, I think. Pretty because it has got biggest. Again, we'll come to it because we're going to add that background radius here. So we'll get back to it. So now we do have it. Let me just go right here. And let me just go and start with our GUI button. So I'm going to grab the script in class, and let's go ahead. And this is going to be our main styling. So the very first, I'm gonna sit in this background to be white. So I need a background to be white on blue buttons. And you see that they actually become more idea. Okay, fine. So now I want to be, let's say 55 pixel and height. I also need 55 pixel. I can easily set border-radius and tsunami. Perfect sucker, because if we have same height and same way, there you go. Nice looking quite big. So let me just go right here and let's make this border radius. And I just wanted to 100%, which is perfect circle. And there you have it. Now let me just give it a color. So in this case, what I want to do here is that I want to use the same color we have here. So I'm going to just use this guy over here because you see that this pople kind of color. So throws it out. And here I am, I say color and estimate this properly. Let me go here. And you see that we do have it. So why don't we just go ahead and in case it's a font size. So I'm just gonna give me to some kind of space like font size. And let's make it around particular pixel. If I go here, see. That no, it's not looking good. But anyway, we're going to keep it for now. And let's move on. So I'm gonna just sit your text align and let's make it center because I want it incomplete center. And there we go. It is now in center. And now for each individual grey buttons, I want it to be this bach shadow. Yep, this box shadow, which is going to add a shuttle shadow, which is going to give a different kind of effect. And now what I want to do is that I see this, they are not properly aligned, right? So I just want to align it completely centered vertically and horizontally. For that, I can make use of a display flex, right? So I can see, you know, display flex, there's going to be flexbox. And then I can say justifiably contained in I just put it in centre, save it. If I go here and you see they are not clearly in centers. So let me just set your flex direction column. So flex direction and let's make it column, save it. And he said they are stayed quiet, not in center. But the one thing you can do here is they see that this is quite small, so let's make it 30 pixel. And I think that will do the trick you see, now, I got it right. There you go. So this is the perfectly what I'm looking for. Now we won't disability first menu button to be the top. And then this 1 second, third, fourth and this unfair. So they all will be in the same place. So how will do that? Where we can go right here, and I can just go right here. I can say a position and I can make these absolute left 0. And then it's going to be bottom's 0. As soon I do that, you see that they all going to sit in a bar BC, and the one place they go, This is exactly what I'm looking for. But first let me just go right up here. And it's, it is the right crypto pixel, as it won 50 pixels. And there you go. I just got it right here. So again, I want this button, this plus to be the very first one, and this instrument up to the very last one. But you see that Instagram is the way the first, yes, we're gonna use zed index. So let me just go right here. And let's start grabbing this all classes. For example, this is going to be z B1. So Jimmy Y1 is going to be the fifth zed index because you see that a, b total have five menu items. So we can just make this our five jet index and then 54321. But if you have even a more buttons, then you need to be careful here on a target that x0 b1. And this is going to have a zed index off five because this is going to be the very top one. And then I can do the same thing for the rest of buttons. So let me just put it in one single line because we don't have to split our line here. So I'm just going to just switch it five times. And then Jerry index four will be the second button. The third button is going to have as our index of three. This forth what is going to be half as any ticks off too. And the very final, which is the fifth one, is going to have a jet index upon if I save it, if I go here to see that now there's a plus at the top. And this is exactly what I need here. And if I just go ahead and uncomment it, they will still look the same. Yep. Only the difference will be at this position. So once we click here, then this first one is going to emit first, then this is gonna be second, third, fourth, fifth. So it will give us a kind of a GUI effect. So there you go, you got it. So now I can form a document and we're going to put it into another line. And again, if we're not finished with it. We need to add transition here, but it will do that later. But first, this is the collapse button standing. Now we need to design the open state of this button. Yeah. So for that, it is an open state. We need to go right here. And this is going to be our Greek many, someone grabbed is going menu. I'm gonna just paste it right here. And then I'll say a dot open because we're going to apply these open class right here dynamically. So I'm just going to use this open class and then let me just go ahead and manually set there for now. And we later remove it and we'll do it by tasking. So there you go. Now we have this open state. Now let's go ahead and start designing our GUI buttons for open state. So the very first begun to apply on this first button. So it's gonna be GLP-1, right? So I see him dot-dot-dot cb1. And what I want this to happen. So what's this open? And this is not doubling capacity. It should look like a close, right? So what I can do here, we can use Transform, Right? We can use here transform property. And then I can see here rotate and there are adequate it, let's say 45-degree, right? If I save it, you'll get to see that now it is 45 degree and now it's look like at Lowe's, right? They see that it's actually pushed up right here. So let me just do something here. Let me just go right here. I'm going to use your this translate function. And then I just keep it to a 0 at the x-axis. But at the y axis, I want to see here minus three pixels. Say me. If I go here, I see that now it is a very pushed right here and it is incomplete center. So I want it to look like this in open state. So this is our first thing. Now let me just go right here. And again, you see that this one is on spent. So I can also see here like TB1 span, right? And it's totally going to work just fine. So let's keep it, don't buy it. So I'm gonna just grab it from there. And I'm just gonna paste it right here because our first i starting is done. Now what I want to be second is that everything is already designed. I just want to place it right at this position, right? So what I can do here, I can get rid of it and I can see here bottom. And let's make it 80 pixel. So I'm just giving a difference of 80 pixels if I go, yeah, I see that now there's our second menu, which is on 80 pixel difference. And I think this is good, right? You're going to just make it even lower, for example, 70 pixels, but it's totally up to you. I think 80 pixel is good for me, right? And again, if you do the same thing for others, exactly. I'm just gonna put it here and let's make it three. And then you see it is 80. So let's make it 116, right? So it's going to be multiplied by two, so it's going to be 1 sixth. I go here, you see that now a dispersion Third. And then we're gonna grab this boundary and I just push it down here. And this is going to be the day before, which is but unfold. And this is going to be 83 to 40. So let me get to 40. If I go here to see that now, there we go, a dispersion. And then we finally have our last button, which is the fifth one. And especially to five. And then 80, 4A rate 20. If I go here, you see that now at dispersion, this is the open state of our buttons and it's looking fine tuning. So now what I can do here, I can just go right here. And why don't we just go ahead and get rid of this open. And let's work on our JavaScript. And then we'll get back to this one and do some transitional stuff here. Right, so for that, let me just go right here and you see that app.js. Yep. What are we gonna do here? Breed to capture the Click on this GUI Button, one, which you see right here. And here I can use this document.getElementById ID because we're going to get it by ID, right? This one, it's TB1. So I'll go right here and say, yes, genuine, get it, and then add an event listener there. So there you go. Edit event listener. And what is the event B won't listen for where we want. Listened for a click. Yep. And then once somebody click on this event, go ahead and execute this function or call this function. And the function name is going to be to the menu. The graph is toggle man here, and we can create a function. So for that, let me just go ahead and create the function. And this is going to be functional. So from Shawna. And then here and grab our GUI menu. So I'm just gonna grab this from here, because this is what exactly we want to open, right? So we can go right here and say let, it's going to be Gui menu. And then I can see your document dot getElementByID. And you know which ideas, right? Yep, it's ugly menu right here. So I'll go here. And then because we have it right here, we need to simply toggle this open class. You see this open cluster. That's it. So if I click that one, it should apply it. And I'm going to click again it remove it. So how can do that in JavaScript? Well, super-easy. We can just target here going menu. And then I can see class list. And then I can see him Double. And then we go which when he wanted to them, well, I wanted to the list open class. I'm going to write your piston and this is it. Yep, it is going to work. I'm sure you So I guess the alert and let's see here something like you clicked, right? So we'll just check that it is working or not. So let me just, you know, fast-forward committed for now. And here, if I go right here, see if I click on this one, it's going to alert, click anything. You clicked. So now it is alerting us, it detecting that we're clicking it. So let me just go ahead and get rid of it. And now I'm committed. And now if I click Casey, that it's instantly coping C. And let me just do one thing at a C that I need to apply this cursor to be pointer on the first gooey butter right here. So let's sit here closer to the pointer. And if I go here, you see that we have it. There we go. So now once we clicking, it's actually appearing. But again, there's a no animation or no transition happening here. So we need to do that. So first of all, let's add some transition on these men is fast. For that. Let me just go right here. We'll get back to the first one in a bit. So here I'm gonna say transition, right? And here it is going to be just all transition and it's gonna be 0.5. second. And then I can see here is this is the condition timing function. You can just simply Googling. And I will just go right here. And you see you want to click on this one is the first one is going to be transition OC dysfunction happening, but other ones are not. So let me just go right here and I'm gonna grab the same one. And what I'm gonna do here is that I want to just increase 0.051 time. So I'm gonna say 55. And then I paste it right here and just make it six, which is a 60. Then I can go on here and I can see yes. 65. Yep. A little, a, little a delay, right? And there we go. So now we have transitional DB2, D3, D4, and D5. Now let me just go right here. And if I just click here to see that now there's a subtle transition happening. Now. It's looking very smooth. But you say that this plus sign, which is opening and closing, it's not looking good. So we need to add some transition there too. So that is actually our GD button one. So let me just go to disagreement in one area condition. So first of all, I'm going to click here and I'm going to give it a 0.5. second transition. And you see that this is on this span here, right? So integral right here, element is grab it. I'm gonna go down right here. And let's start with our spam. And then I'm gonna get rid off from there. And I can't read it from there. Save it. If I go here. You can see that shuttle dizzy theory shuttle transition. You see now this transition perfect. But as if it's actually in a rotating at the same place. So what we can do here, we can add some transform translate YE around minus three or four pixel. We're going to make it really smooth. So let me just go right here. And what I can do here, I can see here transformed. And then here I can say translate. There's going to be y. And let's make it around minus two pixel. If I go here to see that now if I click here, this is the now it's happening. You see not super smooth. Perfect. I can actually make it free and it will make it even smoother. Three, if I go here to see that our click and see nitric up even more smoother. And this is happening is because of Abyei have already added that and 0.3. right here, right? So yeah, I'm just basically copying that one right here. There you go. So now this is our Greek money. Perfect. Now we can just go ahead and resize it. It's going to work on any stuff you want, for example, to say it is going to work. Alright? So there you go. This is your GUI Button. And again, if you want to add even more ugly buttons, for example, I go here. So let me add here the sixth one, right? So I'm say IDB six. And then here I'll give something difference for example. So let's go for a Reddit. I know this is not an appropriate, but anyway, I just going to grab it from there. So here you see this is read it. And I think this looks nine story because we already going to have this sucker right here. So I'm gonna grab this ready, copy, this one. I'm gonna go right here and I'm gonna paste it. So this is going to be ready. We can go right here. And let's grab this one. And that's an, I'll put it right here. It's going to be in GB S6, And then it's going to be at index 0. And then I can make it 0.7 0s. And then I'm gonna go down here and grab this one. And then here it has a 400. So I'll add ED here, it's going to be 400. Save it. If I go here, you see that now we have another. But so yeah, this is our gray button and this is how we can create these luxury and immediate goal buttons for your next project. Thanks for watching. 12. Building Lusty Animated Buttons: This will be, you're going to learn that how to create awesome but an emission effect in pure CSS. So for example, we have here total nine buttons and every single button have a different animation effect. For example, this button have a slight from left, slide from right side from top and slide from bottom. Now this button have a grow box. You see it's a growing box. Then we have group ellipse, grow, ski forward, risky backward, and then grow a spin. And you're going to learn that how to create all these animation in this movie. And there's one more thing, that theme of this field is entirely customizable. For example, I can see pages hint the color of this particular value here, and see this entitled Is actually got changed. So I can do the same thing right here. And I can just sum, do something like this and see that we got that border color here. So this is highly customizable, but an essay on how we have the same text column as we have for this background. So this is what exactly you are going to learn in this movie. And if you're ready to learn the, let me go to my code editor and let's get started. So here you go among my VS Code eta, and we have this simple STL file to work with. Well, there's another filing, but under SSS, where are we going to write our CSS score? And you can see that we do have some CSS code already written. Well, this is a basic button styling and this is some root custom color variable belt. We'll get back to it later. But first let me show you that we have another file name, default or CSS, where I've even some default styling. Like I've applied a custom font family to body, which is Ariel. And then either use this or flexbox to put them into center vertically and horizontally. So this is it about this default of CSS. We definitely not going to visit in this file. So let me just close it out because it's very simple. And next up we have this button dot CSS, where I have this simple but unquote. But again, we'll get back to it later. First, let me just go ahead and explain you the estimator structure of this document. So here we have two section or buttons. The first section, orbitals belongs to slide animation, and this is second section belongs to grow animation. You can see right here that every class in this section start from slide and every class in this other section start from grow. So this what, we're going to have slight animation and this button, we're going to have grew animation. Now let's go to our buttoned or CSS. Let me explain you this. So here you see that I have this customed colored variable and there's a reason why I chose to use, because I'm using silica, which means if I go here you see that this is HSL will, and I can easily just go ahead and pick Ailey color. I wish, for example, on 330 degree, we're going to have these color. So we can easily change it. You can just go here and then we can just see here 330 and also here 330. And you see if I save it, you see immediately is going to change the entire team and feel of this project. So that's why I just, you know, two streets so luminous Gad and get back to our previous color, which is blue. And then we have some default styling for our button. And again. Styling is very generated because if CSS anyway, you can easily understand this property. For example, I given a font size of 1.5 and that's looking big here. I give it some padding then outlet I say to none, then I get a color of white, which you see here, the white color, the negative bottom mm. So we do not have any browser default border as it margin-right to one gram. It means you see that there's a two button, the margin between these two buttons, one ramped. Then we have this border, which is two pixels solid, and I'm using a primary color. So it's basically not a visible here. And it will be visible once we started with the hover state. But as of right now, just to show you, let's make it red and you see it's look like this. So again, we'll get back to it later in this movie once we code and we'll have our emission in place, then we have this bottom, bottom and this is extra border at the very bottom. You can see this dark about it right here at the bottom. Yep. It's actually because of this one. Then we have this a background color, which is obviously the primary current. And you can see right here this the primary color. And then Niels Bohr radius, which is five pixels. So it's a subtle border-radius than you have Kazaa pointer, which obviously then how about this one and see it's turning to pointer and then there's margin bottom. In this case, you see that we have this vertically difference between these two buttons, which is basically because of this marine water. So this is a simple button core. Now again, I don't want you to write it because our main goal is to create animation for this button. So now let's go ahead and start with animation. So here what I'm gonna do is that I need a object inside these buttons. So what I can do, I can target this button. Let me show you. I can say here button and I can say after. So I'm gonna use this after here, and here I'm going to use this content property. And I can place anything I want so I can see how Rahul and you see, just for this one, it's appearing or alia. But obviously we do not want anything here. And I want to give it a background of this fff Colombia, which is completely white. And now let's make this bullshit to be absolute. And because you are using this portion absolute here, we need to set position relative in its parent button. So here I'm just say a portion let you, and then here we can just go down and let me just give it a batting, warm them from the top and bottom and two ramp from the left and right, save it. And now you can see this, but I want to display it in block because right now it is inline, so I don't want anyone, I want in block. And now you can see it's appearing at right at this position. And here first we're going to work with this slide animation. So what I can do, I can use attribute selector to target this slide classes. So what I can do, I can say here button and then it's going to be attribute selector. And I'm a security class. And here I will say if that last start with and this work which is slide on Howard. So just find out the bottom which class start with slide. And if somebody however this one, then this go ahead and after that one, apply this one. So what we want to do here, we'll see that we're basically targeting this after object. You can see this after object after an hour. So what do we want to do? We want to stretch it up. I can sit drop 0, left is 0, right? You're going bottom 0. So basically I'm stretching it up and this is when I walk. Why was because you see that I'm using a portion to be absolute on its parent and on Howard and just stretching this particular box. So now if I hover over this slide here, see that now it is indeed stepping it up. So now it's looking good because it's actually stretching it up. But it's appearing at the very top. Let me show you what I mean here. So here what I can do, this is actually white, so let me just make something like a blue collar. And alpha i just go here. If I just hover, see that now, it's appearing at the top of the text. We don't want it. We want to operate in between background and text. So how can do that will let me show you a little trick. So what I can do here, I can just see him as their index. And this Spirit is going to be Gen takes off one. And then this button after I can make it as their index to be minus one. Yep, let me show you. And now what's going to happen. Now this after object is gonna sit between background and text. So let me show you if I hold this one to see that now it's indeed working. So this is what exactly we are looking for. So let me just go ahead and turn this to the primary color of this one's from others. Grab this one and I'm going to just, you know, paste it right here, save it. And now if I heard this one, see, there we go. Perfect. This is exactly what I'm looking for. What is it that innovation is not happening? So again, an emission will not work yet because we need to do some more stuff. So now let's start with this slide from left animation and then we'll see the transition innovate. Well, let me just go right here and I see we have this glass slide from left, so we're gonna grab it. We're gonna go right here and we're gonna just tag it on a button. And then you can see here from left. And then because this object is just after, so you can see here after and then here I can just put my walk. So what I'll do here is basically, I must say here dot to be 0, right? And also the bottom is going to be 0. Now here you can already notice something. The top is 0 and bottom is 0. So now it is center. Now we need to push it to the left. So what I can do here, I can say lapped and there's a minus 100% FSA VTC that now it's actually at the here. Let me just show you. So again, it's, it's, it's it's not visible. So what I can do here is that I can just make this something like a different color. For example, I can give it a read and now we can see that it's actually disappeared. But let me just go down here. And if I make it here, right, 100%, because once somebody, whoever it is, it has to be 100%. And now you can see it's right appearing here. Let me show you. It's right here. You see? So this is what's happening here. Let me actually just know unless decrease it, you see, this is how it's working. And now if I just hold this and see it in the slide, you see immediately it's sliding. So we don't want immediately a sliding. We need here transition. So for that, what we can do, we can go right to here. Let me just first, just get back to white as before. Right? There we go. And now let's add a transition to all our slide animation. So it's gonna be very easy. I can just grab the same exact thing. We are getting this light emission from a restaurant or this go ahead and hear my say after. And then what I can do, I can say here, transition. And let's make it on, is going to be 0.4 seconds. And now if I just go here, see that OCC, it's appearing. Wo Zai, it's what is all this added? Yep, it's very smooth. And again, you can see that separating from left. So what we can do here, we can simply just say here overflow hidden. So we can simply hide overflow. And now what's going to happen you see, and how does one see it is giving this effective, very powerful. And now others are just like this one. It's a very similar, we can just go here. We just did. And this is going to be slight from right. And then what we can do here, instead of left on 100%, we're gonna make it right and a 100%. And now if I just have this one C, Then you go, you see, and again, you see that I can't see the text here. That's not good. So here I need to make it. Let's make it right here. And here. The, there we go. So perfect. But now on hover, it's not looking good. So what I can do here, you can see here button. And I can see here on how I can just grab this primary color. And I can say here Color. And let's make it this particular. Now in phase two, how it is messy. There you go. Our button's working properly and let me just actually just listed it. There we go. Perfect. Now, let's go ahead and walk on. Other two. Slide from water, from top. So let's make it top and pop is going to be minus a 100%. And then bottom is going to be a 100%. And this value is going to be 0. And again it's going to pause it. So I need to include that Poisson sign and save it. And Africa here you see, if I ever want to see its light from top, see, perfect. And just like this one, we can make these light from one. Yep, I can say select from. And now this bottom is going to be minus, and this top is going to be 100%. And everything is going to seem. If I go here, you see somebody from bottom slide, from left side, from right stack from top side from water. You see. So now the slide and emission smoking rapidly. Now let's go ahead and move on to this and grew animation. Now for this grow and emission, we again get a need, this particular transition, and it's gonna be a little different. So that's why I cannot just stack it. So it's going to be grew. Because our all growing, we can start with this grow keyword. So we got the spoken word and now I can see here it is, right? And then we need another transition, and I'll just place it right here. And now this is going to be on how? And then you can see here, and this is going to be 0s in, out. And these are the timing function. You can simply just Google and just learn more about them. So now let's go ahead and target our fast-growing animation, which is grow box. Well this is very simple. We can simply just do not select button. And then this is going to be the Dropbox. So i'm going to scrap it. I'm just gonna I'm just put it here. And then I can say yep, after I can say hit docs to be 0, bottom is going to be 0, is going to be 0 and right is going to be 0. Now, I get it, right because you see. Not, it's stretching to fill it out. I can use your transform of function. I can just use this scale function in transport method and I can make it 0, which means scale to 0. Now see that is actually gone. And on Howard, I can simply scrape up, yup. I'm sure you can see here button. And then I can see him on her up. And then just go ahead and scale it up and let me get rid of it because we don't need it. And offer will head to see if the box is going and how would an emission happening? That's because of this guy over here. Let's go ahead and move to this group ellipse. So this is going to be a special one. So what I'll do, I'm just going to grab the same thing, it go down. And this time you see that we have this group ellipse. So we're gonna grab this cell. We're going to just paste it here. And then I can see here after now here this global little different. So for that limited, just go up here and let me just comment out this overflow hidden so you'll be able to see exactly what's happening. So let me just go down right here and on here. What I am saying, MSA, her left and left, I wanted 50%, but it's going to be minus 50%. So let's make it minus 2%. And then in the right, I want manuscript to percent. Uh, let me say we didn't see that this actually become this much big. Now for the top, I want to make it minus 200%. And same value is going up at the bottom. So it's going to be a bottom and it's going to be minus a 100%. So now if I save it, you see that this is actually quite big limb actually just through use and has a background. Unless we get a 0, you see, this is how it looks, likes, it's quite big and I'll show you in a bit why. But first let me just go ahead and read a border-radius and let's make it a 100%. So now it's going to turn into that ellipse you see, and now you'll see this ellipse is quite bigger than the actual button. And I'm doing it for a reason because accidentally I don't want these alleged to be smaller than button and this will exactly what's happening here. Okay, so I'll keep this one. Now let me just do one thing. I'm going to again grab this transform and the skill, and under skilling to 0, is it? Now that is completely gone. And now you guessed it right yet on how we can simply scale back to its original position. So I'm gonna get rid of everything here. And then I can say on how. And then Octa and scale back to one, save it. And now c is going to happen if I just saw this one, c is appearing like this, C. And let me actually just make this a white or I don't have to because just only do right here, save it if accuracy, this is what's happening here. So let me just go up here and let me just again a ton on this overflow hidden. And now if I just go here, see that ellipse is going, say, so now our ellipse envisions working properly. Let's go ahead and talk about his gross cue forward and gross q Backward. Let me just go here and I'm gonna grab the SCU, SCU forward. And here I have a target button and risky forward and is going to be after. So this is also going to be simple by limit just to go again up here and let me just burn off this overflow hidden so you actually can see what's happening here. So what do I do here is basically a masida top to be 0 and bottom is going to be 0 because it's going to skew in horizontal axis. So we don't have to walk on the vertical axis, which is top and bottom. I'm gonna set the value for left to be minus 20%. So I want to stretch it right here at the very left, one has 20%, and I also want to stretch it to minus 20%. So now we have our skew function. Let me actually just do one thing. I can say a backbone. And you see this is how it look like. Now we can simply skew we'd, So how can do that? Well, you can use your transform property. Yep, the integrand is transform right here, and we're gonna paste it. But again, if you're going to get into this scale here, and because we want to skew it forward, I can use your skew. And then because it's going to skew on horizontal, which is x axes, are going to use your skewer x, well, it's going to be minus 45 degree. Now if I say VDC, that is q forward here, see, that's walking. So now what I can do here, but once we have the skew, I can simply this skill it at a factor of 0 in x axis and y is going to be remain same. So we don't have dutch white anymore. So now it's just a matter of just getting here and on Howard and just make it one, just stretch it. That's it. So now for the soil to see grocery forward, See, this is what's happening. Say, say it's working. Effect. Let me just get rid of it, right? And C is going to work. And again, what I will do here is I'm gonna just grab the same thing. Let us put it down here. And here, it's a forward. There's going to be backward. And I'm just grab it and put it right here. And what I want to hear is that everything is going to be same only this is going to change. Instead of minus 45 degree, I'm going to put a positive 45 degree. And this is where exactly we not do right care on HAVA positive 45 degree and that's it. So that's it. This is glue skip forward and this is gonna do backward. You see it's a backward and the forward. So now let's go ahead and walk on our lot in Mission, which is grow spin. So this is ultimately we simple. We just need to grab this growth spin here. We're gonna go right here and asynchronous spin. And then you can see here after. So what you want to do after, well, it's really easy. I can say, yeah, luck to be 0 and right to be 0. Pop is also going to be 0, and bottom is also going to be 0. Now we can see this utter object stressing to fit it up. Now what we can do, we can just use this transform and we can simply scale it to 0. But before that, because it's going to spin, we need to just add another function which is going to be rotate and we want to rotate it 180 degree. So here I'm just gonna grab it. And because you see that it's actually now gone. I can just list it here, get rid of every single thing. And here I can see it on Howard. And now here I can just scraped back to one. And here is gonna be 0 degree c. If I say it's a clockwise spin, and if you want to anticlockwise spin, we can see here positive wanted to dignity. And if I held this fancy, sick, now it's anticlockwise spin. So it's totally up to you that in which direction we want. But this is your gross spin animation. So now our project is complete. So there we go. This is how you can create this awesome button in emission effect. 13. Fascinating Gradient Progress Scrollbar: So in this movie, you're going to learn that how to create these custom progress scroll bar for your next project. Yeah, you're going to learn how to do that. And even you can just put this 12 L at the left. So for example, if I just go right here, I can just put it into the left-hand. If I go here to see that now I was callback is now in the left, not in the EITC. That right is completely clear and instead it's appearing at the left. So yeah, in this movie, you're going to learn how to do it. So if already the let me go to my coater and let's get started. So heavy go among my VS Code Editor and we have this simple estimate file to work with. Again, it's a simple estimate file because you see that I am repeating the same paragraph again and again and again. You see right here. And obviously I'll get back to it in a bit. But first, let me go to Edward. She says, where are we going to write our CSS code, but as of right now it's empty. And then we have this default dot CSS, where we have some default CSS code. And that is only to make our project looks good anything, this is our project. So now we have enough height that we can see this is a scroll bar. So this is where we're going to walk here in this movie. So let me just go right to my index.html. Let me quickly explain the HTML markup. So here you see that inside this body, we have these two important thing. And again, this too is very important. The first div is going to be our progress bar container. So this is going to be the container which is going to hold our progress bar. You see, right am. So basically we have these two important Dave. The first one is going to be the progress bar container, and the second one is going to be actual progress bar. And then you see that these are the very normal estimate structure, which basically you see that we have this heading one which saying welcome. You can see right here this is the welcome. And then we have this paragraph, and I'm repeating this paragraph again and again and again. So I just want to make my project scrollable. So that is fine for me. Now that just go right here. And you see at the very bottom I have this app.js. Well, obviously we need some very simple JavaScript code and we will refer to this one, but that is going to be totally later in this movie. So now you're familiar with STV structure, this project. Now let me just go to Edward CSS and let's start coding. So the very first, because we are going to create our own scroll bar, we need to hide this default scroll. So for that we can just go right here. So we're going to use these pseudo-selector for our scrollbar. So I can see here webkit, and then I can say a scroll bar. And then here I can simply say the width to be 0 as well. Do that if I go here to see that now that width is gone and say, and we can just make sure that it's a background to be completely transparent. You can see here transplant. If I go here to see that now, we can just call it, but we can't see that scrollbar and scrolling terminate. So that is very powerful and this is exactly what I'm looking for. Now what we can do here, we can just go and grab this progress bar container because now this is going to be our new scrollbar track. So I can just grab it from there. I can just go right here. And because you see this is the id, I can just use this hashtag or pound sign. And here I can take it, this one. So in order to make this work, we need its position to be fixed supposition, and let's make it fixed. Now what I need here is that I need it to be right at 0. So I want it in very, right, so it's going to be 0. And because we're using this position fixed, we can use the property top, bottom, left, right. So I'm using your right to be 0. Now, I'm looking for background and I want to give it to the background talk. This one, which is basically a Black with opacity of 0.05. And then I want to give it a height to be 100% because I want to take it's a full viewport height. And finally, we'll need that weight so I can see her Bigtable, let say phi pixel. And if I go here, you see that? You see that we do have it and can't see it. Let me actually just make this 50 pixel or less or 500 pixel. If I go here, you see that now we see that this is our scrollbar. And again, it's not starting from talk. So what I wanna do, I can just go here and I can start from top 0. So now top 0 and right 0, and they'll go now starting from top to bottom and sticking full height and fixed. So this is exactly what I'm looking for. So now let's make it ten here again. And if I go here, you see that now we do have it. So there we go, we got it. So there's our progress container. Now we need our actual progress bar. So it's very, very simple. Again, I can just grab it from there. I'm gonna go down here and I'll paste it. And this is going to be no progress bar. And it's also going to be pushing to be fixed. It stopped 0, right? 0. And almost everything will be same except these background and height. Obviously we need that background. So for background, I'm gonna make use of gradient color. So you see that I'm on UI gradient. You can just Google it uy gradient and you'll get back to this side and you can just use anything you wish. For example, if I click Show originals, let me just go to this blue color here. Let me just go down, down right here and you see this looking good. So let me just grab it. I'm going to click here, wrap the copy, and paste it. And tomorrow, if I just go right here, and obviously you will not see it because we are not updating the height of a progress bar. For that. We're going to need that JavaScript code. So let me just go right here. And don't worry, this is going to be a very simple code. So let me go to app.js. And here what we need is that progress bar, right? So we need this progress bar, so I am going to scrap it. And here lets go and say const, so is going to be constant. And I'm gonna say here progress bar. So I'm a progress bar and then I can use this document.write. And let's go for query selector. I just want to select this query by this ID. So it's going to be that pound shine before, and there you go. So now we have our progress bar. Let me show you. I can just say console.log. And you see that it's actually going to log our progress bar in the console. So if I just go right here, inspect element and seeing the console, it's actually logging that div ID progress. It's lugging our entire element, this one. So it means that we are targeting the right thing. Now we need the total height of our document. So you see the total height of document till here. So how do we calculate the total height? Because it's a long document and see, it's a very long. So we need to grab the total height of this document. Well, we can do that very easily. We can just go right here and here. And I say let, and let say here total height. And then I can say here, document dot, body dot, let say here. So it's gonna be scrawl height. There we go. And nobody to minus eight from the window inner height. So let's say we know is going to be taught in a height. So there we go. This is our total height. You see, this is the scroll height. So this is the complete scrawl height delay up. And now we are minusing the scroll height from the window inner height, which you see, this is the actual window in right? This is, you see right here. In my Mac, you see that we just grab this window height. I'm going to just paste it right here. And a C in the MAC. The window inner height is, let me show you. It's 1073. So inner height is 1073 in the Mac. And then I can just go here and let me just grab this document.write scroll height. So I can just paste it right here. And the very first is gonna be the height, and the second one is going to be the inner height. You see the scroll height is four to 400 pixels. It means that now this is the scroll height and this is for 1249 pixel long, are tall and the window inner height is 768 pixel because I'm using your desktop and see it's 768 pixel. And in the Mac it's 1-0 fall and pixel of USA, right? So now what will be the total height? Well, again, I can just go right here and let's load it. So I'm going to describe this total height unless paste it right here. And there you go. This is our total height. And you see the total height is right here, is 3481 pixel. So the total height is 3,481 pixel. So there you go. We've got our total height, but that's not all because we got our total height. But when we scroll, we need the current scroll height. Yes, we need that hide as we scroll in real-time. So how can do that? Well, we can use your window listener. So we can see here window dot, honest crawl, I can just call a function. So as someone scrolling this one, this is going to call this function. And here we're going to need that progress side as we scroll. So what I can do here, I can create a variable C. New is going to be progress, height. So progress is going to be height. And then what is going to be the new progress height? Well, it's going to be very easy. We can see here window dot and it's going to be page why upset? Yes, we need a page white offset because we're crawling vertically, so it's going to be on y-axis. So we need that page white offset that is going to be divided by the total height. Total height. And then it's actually going to multiply by into 100. So it's going to give a percent. So what I can do here, I can just go ahead console.log. And I can say here, new progress hide or new scroll height. So if I go here, you see that now if I just go to Inspect Element and you see that on console, we have it refresh. And there you go. Right now, it's 11 pixel. So you see it. That as soon as we are as crawling, you see it's getting a new height. Is it news call height? And I see you now reach a 100%. So that's why I saying 100%, you say, it's very powerful. Has anybody hit here? See that now we have scrolled till 58% of the window. So that is very powerful. So we can use it to just update our progress bar for that limit is go right here and here we have this constant per variable. I can just use it here inside. So I see a progress bar and then I say here dot style. And then here I'm say her height. And height is going to be something like some person, For example, if I say 50%, well that's the height. Obviously, we are going to dynamically change it. But first let's keep it 50%. And also let me just give this opacity, right? So opacity is also going to be 50%. And if I go here you see, you can't see it probably where you are. But if I scroll to see that now the see, the progresses 50%, you see, and also the opacity is 50%. It's not 100%. If I just make it 100%, you see right here, you see that it's already fully visibly see it's a fully visible, but it is not as because we need to change it dynamically. So you see that we can use this neat progress height because that's going to be a dynamic. But how do you apply it here to walk it Tanner again, well, we can make use of template literal site, which is ES6 feature. Let me show how it's gonna work. So I'm gonna get rid of it. And here I'm going to use this template literal side. And there's going to be dollar and inside here, and it'll paste my variables. And now I can see here percent, yep, that's it. I can grab the same thing. I can just paste it right here. So now this is dynamically going to update this value as we scroll. And because we reach somewhere, we are seeing here percent. So it will be that person. Now if I go here, you see, if I just call it, you see that now it is filling up. You see, you see, at this point is say, it is working. See, yep, there we go. Now Vh reach a 100%. So that's right. It's actually gone, say, perfects, the night started working. And again, you see that the gradient is not properly walking. So what I'll do here, because it's going from left to right. I can see here two important or to talk. It's up to you, right? It just, just do it right? Some CO2 water. And if I save it, you see that now our gradients starting from this clever and going button. And now you see it, right? So there you go. You see this actually our gradient progressed scrollbar, see incredibly powerful element. Just make this a kind of a 20 pixel and also need to make this 20 pixels, right? Save it. If I go here, then this is our gradient. Probably score by sea and incredibly powerful. So again, if we need this progress container, which is going to hold our progress bar, were limited to that. If you want to get rid of it, just get rid of it. But the thing is that when you get rid of it, you see one thing that is, you will not be able to see that track that scrollable container, just if you want to show that callback container, that means that you will be able to scroll. You see now this is called a container. And now assuming that there's some scalable element, you see. So if you want to keep it, just keep it, or if it get rid of it, just killed off it and you still able to like, you know, just make it work. Seemed like that same thing is that you will not be able to see that's called a container. And I want to show our user that this content is crawlable. They will go. And again, let me tell you that if you wanted this callback to appear on the left, it's very easy. You can do that. You say, this is right. I can see here clamped. And I can do the same thing right here on left. And that's it. If I go here, you see that now it is going to appear on the left is incredibly powerful. And yeah, this is how we can create this progress scrollbar Indicator. Now let me just go right here and let me just turn into right again, because that right makes sense. And Africa here you see that we again have this callback in the right. And this is our finite project. Thanks for watching. 14. Bonus: Creative CSS Shapes Design : Welcome to this movie. We are going to learn that how to create this image shape in pure CSS and you see it on hover, it seems in the entire ship. And also you see that our content, you see this paragraph is flowing around our ships. So without our, our content is fooling around our pirate ship. And once I hope I'm now it's flowing around our, this screen I since connector shape. And in this movie, I'll show you how to create this creative project in pure CSS. Now apart from this, we also wanna walk on this circle. You see that on hover, this is expanding and also our text is flowing around the circle. And finally, you're also going to learn how to create this ellipse. And once I hover this ellipse, you see it's now turning to perfect circle. So this is also a very creative stuff. And obviously in this movie, I'll show you how to create it. So we're ready to see that how to create this amazing creative shapes using pure CSS. Then let me go to my code editor and let's get started. So here we go. I'm on my VS Code Editor and we have the simple SML file to walkway. Well, there's another file in app.js is where are we going to write our CSS code? And then finally we have another final him default or CSS, where we have some default diseases code for our project. So let me show you the library. We have a project and here we go. This is the life review NSAID. It's very simple. We have this one image and then some paragraph. Then we have another image and then some paragraph. And then finally, we have only pivot off. We don't have any image. Haha, but we're going to insert it dynamically. That parrot image, right? So let me just go right here and let me show you the HTML structure. So here you see that in the body we have three sections. So this is the one section. Then we have the second one, and then we have this last toward one. And these are the three section we have. So you see that in the first section we have this data which is contained, which is basically I use to place it in complete a center is a. So this isn't complete center both vertically and horizontally. And you will see in a bit because once we start working on it yields a completely. So here you see that inside this one we have this one single image and then this tea bag enough. And same thing here when image three paragraphs. And here instead of image, we have a simple div. We're going to insert our image through CSS. And then again, we have this three bags of that and that's it. So yeah, let me just go right here and you see that every single section have height of a 100% on board. That means that in this invisible viewport, you will see only one section you see. And this is why I used this section and then I'm using your display grade place item, center place item is sought cutoff, justify contained and align items. If I'm saying you replace item center, that means it going to play center both vertically and horizontally in one single property. So now this is our default CSS code. Let me just go ahead and close it out because we no longer gonna needed. Now let's go ahead and start working on our section one. And this is going to be our image. Suck, and we're gonna make use of that circle fast. So for that, let me just go right here. And again, I'm going to use that image. Now let me just go here. And you see at the very first one, we have this image and this is what exactly we're going to walk on, right? So we have this image and then we have this text. And I want this image to be at the very left, and then this paragraph to flow around our image circle. For that, we can just go right here. And then I want to create our reference box because fit this, we're gonna make use of shape outside property, which is a CSS3 property. So let me just create our reference box. So Alice is give it the default to be tough to 50 pixel height is also going to happen to 50 mixing. Now if I just go right here and you will not see any cases obviously, because we haven't used that shape outside property. So now let's go ahead and use it. So here I'm gonna make use of this shape outside that we have these mini function to use. But here we're only going to make use of these sucker, another say v t. And if I go here you see, again this is a no changes is because we haven't clipped out this image to the circle image. What I mean, so I can go here and now I need to use this clique path property. And then the exact same function I have used here. So this value and this value should, must be saved right? Now if I say, what if I go here, you will see that not it kept. So that's pretty powerful. And let me tell you that the shape outside property, we're going to create socle. But this is going to clip that particular image to fit into that circle. And that's what exactly happening here, right? It's very powerful and very important to understand. I mean, there's tons of different value. You can add insight. But again, we're not going to cover that in this movie. In this movie, I just want to show you some default and very basic stuff. And in future videos, we're gonna cover eight incomplete data. Because in this video we have three project to cover. So not always just go here and you see that now our content is not flowing around these image, why this happening and how to fix it. Whenever I tell you that these two property walk with floats. Yep. You know, to use that old float and then you can paste as left, right. So I can say I laughed, you save that. Now, it is actually on the left and now our content is flowing around the ship. You see these images at the top yet. So let me just push it little bit down so I can see here empty, which is margin top. And let's make it to run, save it. If I go here to see that now, I push it a little bit down. And obviously we need some margin, right? Yes, we can go right here. I can say amount of margin, right? Recipe to one round, or let's make it two RAM, right? So if I go here to see that now text is actually flowing around our circle nicely. And because we have to imagine it becomes it properly. So let's make it one round. And you say that now you can clearly see, perfect. Now let me tell you that you can crop this image right from this circle function. Let me show you. So we see that now this image is looking on a 100%. But if you want to cooperate, let say you want to just only use 80%. So it's what a crop it right from the tail at this point where we can use it, do that. You can just go right here and here, say 40% and then hit save 40%. Say, if I say that now it's little bit cropped it easy. And now we still have that place right there, but it's actually cropped it, which is really fine. Let me tell you something that these two value has to be exactly the same. So for example, in initially by default, it's 50-50 percent. So basically 50% of these outside and 50% the skate park. So total is going to be a 100% Are you had this is Annette per second. But if I just go beyond dispute person, for example, I make it 60%. It will not going to walk. You see that now our text is not flowing around the socket. So remember, it has to be exactly the same. And again, because the 60% I, it's not going to work. You see, this is going to look really bad. So make sure that it's 50% or less and both have the same value. So I can see something like a 45%. And then I can see here 45%, which is totally 90%. And then we have this 90% suck and then on how I can make it little bit big. So I can go right here. I can just grab everything from there, right there. And this one, let's make it this time 350 pixel, right? So it, it's a bill. And then I'm going to get rid of it because we already have it here. So I don't need all this stuff here because we already have it on the baton and read up on how to save it if I go up, you said that now horror, it's if it's increasing the size. And also our text is flowing around the shape even on how I see. Very nice, but it's not smooth. So let me just add here transition. So let's say a transition. And let's make it our band 0.3 sack. Let's make it easier to save it. If I go here, see that now, if I heard this one, see it smoothly flowing here. And then you see that our text is also flowing around this shape even on hover nicely. See, yup. So this is incredibly powerful if you want to use it. And again, you can put it on the right. You see the flat left. Well, we can make it right. Save it and see that now it is unlike and they are text is now flowing from the right. See. Perfect. So it's really up to you where you want to place it, but most probably get make sense on the left. So then you go, This is exactly what I'm doing here. So very smooth. And also you see that you can do something like a gray stuff. For example, I can see here 50, 50%, yep. So now it is going to also, they will that crop you see, assuming that crop, you see, which is a willing that crop and also with the big, let me actually just go here. Let me just crop it even more. So make it 40. And there you go. Say, if I go here to see that now it's cropped or lot know-how about C? It's Mickey big like this. See, it's incredibly powerful. And yeah, this is how can we make use of these suckle function. So now this is it for that subtle. Let's go ahead and talk about this image ellipse summary. Grab it. I'm going to go right here at the bottom. Image ellipse. And again, you guessed it, instead of socle, we're gonna make use of ellipse. So for that, let me just go right here. And for ellipse, you don't have to put this default space. You don't have to do it. Just go right here. And then here I can say shape outside, and then here it's going to be ellipse. Now here you can place your value. So because there's going to be ellipse. So you can actually define the x value and a y value. I can see on x-axis, make it seven m, but on why? Let's make it eight RAM. Yep. And I can just go right here. I can say a K-Pop. And you don't want that K-pop is also going to have the scene, then. Right? So if I go here, you see that now, here we have that ellipse. You see it's quite smooth ellipse and imagining making smaller, right? We can just make like let's say 500. So it's going to be even more squeezed dizzy. See what again, this is how do we create these n? And again, it because we need to do some kind of Wolbachia. So we can just go right here. And again, you see that it's not floating left, you get it right. You said you have to be left. Save it, go here and see, now it's floating to the left. We can add some margin. Right here. I'm up and let's make it one them, save it. And there you go. You've got some margin right here. By the powerful, again, we can push it a little bit down so I can see here and t, and let's make it two of them. So go here. And then we pushed it right here. And we're gonna see that our text is flowing around this ellipse, which is pretty neat here. So what I want to, I can now grab this one, go right down here and here, and I get everything. Yeah, because we do not need anything. And here I can just make it it save it, and now see that on how it's going to be constructed. So let me just add here. And let me just go right here and see that it's going to be socket C. And I, and let me add that transitional year because transition will make it look really nice. There's going to be all upon ¢0.3. And let's look at each segment. Go here and see you on how, you see how this is happening. See for ellipse to cycle. So yeah, this is how can we create that ellipse? Now let's go ahead and move on. Fun project, which is that pad I tried. Exactly. So let me just go right here and let me just go ahead and grab this male pattern. And let me just go right here and let me target that means patent. And here we're gonna do something really crazy because this time it's going to be different. So the very fast, because we are going to use this image to create our ship. So previously you see that if you are creating this safe by ourselves. But now since we have this transparent image, you see meal pellet and this Ice Age character. We're going to create our shape of based on this image. So it's gonna be different. So what I can do here, you'll see that this particular male Peret is actually have, image size is 400 or five pixel wide and 2.4.2 pixels tall. Lemme show you, I can go right here and you see that width of the sprite images is 4a 05 pixel wide. And then the height of this image is twofold to pixie. Now let me just go ahead and give it a simple background. It's normal background. I can see a URL and then I must say her male parent, right? And then if I save it, if I go here and see that now V half of unmade parrot, which are looking good because we have the proper width and height. So if I just decrease this hyperbola, etc, to pixel, you see it's going to cut it off. So the actual height of this image is twofold to pixel. And now again, we want to put this text around our image. So it's very easy. Again, say at a float ends wannabe, lapped, saving. And I'd say it's actually going to work. But the thing is that it is not flowing around our shape. And that's because we haven't created our sheep yet. And how created? Well, by using this shape outer function. So I can just go idea. And here I can say sheep outside. And then here, instead of giving it actual ellipse or something, I'll just paste the URL. And the URL is going to be exactly the same. So it's going to create shape based on this image, the part of the image. And that's what exactly it is. If I go here and say that not our text is fully around the shape because shaped outside property, it's created a shape based on these transparent image bot that's very powerful. And you see that I'm noticing and clay pot because we don't have to because here we are manually creating shape and then keeping that image to fit in this shape outside. But as of right now, we are using this image to create our shape. And then once this shape is good, the shape based on that transport image, then we're just feeling that area with this background. That's it. So that's why we don't need here Clipboard. So there you go. This is now working, but now let me tell you something really bought it. You'll see that we need that. Imagine what the thing was going to happen. Well, let me just go right here and let me add MR. Margin, right. And as we get to one gram and let me obviously put it into another line, what do you think it's going to work? Let's say seven. And you say, oh, it is not working because you cannot use margined right, on these shape outside URL for that, there's a special property name. Shaped, marching. Yeah, shape margin. And then I can see a one ramp and it is going to work. You see? There you go. Now we got some Owen margin. See, it is working and let me just push it little bit down. So again, you got it. I'm gonna use this empty margin top is gonna be to ram save it. If I go here, see that now we have. So that's pretty neat and I love it. But I want to replace this image with that i-th character. You see, right, did this one. So on how I want this image to appear. So for that, let me just close it out here. And again, let me just grab a and I'm going to go down, write him. And I say, hey, meal bed on how? So now you know that because we are using these isis character, let me show you, let me just grab this ICH vector, PNG and here also. But thing is that is because this is not going to walk. Let me show you if I go here to see how it's not always cropping here. So we need to fix it for that. We need actual height and weight top these image. So this image is a 500 pixels wide and 295 pixels tall. Let me show you. Let me just go right here. And here, I'm gonna make it finite pixels wide and 295 pixel dot, save it NSA that went to harbor. When this image appear, you see our text is also flowing around this image to see. Now it's flowing around our parent and that's flowing around our, this isis collector image. Perfect. And again, we're just doing the same thing we did eat right here. But this time we're using a different image. So that's pretty powerful. And again, we can add here transition, right? Let's make it all 0.3. s And it's going to be peace summit. Go here and see how it's immediately changing. This is how we can create these shape for your website. And just go ahead and use these knowledge. You have LAN and create something special on your website. So yeah, this is it for this project. Thanks for watching. 15. Final Thought: So now that you have created those ten amazing CSS UI design projects with me, you're ready to use it in your own or your client's project. And if you want to learn my other classes than simply search my name around NHGRI on sculpture and a skull shareable show you all my classes. I really appreciate that you have taken time to watch this class, and I hope you really enjoyed learning ten Amazing CSS3 UI design projects.