Upgrade your Css UI library - Cool Css animations. Buttons, loader and more | Pure Css | Skillshare

Upgrade your Css UI library - Cool Css animations. Buttons, loader and more

Pure Css

Upgrade your Css UI library - Cool Css animations. Buttons, loader and more

Pure Css

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
31 Lessons (2h 60m)
    • 1. Intro

    • 2. Font Awesome Explanation

    • 3. Auto Typing Text Animation

    • 4. Floating Text Animation - Amazing for Your Header!

    • 5. Loader Animation With 15 Circles

    • 6. Loader Ring Animation

    • 7. Loading Snake Animation

    • 8. Shining text animation

    • 9. Loading boxes animation

    • 10. Loading Animation Fill

    • 11. Activate Button

    • 12. Switch Button with background animation

    • 13. Button Before and After Transition

    • 14. Button With Snake Border Animation

    • 15. Card With Clip Path Hover Effect

    • 16. Glowing Gradient Buttons

    • 17. Image and Text Reveal Animation

    • 18. London card effect

    • 19. Cool navigation with rotate animation

    • 20. Portfolio For Your Landing page Collection

    • 21. Power On Button

    • 22. Card with shrink Hover effect

    • 23. Quote card

    • 24. Rain Animation

    • 25. Snake Button 2 done

    • 26. Social Button Flip Box

    • 27. Social Button Pink Background Hover Effect

    • 28. Underline hover effect

    • 29. Special Switch On and Off button

    • 30. Rotating images box animation

    • 31. Auto typing animation with colors

  • --
  • 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.





About This Class

                                                  Hi and welcome to an awesome Udemy CSS Course!

                                                                     Creativity is key.

Are you looking to take your CSS skills to the next level?

Does adding 30 more components to your CSS portfolio sound good?

If so, you're in the right place!

CSS is an art and we are all artists!

Throughout the course you will learn how to create more than 30 different CSS components:

Cards - Buttons - Loading pages - Galleries - Forms - Navigation Bars- Sticky headers and footers.

This course is all about CSS!   

----- No  JavaScript knowledge is required -------

We may use Javascript for a few hamburger buttons but don't worry! It's only 3-4 lines of code and will be used sparingly.

If you didn't check out the course video please go ahead and do that :)

Each lecture is for a different component and you'll get the source code as well!

The course has just been launched. We have 35 lessons at the moment and are making more as you read this.

The best thing about the course is the support team!

We take great pride in our support.

We will do our best to answer every question within 24 hours. There are no stupid questions. Well maybe some but we'll answer them anyway :).

Support is our priority!

Basic knowledge of CSS is required! 

During the course, we will use different CSS techniques to show different methods.

Grid (with auto fit and minmax), Flex-box, perspective and others.

We will be here to answer any questions that you have!

  • If you're ready to become a better CSS developer hurry up and enroll!.

Remember the true power is the QA section where you will find answers and explanations for everything!!


Meet Your Teacher

Teacher Profile Image

Pure Css


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
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.



1. Intro: Hey there. Welcome to our course. I'm Jordan, and we're gonna be learning how to create different CSS components such as buttons, cards, text animations, load animations, menus in a bunch of more things before we get started. There are a few things to keep in mind, of course, is gonna keep expanding until we reach at least 50 videos. And, um, how he did it is we'd record riding the source code, um, and then after recording that, we can play with the speed of it, and we narrate essentially what we do. So sometimes it's a little bit out of sync or a mistake was made writing the code. And rather than start the whole video again, just explain what the mistake was and how he fixed it in the narration. Um, all right, so, um, every time you approach a different lecturer, different components, uh, it's a great idea to try to figure out how it was made before. Um, you know, our goal is to try to expand your knowledge of components and properties and how toe use them and encourage creativity. Are there many different ways to reach the same results? So trying to figure them out is a great way. Discover new uses for properties in components and animations and so forth. And one, Um Right. So, um, one of the best ways to learn is have your text that are open and right along with me. You can control the speed of the video positives much as you want. Um, but yeah, you want to really practice doing that, And that way, you know the things that things will stick, you'll be able to use them later on. Um, last but not least, we have a Q A section for the course. And whatever question you may have, even if it's just how is the weather over there will do our best to get back to you with an answer. Hopefully, within 24 hours, we are here for you. All right, then. Excited to get started. Here we go. Happy learning 2. Font Awesome Explanation: May I am Welcome to this quick lesson on how to, ah, use icons from fun. Awesome. It doesn't type in front. Awesome. Using the version you want 5.9 point. Oh, and that's the newest one. And you click on the link. Um, you gotta load that into your aged email. So you click Copy, link tag, uh, for the version you want just paste at and your HTML all right, within your within your head and in order to find. And, you know, if you want to select a different version, you can select um, from this menu here, I didn't load the different one. Uh, and that Say you want certain icon just loaded you certainly icons. They will just search for a Facebook icon. And there's, ah, free icons. And there's pro icons, and, you know, we're gonna use the free icons and you still like the icon you want. And in this newest version here on you to do is click on the link. Uh, that has the class, and it copies it for you. All right. Click on that and you paste it and your head's too. Mel, where you wanted to go So it's class fab if a Facebook All right. Now, if you want a and that's what it looks like, it's a nightgown, and you can style it like a like a font. Um, Now, if you don't use it on older version, what you do is you type in front awesome and type in. The version will be using the course. Will you be using 4.7 point o fair bit and you select just the first option on Awesome keeps their older versions on mine, which is great for us and go toe icons and you search yet again We're gonna search again for the Facebook icon. I also like the 1st 1 and yet you just can't you copy the glass from there. And don't forget you also have to load the, uh, load the link on, be differently and you paste that, and that's how it's done. 3. Auto Typing Text Animation: Hello, everyone. Welcome back in this lecture, we're going to be working on a pure CS as text typing animation. On what should we do that? So we have our body and we have our title class. Um, for our text? Uh, yes, we're going to a basic reset, and I'll as as I'm doing that, I'll explain what we have is we create a text box of this size in our html the size of our text. But we're gonna make that text disappear. I'm gonna make it transparent. And the text You will see its text from the styling text from the CSS. Okay, um, if you haven't understood that by the end of the video, um, watch it again or ask in our ah question. Answer. So finding titles. Uppercase answer. Rift five picks a letter spacing absolute positioning top 50% left. 50%. Just centering it. Really? And there you go and transform translate myth minus 50% minus 50%. Also, to get that centred effect. Now, we're gonna take our text, and we're gonna put in our pseudo element are before element and it's content the pure CSS text typing animation and we're applying all the same styling that we did to D html text, uh, uppercase. Absolute. Only instead of positioning from the beginning, we just used top zero left zero with 100% and height 100%. Because the text box that we already have from the HTML is the same size. Now we color our text black and overflow hidden. And that's because, um, it'll be is it? Explain later. All right, the border radius, one pixel solid. Uh, one Sorry border. Right. There you go. So instead of coloring Holbox, we just call it the border. Right? And I just looks like one of those text typing. Ah, flashy thing is, um so for animation, we're gonna dio as, uh, call it type. And it 0% with zero 50%. The width is 100% and 100% are with is back to zero and the animation type with 12th duration. Infinite. Now, you see, that's how it looks at the moment. Each ward is revealed one of the time. And if you could see what's going on, you see that as our container becomes smaller, all our words shift down in the line which is not good. So what we can dio in order to avoid that is, um uh we white space, no rap. What if that is, instead of wrapping our words down? Ah, as the container shortens, it keeps them in this just in the same line, and we slowly reveal them. Now, instead of revealing it as a scroll or we want to look like typing, we just We count our letters and we're going to reveal it in steps in our animation. So we got 30 characters. So let's do 30 steps. The animation type 10 seconds steps 30. Infinite, right? And then it reveals part by part. It's not actually revealing letter by letter. It's just revealing a little bit of space. A little bit of space is why, if you look closely, you can see it that some letters or cut in half. Um, but yeah, but no, it's just a way doing in CSS. Ah, And if you didn't understand the white space, that's a little tricky thing. You guys think you a or Google it quickly because I don't want to go into that right now. All right, see you in the next lecture. 4. Floating Text Animation - Amazing for Your Header!: Hello again and welcome to another lecture. Uh, we're going to be doing a, um, a split screen text transition effect. Um, well, you can see it. Um, and how we're going to do it, We will have within this section. Will have to dibs and each of them with the same exact text as, Ah, hate to Element. We're gonna go ahead into our CSS and perform our basic reset batting zero margin, zero box sizing border box. And we're going to use for a body fund family since it riff and for section, we're going to go with position relative with 100% and height 100 viewpoint height display will be flex and our overflow hidden. That's right. It's not a class, it's just a section. Okay, so, um, we're gonna style actives position relative with 50% and a background color off of a dark blue cable blue. I'm never sure and with a hitter and overflow. So each day has its own him overflow hidden. I'm going to select the first of using the nth child. We're going to give it a background of ah, of our image. Now, background size is cover. Okay, so You can see that on the first day if we have an image. Second, if is just our background color now we're gonna do is we're gonna go ahead and style R H two elements precision absolute top 50% and left, 50% were essentially centering our text, and we're gonna use transform translate minus 50% minus 50%. OK, so Texas centered. I gotta say whitespace no rap. Which means we don't want our text wrapped. We want it all stretched across the screen. And when we got fun size bigger do 12 AM Okay. As a big big Now we're going Teoh style, our first as a child. They're not even color transparent and use Web kit Ah, text stroke to to show the outline of our font. And to define that is two pixels. We're also gonna add what? Get take stroke color has white. Okay, now we're gonna We're gonna put the text from our left div Exactly. Under the text from the right. If, um no, no, that's not gonna work because I am transformed. Translate. 50% kind of screws that up eso is gonna use in line height in order to send her a text in the middle of the page. Great. So I got one text right under the other are transparent. Texts will change that. The second nth is colored or white. And then as one of them, as the text on the right disappears under the left. Ah, the transparent text appears. So it looks like it's just changed over. We're gonna create our animation, which had 0% is transformed translate x zero. And at 100% we're gonna transform, translate by minus 100 acts, which is to the left. We're gonna go ahead and at our animate. I mean, what a 62nd linear. Infinite. And we're gonna add that to both our anti child Children, Child's or no. And there you go. Now it's two different texts running, but it creates the illusion of change. All right, they go. Any questions? Q. A seat. Next lecture 5. Loader Animation With 15 Circles: Hey, guys. And in this election, we're gonna be looking on a awesome lowering animation. Slightly trippy, slightly drippy, but very, very cool. Um, sure. How that's done. Um, we have our def class of loader and 15 spans. I know it looks like a lot, but in reality, it is a lot. Um, under a basic reset. Um awesome. Yeah, I just decide to sit that one out. I've been making a lot of videos lately. A lot of lectures. Body height, 100 Vieux port, height display, philex justify and the line center background. That's not science. Maroon. No purple pink. Who knows? Great. So your style are loader position relative with 300 pixels, height, 300 pixels, background white. And there you go. We got ourself. A nice cube. That's the end of the lecture. Uh, just messing. Transform perspective. 500 pixels. Rotate x 60 degrees. You know, it's on an angle angled box, transform style preserved three D. All right, so we're gonna style all these bananas. All the spans in R loader class, position, absolute, um, and are displayed block. It's important to mention that spans are in line element on, So we do display blocks so we can give them heightened wits. Um, and that will be one on top of the other and not spread out in a line. So our border, we gotta to pixel solid border, solid white border and, uh, just look like a ring. Um, border radius, 50% right. Makes it a circle and transform. Translate zed minus 100 pixels. And I haven't given it height or width yet. So I'm going to do is just I've wrote out all this could before because each one of them has, um a different Ah, a different we're doing. Sorry, How we doing? Heightened with We're doing it distance from the sides of the box with the beginning. All right. So far top and left and right. And bottoms. Distance from the side is 10 pixels are circle. Be very big because it's almost a full box. If the distance from the rest of the loader class square is a lot of pixels and the cycle will be small. Um, so instead of typing all that out for you, I just copied them. The whole thing. It's very easy to understand. Take a second positive. You have to look at that. So we're gonna create our animation, animate and at zero are transformed. Translate. Zed is minus 100 pixels. Right. So in the three d world, that's the up. And that's the towards us and away from us, I think. Is it not bad explanation at our animation to the loaders bans and give it three second ease in, ease out infinite. Okay, um, it's something for sure, but it's not quite what we're going for. Something I do is I'm gonna add animation delay to each and every one of the spans. Now, as past me adds the delay to our spans present me will tell you that if you have any questions or any requests for tutorials you would like to see, um, as lectures. Um, please ask that in our Q and a section and tell you so each of our animation delays is, uh, just 0.10 seconds, um, more than the one before it. And I skipped showing all that typing. So you've got that you just take even take a second look at the source code, and you can see that what it looks like with animation delay just the rings heading up a noun. Awesome loader effect. See what the next lecture 6. Loader Ring Animation: Hey, guys. Welcome. And this lecture, we're gonna be working on a cool loader ring animation. That's what it looks like. Um, you can use it for, um, all sorts. All right, so I got a diff class loader and got four spends inside it, and those four spans gonna help us. Style are blur. Um, I do. Ah, our basic reset. Um, yeah, really. Just styling are all are different elements with zero patting margin and a border box box sizing. Ah, body height, 100 report height, background. Dark purple display flex. Justify Khan and center line Item center. Oh, thrilling. All right. Our dark purple background. Very, very nice. Very nice. So and a Styler loader, which is styling all our classes. So we're just gonna give it its position on the screen was in relative with 100 pixels and height pixels. Our border radius 50%. That makes it a circle and background Linear Grady int. Um, Mr Moment. So, uh, like blue, yellow to pink or purple. One of them. All right, So it's a no. The effect is caused by the spending and the circle in the middle. So it's a linear Grady in its not a And if you know, the hue circle Looks like it's not one of those. Um, all right, so we're gonna style in our spans position Absolute. With 100% height, 100% puts them just a exactly on top of our circle. Ah, border radius. 50%. And with the exact same linear Grady. And so you can't even see them. And what we do is each, ah, and his child. We had a filter blur. Uh, the 1st 15 pixels. Copy that. 2nd 1 would be 10 pixels. 3rd 1 will be 25 pixels, and the last one will be 50 pixels. Now, you can play around with that. You know you can. You can use just one blur and see how that looks you can use to blurs. You can play with the pixel size. Find whatever. What suits you CSS about being creative and exploring? All right, that's enough motivation for today. Ah, we're gonna add a after element to our loader. Empty content, string position. Absolute top 100. Top 10 pixels left. 10 pixels. Right. Tentacles, Adam, 10 pixels. That's probably the way to do that. There's many outside. There's many other ways do that. Um, this is simple. It's easy, and we're gonna color it same color as our background. All right. Border radius. Make it a circle. There you go. So it looks like a ring, even though between you and me will know it's just a bunch of spans layered on top of each other. Off circle spans our animation. Key frames animate 0% transform. Rotate zero degrees and weaken. Guess 100% ISS. That's right. It's transformed. Rotate 360 degrees. I guess you could say this animation has come full circle. I'm really sorry. Anyway. Animation animate 0.5 seconds. Linear, infinite. And that said, There you go. Got a cool ring loaded animation. Um, share it with your friends. Throw it at your enemies. Take care, guys. All the best 7. Loading Snake Animation: Hello and welcome to another lecture on the subject of loading screens. We're gonna be creating these three loaders. And, you know, you could just use one of them for your site. You don't eat. All three are You can use 12 or as many as you like anyway, what we got? We have our body, and we have three dibs. Each one with a class of loader and an SPG within it. And one of our loaders also has a class of triangle. These are our three SPG elements. There are a little bit bigot the moment, so we'll shrink him down. I had two RCs ass into performer. Basic reset. Uh, well, are elements our pseudo elements? I understood their padding and margin zero and a border box box sizing. Wonderful. Now for our body, we're gonna go ahead and set them in height to 100 Vieux port height and, uh, our background toe white just like that and our display flex justify content. Center line items left? No, not really. Left line items center. I just wanted to mix it up a little bit. Now we're gonna define our loader class. Um, which ah is every eye every different icon every day of Has a loaded class of this affect all of the different elements? Were you ever with? Of 44 pixels and a height of 44 pixels set their position to relative. And now we're going to just separate the styling for the loader triangle, and he's gonna give a little bit more with so it looks looks good. That was gonna be 48 pixels, all right. Only the triangle has an extra loader because three sided and we're using four sides together to our Adam margin margin between them. 16 pixels is to give us a little space on our screen. We're gonna do now as we're going to style. Ah, Respighi's display block. And with 100% height 100% so that they fill the loader containers. And for the rectangle, we're gonna copy out. We're gonna type out the Red Tango one, copy that a couple times and just change it to apply to, um, both the circle Paul Ah, and the triangle. And we had to find Phil is none, but I didnt work. Come just a moment. Hang on. Ok. The cast called Load I misspelled the loader class, so we'll cancel that out, and it should work for us. Uh, we're gonna We're gonna do it just ah, dark colored stroke and apply a stroke width of 10 with 10 pixels. Okay, so now you get the outline. Now we're going to apply specific, um ah, Stroke. Disarray to our triangle. Now this disarray Dasher, a stroke dash array. What? That is a zit defines 145 pixels of line 6 76 pixels of break, another 145 of line and 70 peoples of break. Okay, so because it comes out one on top of the other, and so our brakes are both in the same place. You could probably just use one. You know, just half of that. You don't need the last two numbers, but it's useful for other things, so I'm gonna leave it like this. So, for a rectangle, we've done our dash, Ray. 19264 96 4 And for our circle 1 50 51 50 50 Now what we'll do is we'll add a dash, offset. We add it. We're going to zero for the rectangle and the triangle. But for the circle. We're just gonna move it a little bit forward. So they're all have the brake on the left. See how we've changed that to the brake is on the left. We're going to change. Our stroke line capped around and I just rounds off the edges for us and the stroke line. Join also round so that the corners aren't square corners. We're gonna add a before element to a loader. And these would be the little dots. Empty content string with a six pixels. Hide a six pickles, bore pickles, six pickle height. Wonder how high pickle is. Border radius 50% and position absolute on a position it as top 37 pixels and left 19 pixels. That should place it right in the middle. Okay, it's in the middle, but it's in the wrong metal. On a background purple display block. It was transformed. Translate it to minus 10 pixels and minus 10 pixels. That should place it air. We go, um, almost centered and always in the triangle. One's a little out of place, so it's gonna create a different before element for Loader Triangle, which will cancel out the previous one. The triangle had, and we're going to find it as left. 23 pixels and transform. Translate minus 10 minus 10. And right, that that puts it in the middle for us. Okay, so one at our animation and we're gonna call it, um, path, triangle and duration of three seconds. I will be using a cubic busier effect that we got from our cubic busier generator online and will be an infinite loop. And we're gonna use the same path. Ah, for each of r S v gs, just only path rectangle will be passed circle. No, I have to do is define, um, to find that animate its key frames. So for path triangle, what we're going to do is we're gonna set it. Uh, the dash offset. We're just gonna change. Dash offset The stroke Dash. Offset. Sorry. And so at 1/3 of the way, 33%. It's at 74. At 66 it's a 147 and 100%. It's at 2 to 1. All right, so each step, another side disappears as a stroke is just pushed along the path. I'm gonna create another animation called Path wrecked before our square shape. And as it has four sides, we're gonna use four key frames. 25%. 50% 75% in 100%. Um, right. And the numbers I'm using for the stroke dash offset. Um, actually, you can either just copy mine. Exactly. Or you can find him. You can find the dimensions in JavaScript. It's It's just a moment you could find. Probably a quick tutorial in anywhere. All right, so I'm gonna create it for a path circle. And yet, again, we're going to using dimensions for the offset that we have previously. Ah. Found, um, if you ask will give you a more detailed explanation. And the q and A section gonna apply each animation to its, uh, through its element. All right, Now, these are for the dots, which, um hey, stuff to add the key frames for those going on dot wrecked and on the dot Wrecked will work also for the circle because, uh, that's moving to the same places within it. I was gonna transform and translate, uh, 200 into that 25%. Then it 75% transformed. Translate to 10 pixels minus 10 pixels. So That's a 50%. At 75% we're going to translate. Transformed translate 20 and minus 36 pixels had 100% on to transform translate tu minus 18 pixels on minus 18 pixels. I think I said I said 10 pixels on the 50%. So no, that's definitely 80 to minus 18. Lasting animate is our key frames for the triangle three sides only three steps 33% 66% and 100%. I'm just gonna do a similar thing transformed. Translate 00 Copy that on for 66% we're gonna dio 10 pixels and minus 18 pixels, 100% going to minus 10 in minus 18. And there you have it. You have a cool, low loader intimations and it's the next lecture 8. Shining text animation: Hello there. And welcome to this lecture that we're gonna be working on this shining text animation effect. Um, so we have our body. We have our paragraph of text, whether shining text Anderson effects. Um, and that's what it looks like. Obviously very boring. We're going to our basic reset. Um, So, um Margin zero patting zero on all of our elements before and after a few developments Inbox sizing board box. And we're going to style our body. We're under display. Flex, We're gonna center are objects using justify content and a line item center height 100 Vieux port height and background. Um black. Great. Fantastic. So my style are paragraph on family sans serif takes transform upper case and font size to E. M letter spacing four pixels and gonna hide our overflow background Linear Radiant too, right? Black, white And then, as a singer said back to black. Now our background size gonna be 80% hand background to repeat. No repeat, that prevents it from a linear from becoming a black, white and black and white and black tonight, so just keeps it as it is. Constant. Uh, so we're doing our animate to a three second linear infinite. And we're going to use Ah, what Web kit Background clip text which what it does is it shows the background behind the text on Lee the background behind the text. And we've changed our text color too transparent, Which is why we see the linear background behind the next. So at key frame 0% we're going to ah, send our background position waved left minus 5% and 100%. We're going to send it way over the right, 500%. So they go to get that cool effect of the background moving behind a transparent texts. And, um, there you go pretty awesome. Take care. 9. Loading boxes animation: Hey, guys. And welcome to another lecture we're gonna do. Is this cool loader animation? Um, we're gonna have a container with the three, um, three rectangles, box 12 and three. And the class names. Um, in the CSS, we'll start with our basic reset padding and margin zero box sizing border box. Okay, Now, within our body, we're going to send her all our items and give it a height of 100 Vieux port height. And we're using display flex, so our background will be a dark color. All right. Our container has a width of 112 pixels and height, hundreds Victuals. That's the square where the whole animation takes place. And now we're have we have three different boxes. Now, each of these boxes we'll have a border of 16 pixels. Was solid white on their position will be absolute. All right, here's display block, and we're gonna copy each container and style each one separately. So with the 112 pixels height of 48 pixels, the margin of on the top of 64 and a margin left of zero pixels. I always got a copy that and do it for the other boxes changing only the width and the height. Somebody's gonna be vertical, and some boxes are going to be horizontal. I don't have a width of 40 pixels and height of 40 pixels. Sorry. 48 in the margin. Top left of zero. Our third box exactly is the one of the top. Right? So with the 40 pixels, height of 40 pixels margin top zero margin left, 64 pixels. I'm using margins to position. Um, a box one and two and three within the container. Okay. I'm not going to go into explaining every key from a key frame. I tried and it just got too complicated, and you can see it on the screen. Ah, but just I want to just understand what we have. We have our, ah rectangle on the bottom which takes this place of two squares and it we change its wits . So it becomes a que begin of the square again, and just we push its We use the margin to push it all the way into the corner. So it's it's Yeah, you get it. So the wits turns back into a square, moves to the corner, and we're gonna do this for each one of the squares so that they expand to take the empty space wherever the empty spaces will have Cube expand into it, and then it will, ah, compact again. But we don't have to have each. We're going to animate each cube going the whole way around thes square. That would be absolutely, um uh, unnecessary. Because all we do is after they finished their animation, there's we just have it start from the beginning, have it jump back with no transition drum back to the beginning, and it will replace a different box that has taking its place. That I don't feel like that's a great explanation, to be honest. Um, but if you look at the source code and you watch the animation Ah, um or even using, expect element. If you want to look at it in your browser, you can see here and I'll explain. This one is you can see it. So we have our rectangle shrink into a different cube. And so then the animation of that cute takes over. Um, yeah, that's ah, that's it. If it's if it's really too difficult to comprehend, Understand? Uh, just mentioned that in the comments, and we will, uh, try to go into more detail the explanation. So I'm just gonna let the video role and you can follow along for for Okay, So, um, I slowed down the recording just so you understand. That's how it starts. And you can see that now, the left bottom corner becomes the top board and corner, and now it's back to the bottom. So you don't see the switch cause it's all behind the scenes. Um, but every block makes two motions maximum. So in opening, closing, and then boom, we reset again. That's the beginning. And that just loops. Um great. Have you understood it? Ah, yeah. The source code is gonna be a bit more useful on this one. All right, see you next lecture. 10. Loading Animation Fill: All right. Hey, there. And welcome to another. Um, I'm a lecture. We're gonna be creating this loading screen. That's the simple version. This is a more complicated version. I won't be showing you how to do that, but I will be giving you the source code for it. Um, And when you understand the 1st 1 you understand, the second just it's a few more key frames in our animation. Um, so we've got a class. I got two classes, one that will be for our white little rounded rectangle and one for our rolling ball inside that, um, yeah, um, we've done our basic reset as usual, and it's gonna style our body as Affleck's display. We're centering our content using justify content center and a line item center, and we're going to give the background a, um, orange color in this case in 100 vieux port height. Okay, that's we don't have any content. You can actually see it. So our first class, the container which contains within it are item classes. Well, we're gonna get a with 100 pixels and high to 50 pixels border radius of 25 pixels. So it becomes a rounded rectangular box and a white background five pixels of patting just to give it a little more, uh, space to that we're gonna style are item Give it with the 40 pixels and a height of 40 pixels. Orange background and border radius of 20 pixels. All right, so just fits snugly inside our container. Now I'm gonna start. We're gonna create an animation for the rotation, will call it R O T. And will transform. We're trying. This is gonna be applied to the container. And it, you know, we're gonna have five different stops from 0%. 25% uh, 50% 75 100%. And the starting rotation, zero degrees. And then we go open increments of 90 degrees, nine degrees 100 degrees, 27 degrees. There's 60 degrees, which is full circle. No, no, just apply. I go ahead and apply our animation R t with two second easy now infinite to our container, so you can see the container rotates and the item stays in its spot within it. We're gonna create, um, another animation. It will be moved, and this is going to apply to our item. And, um, we're not gonna change the size in this one. This is a simpler one. So our wits will remain at 40 pixels, and we're gonna push it back and forth within the container. Using margin left, 25% to 50 pixels. 50% back to 0 75% decided to 50 pixels and 100% back to zero. Now apply our animation Move to our item to second season out. Infinite. Take a look at that. All right, you guys. That's a cool little odor in his end of itself, the more complicated one. Um, you can just see, we've added more key frames, and we also we change the wits, um, so that it grows and shrinks. If you really want this, we can create a tutorial for this as well. Um, but, um, at the moment, if you ask for, it, will make it. But for now, we hope you understood the concept. And, um all right, see you next. Lecture 11. Activate Button: Hey, guys, how you doing today? We're gonna be working on a cool activate button. All right? You can see it has both a hover effect and a focus effect. Um, using to a different ace V g icons and span. Um, you can see we got our SPG icons within our ah and Kurtag class activate. This is what we do. They look like before any styling and our basic recent patting serum margin zero inbox sizing inherit in our HTML. We're gonna edit box sizing board a box. No, in her body. We're gonna give it a minimum height of 100 vieux port height and font family since a riff display flex, Just fight content center in a line out of center. The color will be off white, brownish. We're gonna start eating or activate class, but a background color of purple and padding dwells on the top and bottom 12 all around, and our display a bowflex on our border radius. 22 pixels color whites. Text color will be white in front weight, 100 mercer pointer and transition 0.3 seconds. You can see it. There you go. He's line height. 20 pixels. Great. No, we're gonna at it. The spans the span, which it contains both are icons. Uh, display in line block with 20 pixels in high 20 pixels making a small circle background, white border radius, 50% a position relative and our overflow hidden as you can see that they're cool. Give it margin, right? Four pixels. A little bit of space between the man and the text. You can see the difference. The line height, mates. Just pushing it up a little bit. They couldn't look a little better. Now we're gonna edit are, uh, SVG icons within the span position absolute. With 12 pixels high 12 pixels. So they fit inner circle left 50% stopped. 50% and transform. Translate. Stick him in the center. Perfect. Um, now what? We're gonna dio as we're gonna bring it forward on the screen by using Z And next one. Now we're gonna edit each icon separately. The 1st 1 Yeah, well, color it purple. Using Phil when using SVG icons feels like using color. Give it a transition of 0.4 seconds using the cubic was there. Motion feature. Just type, you know, copy this one. You can find all sorts of different motion online. We're gonna copy that on just due to the second pseudo element, which is our second icon. And we're gonna use the couch function, and we're gonna do minus 50% which is six pixels because of the height. Now I'm gonna do another minus, um, another minus 20 pixels. Sorry. I had Tony pixels, and that'll bring our icon lower. You can see it there. Gone is below. But it can seek said an overflow. We're gonna add a hover effect and add a shadow above a box before pixels a dark purple. Now, we're gonna activate now again at another, however effect only for our first icon. And for each of the icons were just going to add 20 pixels in height so that it looks like they switch right. That kind of the bottom one rolls the top one out. Top one leaves the screen and the bottom one takes its place. All right. Like so Exactly. All right, school. One more thing we want to add, um, when you click on the button when you click on the link, we'll minimize slightly. Give me that feeling of click and he was the active function within. Activate transform scale for 94 we're gonna add a shadow green shadow a little bit along Besides, in the top like green color. Now you can see how that looks. You see, it minimizes and you get a little bit of a shadow. The last thing gonna change the heightened wits of the text. Also, as we click stays with it. All right, that's it. Cocoa will see you next time. Take care. 12. Switch Button with background animation: everybody. How you doing? And this lecture? We are going to be creating another check box button. Both the call button effect. Ankle background effect. All right, let's get right into it and see what we're gonna be working on. Um, all right, Within our body, you can see we have on input check box and a span than that class called with a class of check. All right. Um, point, remember, span is an in line element, and if you want to change its width and height, you'll need to change that to block. All right, We're under a basic reset. And who are gonna change dollar before or after? And irregular elements. Batting zero margin, zero box sizing border box. Excellent. I have is a check boxes moment. We're gonna change the minimum height of our body. 200 viewpoint height, few port height. This place likes justify content center in a line items center. Okay, so it was centered. Almost, Senator Jack Box and we're going to style are class sec a position relative and display black with the 40 pixels and height of 20 pixels. Our background starting background will be a dark blue. Of course, will be a pointer and border radius of, um, 20 pixels. We're gonna hide overflow, and our transition is going to be easy in the duration of half a second. Okay, so we have created our little I was going to be our check, not a checkpoint. Our little button looks like an iPhone icon. And as it and we're using a display block, so we're gonna change, and we're going. Our input, which is our checkbooks were on display. None that just makes it as yet. Makes a check mark disappear because of check boxes automatically added by your browser We're gonna do is when our box is checked. Well, um, first, we're going to change the color for, uh, of our little button that white. And how will you change? The entire background was gonna great a massive box shadow blur around it. There you go. So that's all that That that blue is really just box shadow. And now I gotta created before element, which is our our little, uh, the little circles. The little circles in our switch case. Andy content string position, absolute top two pixels left, two pixels, Background white and wits off. 10 pixels and a height of also 10 of sorry. Both are within height, 16 pixels, and our border radius has 50%. Just transition. Indians your 0.5 seconds. OK, so you see, that's a little Ah, white circle Now one checked. All right, So, um, we're gonna do is we're gonna apply a transition to our before element a little white circle when the check boxes checked and we're just gonna transform Translate it right out of the picture by minus 50 pixels to the left, his own. You click it, it's gone. Okay, I'm click. It comes back, and we're going to gonna create another element, which is just another circle. It's gonna be our are after a pseudo element is going to be identical except for its position. Uh, all right, change is bad, and it's back on God change background to black because, as you know, we've made our color are back. Our background is white so we can have a little circle. We black okay, you can't see right now, cause it's not a it's not there gonna trance, so it starts out transformed. Translate. X 50 pixels means it's a way off to the right somewhere. And when checked, we're gonna have it translate back to zero pixels. All right, You see, So it just replaces a white circle and there you go. There you have it. That's the animation. That's your check box. Pretty awesome. And, uh, see you next lecture. 13. Button Before and After Transition: Hello, everybody. And welcome back to another button tutorial. Um, on this button, however, effect two different pseudo elements and animation. All right, you just are a button ankle tag in our HTML link to our style sheet on. We're gonna start styling everything in their style sheet under a basic reset. None of this should be new to you. Um, batting zero margin, zero box size in good old border box. All right. Maybe the height of 100 VH in the background color of dark blue senator. Objects display flex justify counted center and a line item center. Find family sensor riff Grapes are gonna start. Um, er class button, 20 pixels patting on the top and bottom 90 pictures on the sides. They can actually see that. So I'm gonna add a just for now. I'm gonna add a one pixel saad border. See, that's where it is. It's on the same location as a button. And delete that because we don't actually want it. And get rid of that underlying using text decoration. None. Give our find some white foreign size 13 pixels. Text transform uppercase letters base into pixels in color white cursor. Minor position relative and overflow hidden. That's really important. One feature for this transition of 0.3 seconds. You go looking good. And now we're gonna do is gonna give it a hover effect. We, however color greeny like green blue teal that teal I'm border one pixel solid. Also Think it. I think it is. Teal turquoise, maybe turquoise. Anyway, now we're gonna do is a button focus you can actually see it causes the no, you can't really seeks the blue. But when you have a ah, the browser automatically gives it Ah ah, Blue outline board is that we're removing that no matter what. Um, adding out lineman anyway And create a before pseudo element. Empty content string position. Absolute zero left zero. Aligning it with just the button on a 100%. 500% creating an overlapping button only you're gonna change it. Give it a color. Nice purple display in line block. Capacity one. I'm gonna bring it down or Z index, send it back. So it's behind our actual button and give it a transition of 0.65 seconds and the motion will be a cubic busy here. Awesome. All right. We haven't added animation yet, so there's no transition we're gonna style are after button. Um, what we can do Because the styling is the same for the size, the dimensions. We could just select both of them and style them together. You know, there's the dry rule of CSS, which is don't repeat yourself. Um, just keeping you keep your code as small as possible. Um, and then style the button separately. So on the before button, we will give it its own background on the after one, given its own deal background. But we need to change. Our Z index will bring that one back. It is. Copy that, too. Ours. Great. Give it our however effect. So when you have it, the button the before changes translate that. Translate that X all the way out. 100% and same thing for the after element, only minus 100%. So both the pseudo elements are leaving the button to the sides, and you can't see it because of the the hidden overflow, which we, uh, we wrote right at the beginning. Don't say that. You see, the elements are both outside the button, but they're invisible. All right, there you go. Another really cool button. And ah, that's all for now. Take care 14. Button With Snake Border Animation: everybody. And welcome back today, we're gonna be working on this, um, button effects with the two swirling snakes. I'm a fairly simple you'll see in a minute, as usual, Any questions? You have had two rq a section. So we've got here is we've got an anchor tag with, you know, empty. Hey, h ref link. For now, we're gonna use four spans. Now, spans isn't of themselves a useless, but when you use them with the diff classes and you start applying classes or, uh, so forth and you can start doing fancy things with them as you'll see now, uh, we're gonna start just by a basic reset in defining, um, as you can see our before and after Ah, and padding zero margin zero. It's actually a new way of resetting and CSS, as opposed to some of the older ways you might be familiar with, but I'll still work box during border box. Great we're gonna do now is we're gonna define our body, which is the button itself may be a height of 100 of you view port height, background, um dark blue, dark blue and gonna fund family sansa riff. You also probably most my videos display flex Justify Content center and the line items center. Yeah, that pretty much a centers all our elements in the middle. I got seriously now, Um, I already we're gonna get rid of that underlying there because how the browser displays our link is not the way we want to keep it. So I'm gonna start defining our anchor tags. You can see him there. Now. This is defining all these spans within it as well. Um, so changing color to a light blue. 30 pixels of vertical padding and six pixels of with are fun sized 30 pixels. Now, essentially the padding, remember, it's the size of the button itself supposes a margin, which is the diff the distance between spaces. You should know all this already. Let us basing two pixels. Tex transform uppercase and exhibition None. Their moves are underlying from the link. It's going a little bit of box shadow. Eso It's, um 20 pixels on the vertical and 50 pixels of blur. Now we're gonna hide overflow. You'll see why in a moment, just any any elements that leave our button itself within the padding will disappear. And so we look like so far. And see the shadow position relative right now. We're gonna We're gonna create it before element just so we can a little bit of design. We're gonna put a small box to the left of our button. A darker color. Empty contents Drink is, you know, need text. We need to Don't forget to write that or else it won't work. It is an absolute absolutely. The last relative, which is our, um are a thank attack. So two pickles from the top and two pixels from the left leaves room for our snakes. You'll see in a moment for a few moments and bottom two pixels as well. And with 50% the background, just give it a slightly different color. All right, There you go. You can see some of the before elements pretty much just a lighter box on the left. Now, I'm gonna start on styling our our spans using nth child. It's just selecting. So if we got four of them than nth child, one will be the first. All right, give it position. Absolute. On top zero left zero with 100% in height. Two pixels. Okay, these are snakes. The four different spans is snakes for each side background. Linear Grady int too. Right? You can use your own colors. Just copy the ones I'm using. All right. Okay. First snakes on the top. We're gonna do is we're just gonna copy this. I'm gonna create four of them. It is changing. Um, the width and the height. So they're either verdict and the position, so they're either vertical or horizontal. All right, help top Zeron, right? Zero or with his two pixels. And her height is, uh, 100%. That's of our button. And we just trained Change the direction of linear ingredient. It's a pretty simple some of the bottom left. You don't get the bottom right and integrate into left. The last one is uh ah. Give me saying so. High 100 with two pixels. You're going to top. And there we go. So we got a four sites with a linear Gregan on the enemy in the animation. We're gonna dio, um, we're just going to I see what it looks like with the overflow hidden. First, I typed as a comment start. Key frames animate inanimate. One will call intimate one. That's the name of animation and 0% we're going to transform translate ex Tu minus 100%. That's off the screen to the left. And 100% we're gonna transform Translate to 100%. Uh, copy that four times and yet again, each time just changing between the the X and A y and the name for each one friend. Me to inmate 304. See? So here, Fran made to translate the wine the same. And, Anissina? Um yeah, I can't. I'm not good at doing more than one thing at once. Okay, for translate what sent Translate y minus 100. Make three. All right now and man animation animate one to second. Well, in your infinite, I can see you can see yourself. You make the code. If you remove an element of it removed. The what you're seeing now is without overflow hidden. So you see, the snake starts before the boxing's after the box, you can play around with durations. And with would, uh, you know, delete the infinite, delayed the Lanier. See how it effects that. See how you couldn't better make it on your page and make it suit you. All right? So I got all four. Him firing, um, we're going to do is a hide the overflow and be exactly And be we're gonna we're gonna do is, uh, had a delay because right now it's four separate lines firing. We want them to connect. So by delaying the will delay the vertical ones And it made the second Spain in the forts. Man, you can see they'll connect. Awesome. All right, so what? We've got forced man's firing, but it looks like two snakes running around the border of our button Continuously. Alright, guys, See you later. 15. Card With Clip Path Hover Effect: Hello, guys. And welcome to another lecture. And today we're going to be doing, um, cards with a appearing text and a ah circle clip path on our image. Create a cool, however effect. Um, what we have here is a class container that has within it four different cards, each one, um, with ah, def class of box. Within that, an image and a class of content that has a hates to header and a paragraph of text. And at the bottom, an ankle tag with a read more link. All right, let's have a look at that. Before we start, we're gonna change the display to flex so we can have them side by side and a lot of things . All right. Under a basic reset to our CSS change our padding and margin to zero in our box siding to board a box. And we're gonna define our body as a display flex and justify con into center in line item center, right. We can see that we've centred are different elements. We're going to apply a min height of 100 vieux port height. We're gonna be using font family console us. I want to define our container, which contains the four different cards and give it a width of 1200 pixels and the display flex and flex rap wrap. All right, we haven't seen the change yet. We still need to apply justify content space between which is automatically defines the margins between the different cards in our element. Now I gotto define our container box, which contains both the image and the text, and we're going to define it a width by defining it away with 280 pixels and a height of 400 pixels, um will now have enough space in the screen to show them side by side. Exactly. Right now overflow is hidden. Um, you'll see why in a bit we're going to style our image box The box that will contain our image. Give it a black background in a clip path of circle. So we're creating a big circle 400 pixel circle at center 100 pixels. So it's actually bigger, Ah, than our card box and so you can't see because it's behind it. We're gonna apply transition of half a second and transition delay of zero point five seconds. OK, so it's still invisible. You can't see it now. We're gonna add a hover effect to our image box so that our circle shrinks down to 80 pixels. Add center 150 pixel with transition delay of zero seconds. All right, so you can see that are our circle shrinks to display just part of the image. Now we're gonna modify our content within the box. This contains both. He hates to header, and the paragraph said the position of absolute left to zero and bottom 20 with that 100% and height at 55% we're gonna give it 20 pixels of padding and textile lines center by defining our height at 55% and our bottom zero. That's what sets the text below the part of the image that we want to display. We are just going to remove the underlying from our link at the bottom from our read more of text decoration. None said the background of black and the font color white at five pixels of padding and said the display to in line block. I was gonna add a bit of a margin from top 15 pixels to give it some distance from the paragraph. Right now, um, we're going to do is because we're going to apply a hover effect to, uh, both are Link our header and our paragraph we're going to set, um, we're going to find it before the hover effect. Ah, as invisible a pastie zero transition of half a second and transformed translate why of 20 pixels. So it's invisible, and it's a little bit lower. Then what is going to be with our, however, effect so that the effect shows that coming into the screen into the card they were just gonna copy out each one of these, um, to prepare for our hover effect. And what we're gonna do is we're just going to change the opacity toe one and have a slightly different delay on each one of the elements to create a one after the other visual effect. So, um, yeah, so what? We're gonna dio I said, Ah, rapacity to one and transform. Translate. Why? Back to zero? And, um, transition. Delay will set a different one for each one of our of our elements. So 0.5 2nd 0.7 seconds, 0.9 seconds. We'll see if that have a look. Cool. There you go. You can see our box image shrinks and our text appears gradually. And you got it. Cool cards. All right. I hope you enjoy the lecture. See you again next time. 16. Glowing Gradient Buttons: Hello, guys. Welcome in this lecture we're going to be working on a glowing but in effect, uh, menu buttons. Be using a list. We're gonna be using a A list to do it. That's a one way, um, gave it a class list, and all are different list elements. Um, have a ah anchor tag a link within them. And we're using fun. Awesome icons for the icons within it, uh, reminding you. We have a video on how to get icons from, um, fun. Awesome. All right, So NRCS says we're gonna do our basic reset. Um Patty. Zero margins. Gearbox sizing border box. You should be very, very familiar. You should be saying it out loud as it appears on the screen or closing your eyes and saying that you should know. Height, 100 vieux port height, background, black. Not quite. Black display, flex. Justify Can't etcetera line items center as well. All right. That's what it looks like, which is pretty terrible at the moment. From a style our list. And just just by applying the display, flex A already appears in line as opposed. Teoh, let me side by sides of posted on top of the other with 440 pixels just by content space between which automatically defines the margins for us. Now let's style none removes the automatic styling that comes with it when displays it in the browser, which is the little the bullet points by the side. Um, great. So we're defining our are all the different list items within the list Class Ah, position relative with 100 pixels high, 200 pixels. Ah, border radius, 50%. Which is, uh, you know how to make a circle and ah, the little purple things in a corner of the icons that we haven't centered yet. My background Ah, White. If you didn't notice, we click the way to it, which gets out just glasses. OK, so now we're gonna style our, um our list links, which is our icons. And we're gonna use a position. Absolute top 10 pixels left 10 pixels bottom left 10 pixels and write 10 pixels. That's creating a smaller circle within the circle. It already exists. Um uh, have given color yet back because you can't see it. And to put our icons in the center, we're gonna use a text align center and our line height is 80 pixels. Um, what that does is really a centers are icon, and background is black, and our font color is white. That'll make the icon white, the background black. Find size 36 pixels and border radius 50%. The transition is just for letters. Two seconds. There we go, you see? And we got our, um our icons and their backgrounds is the black circle, whereas the just the list item is the white circle. Okay, now we're gonna create a before a before and after element and before element to our list items. All right. A style. Them all together. Empty content, string, absolute position. Top zero left, zero with 100%. And our background a linear Grady in 45 degrees with a bunch of different colors. And by a bunch, of course, I meant to red and orange. All right. You can use what it goes you like. Remember, we're not, uh, their mind. I thought of a joke, but I forgot it. So our border radius 50% z and X minus one, which pushes it behind the other options As you see the shadows at the back the back. The back enter filter is a blur of 10 pixels. Okay, so we're gonna take all our icons and gives them just a text shadow Two pickles on the bottom where the Five Pixel Blur and Graeff, our favorite shadow color. Um, now we're going to select the first icon, and we're gonna because we want a different color background for each of our four buttons. So we're gonna do that by selecting the before and after elements of each button, and we're gonna use it. I'll just copy the background. So it's not styling all the moves. Copy the background for the 1st 1 And now for each of these different icons that we're going to just style using the nth element, and we'll give each one of them a different color. I would speed up the video for a bit flash this so change number the NTS child change the colors of your linen. Radiant. So if that wasn't exactly clear, what we're doing is we're selecting the element itself and before element in the after a moment of each different child and we're giving them all the same color background. But each button gets a different linear ingredient. Okay, so where we have an unnecessary background style we're gonna delete, and we're gonna add Just add a bowler. Um, And now, for all of our after elements were going to give them a blur of 40 pixels. Now we're defining their opacity of the blurred before and have elements as zero. Because in our transition, we want that to appear. So we're giving that in our animation with that to appear swinging translation of one second. Okay, so if you haven't understood, um, we have ah, rapacity our past easier applies to both the afternoon before elements. So both the 40 pixel blur and the temple a simpler are blurred by the passage e great. So you can see that when we hover, we just turn your pastie to one, and it appears with transition one second. We just removed that last last. The border around the circles, the white, um, it really help us see where we were doing throughout the video. You don't have to do that. Um, but I find it helps. So there you go, foregoing icons, and, uh, how about it 17. Image and Text Reveal Animation: Hey, guys, how you doing today? We're gonna working on a cool image. Reveal animation in a texture. Real animation. It looks just like that. Um, pretty simple. Ah, a couple before, Or elements. Maybe a bit of delay. Nothing too crazy. All right, we're gonna get our class box class image box. And within that, our image and our hates to which so text. And I'm just not Poppins fund, which I've imported from from that link up there. And just copy down over source code. Or, you know, where else you gonna get finds from basic reset All familiar things. Margin batting box sizing. Alright, A body is 100 Vieux port height and our display flex justify content Center A line items center finds family font, family Poppins or for the weaker browsers, Sand Saref. All right, so our box, we're gonna put it in a position relative, that's all from really all we're gonna do for that one. And our image box, which is the class within box. Well, with the 600 pixels and a height of 400 pixels, um, background is black, but that is actually not necessary because we're gonna put an image right on top of that. Ah, transform scale. X one will change that in a moment on transform origin left. That means that when our Texas revealed the the origin comes from the left, you can do it from the right. Just do from the right. Ah, styling our image itself. Position absolute top zero left zero with 100% height. 100%. It just puts it exactly above our black background object. Fit. Cover. There you go. Um cool 100 balloons. RZ index minus one, which reveals our header. Right. Just wanted to demonstrate that Segarra I got to the background Don't need that. So now we're gonna do is create before element Just gonna be the black box that we will use to reveal it. So our contents during is empty Position is absolute topping Left are zero and our wits is 100% height Also 100% background is black. It's necessary Black background rZ index one Because we wanted to hide our hot air balloons Don't know where they go Don't worry. They're just behind the different element and transform origin to right which means when disappears it'll disappear to the right and were it appears of appear from the left, I think All right, now we're gonna style our head or headed to position absolute yet again. Right? Minus 80 pixels that basically pulls it towards the right. It's easier than writing from the left. And however many pixels bottom 40 pixels and patting 10 pixels background white so we can see it and set index to To put it above are black box box shadow with 10 pixels in the bottom 50 pixels. The blower off the gray that were so familiar with inbox Shadows transform origin left. I was gonna copy that again for our before element, which is the white box is gonna hide this one it again. Here we go about it. Empty content string Absolute absolute obsolete. Absolute position. Top zero left zero are with 100% and our height. 100 percent. Fascinating. Alright. Background white. Okay, we got our white before element hiding our hates to and our black before element hiding our image the next one same as the box. I think that should work if it doesn't will change it. All right now to transform origin right? And I'm not explain we're gonna see. Okay. So everything reveals itself to the right, which is both the hot air balloons and the black box on top of him with the span. So we just stretch out to the right, Um, and then we're gonna have our white box also stretch out to the right, and then the before elements will both, you know, go a little squeeze back down to small. So revealing was underneath. Uh, have you understood that that was a bit confusing for me as well? 0% transform scale like 0 100 sent transformed scale X one. So there's nothing when we started. So I changed that right at the beginning for transform scale like zeros. It doesn't start appeared. Animations recalled. Reveal given duration. One second. Easy in and out forwards. Okay, let's right. There you go. That's just everything opening up. We're gonna add delays and make it look a little bit better. Just gonna copy that. Innovation reveal. And he's in and out for words are hates to and at a delay, allowed under a little at a delay of, um uh, one second say, Okay, we got we got a bug there. You can see that the, uh, h do The white box stretches out from the very beginning, is probably haven't specified Transform. Zero scale zero x x here from whatever. I'll do that in a moment. Um um Okay, so we're gonna what we're doing Reversing the animation, calling it reveal. So that's that Animations only on the before element and usually three seconds. So what happens is three second, we're gonna refresh it. You'll see three seconds later. Boom. It reveals at the moment the origin is to the right. You can see it. It close to the right. Um, same thing for the hates to also just at a reverse to the animation got reveal. And there you go that both goto origin right now. So it looks like if we change that look, But first, I'll fix the transform scale zero for our hates to box. That should mean that we're fresh. Okay, so you see, it didn't start open already. That's that's not supposed to be. That'll be in the source code as well. You can see it looks like when it change or transform margin to the left. Right? So when the animation is reversed, it closes to left with that again, Arjun is left. Awesome. Have you like that in questions? Q and A. You know the drill. Take care, Stay classy. 18. London card effect: Hello there. And welcome to another lecture. And this. Like you're gonna be doing cards. Uh, we're going to cards that have a expanding title. Um, and a fading background. Okay, how we're gonna do this. Ah, never linked to our Poppins fund. A glass container that contains three cards and each card have a div with glass box. Um, a div with class image box, an image and a diff class content with, uh hates three elements and a paragraph element is what it looks like before we style it. We're gonna get right into that. We're going to perform our basic reset change all our padding and margin to zero and box izing border box when he was display flex and justify content center aniline items center. We're gonna set our minimum height to 100 viewpoint height, our background to a dark graves blue. I'm gonna be using fun family Poppins, or, as I like to say, sensory for all the weaker browsers. Right now, the next thing we do is style. Our container class remind you this is for the Dev that contains all the cards and give it of a width of 1000 pixels. I use a flex display and that line up all our cards next to each other, justify content by the space between which automatically sets the margins. And we're going to now Styler box position relative with 300 pixels height, 400 pixels. This sets thesis eyes for are the dimensions for all our different cards Background black which will be what's under the image and a box shadow. Ah, slight box shadow underneath just to give it that cool three d effect. All right, we still got to get our title in the right place and text in the right place, but one step at a time. Um, in our image box, How remind you this image box that contains this class contains within it our image. Ah, gonna set its position absolute to get it on top of our card and top zero left zero with 100% in height, 100%. Okay, great. By doing that, we've allowed the text, the content part to take the space which was occupied by the image. Now we're gonna style or image. Same thing. Position Absolute top zero left zero with 100% and height, 100%. I don't gotta have a transition of 0.5 seconds. Now we're gonna apply a hover effect to our image That will change. So Passages zero meaning image disappears. And what's left is the black background. We're gonna just modify our content within the box. Said its position absolute. 20 pixels from the bottom and 10% from the left. Give it a width of a percent and the height of 80% 60 pixels with a white background and overflow hidden because we have a lot of text spilling out. And we do not want that to show on 15 pictures of patting we want. Let's say I want to go to space from the right. Um all right, forgot to add percent tour. 80% great we're gonna do is going to play a hover effect to that. So change its with 200% and its height 200%. So when we hover over the box, thin our content the diff with a class concept which contains within it the paragraph and the header will fill will cover black background. All right, you see, Now you're gonna add Ah, um lads and delays the texts just to make it look a little bit better. So to our header, we're going to change the font size of 20 pixels. And with her paragraph, add a bit of a margin just to give a little bit of space from, uh, the other element, the header. And we're gonna change the opacity to zero line height, toe 1.2 e m just pushes it. Ah, that Martin push it out of the frame so that you don't see it when it's just the title at a transition. Is your 0.5 seconds and text line justify? Yeah, Right now I need to add a, um um where was that? Uh, yeah, I'm gonna add a hover effect to our paragraph is well, so that it appears the capacity one and give it a transition. Delays your 0.5 seconds. So when we hover, takes a moment and then the text appears. But now I forgot to add the transition delay to the title to our continent box so that it will grow instead of just appear in transition of 0.5 seconds. And I guess now you can see our title grows in to cover The card card fades to black and our paragraph text appears awesome. There you have it. Any questions? Feel free to ask. I'll see you in our next lecture. Take care. 19. Cool navigation with rotate animation: All right. Hey, guys, Welcome to this lecture, and we're doing something a little bit more complicated. Um, it's ah, really cool. Nab our really cool menu with a tilt you can see on our y axis. Um, we use a tiny bit of javascript when I have begun again. And do it Explain it. Um, maybe a touch. Anyway, so we got our class navigation, and within our headers, we have another Glad, um, last navigation button evasion list. And we have our all our different list items with their text. And, um yeah, OK, we're gonna throw our That's what it looks like without our CSS styling ordinary naff bar. Now we're gonna do our basic reset defining are patting in our margins and our border box. Um, for all of our elements before, after and otherwise and everybody we're gonna define height is 100 vieux port height fund, family sensor with, and we'll give it, um ah, perspective of 800 pixels, which is pretty much a distance of how the viewer sees it. Not exactly, but that's that's I need to understand. And a dark grey background thinking they were going to style all are different hyperlinks because we do not want him looking Has the browser automatically defines them? So I'm styling our navigation. We'll give it is the index of two to bring it forward. Put it above our image and position. Absolute top zero left zero Ah, height 100%. And with ah 16 e m He's really wanted covering part of, uh, the left side of the screen. So e g m is 16 pixels. In our case, background will be, uh, just a lighter form of gray. All right, eso Now we're gonna dio transform translate x minus 100 AM and it'll disappear. But we want that is part of our as part of our animation Not right now, part of our ah, the effect. So transition will be 100 50 milliseconds Ease out. I mean, so So, yes, we're styling our navigation, our lists, and our list style is none. So, like the rest of the dots, the bullet points on the sides, you know, I'm gonna stop for a moment, and we're gonna style our navigation title. That's a little button. Um, that when we click, it opens the menu. It's called Button. Right? So we're gonna we're gonna dio be in our block display on our absolute position and just top zero. And on the right, we're going to give it minus 65 pixels is pushing it off to the right a little bit, I should say, pulling it towards the right hide. 60 pixels. And what 60 picks? It was just a small, cute little box font size 12 and Franco are white and background. The same dark. Just a dark gray as well. Same as the rest of the Nath Bar and our Z index. Same. Same. Also to say Miss Dean Akbar, the find me lie night is 60 pixels. So our text is centered. Text the line center as well and letters basing one pixel. Okay, so text transform upper case and cursor pointer. Okay, because that looks pretty good. We're back to styling all of our styling. Our list and we're gonna style are specific navigation links. That's all these different links, So display in line block padding. Nothing on the side. 16 pixels, top to bottom. What's 100%? Right? 60 pixels color. Uh, light blue. 60 pixel line height. All right. Already is looking better but we're gonna get rid of those underlines using tech station number, text decoration, none and text transform of her case you got Copy the background color. Okay. Are you already looking better out? What we're gonna dio is define what happens when we hover. We hover over a specific button. Its color will change the color of the exactly color. The background changed the white coat, the final change to black and a 0.2 seconds transition. This gives a delay effect to make it look, uh, a little more classy. All right, See that? Awesome. All right, so we're gonna use another element. We've called Main and HTML, and we're gonna use that for a picture for image. So we're gonna yet again position. Absolute. And we're gonna just put it right on top of our of our body. So it covers the entire screen. At the beginning. A top top left zero with 100% height. 100% background was linked to our J peg in the background size cover transform origin left . You see what me that in a moment. Once we given our rotate effect, so are transitional. Be 150 milliseconds. He's enough. Okay, so I'm gonna create two classes that don't exist. Ah, in our HTML code, but we'll using JavaScript will apply them. So we're gonna have a menu Active class. Ah, when we transform and translate x 20 which brings it back from its minus, however many percent. However, we had it, we will bring it out onto the screen where the menu is active and a menu hover. Um, uh, where we transform and translate extras by minus 15. A. M is just a tiny tiny touch. All right, so you can see that, right? Me too. Do you hear that? Comment? All right, So see, when we hover, there's a tiny effect, and when we click on it, it'll open completely. It's important to use the same class names with me if you just want to take our used a drive, a script that I'm using. So we're gonna style our menu active so that are transformed. Translate X is 16 e m and rotate y 15 degrees. So it pushes it out a little bit to the right, and it will rotate it with a three d kind of effect and hover when it's translates by 1 a.m. And we take by one degree. So a tiny little transition for the hover when you click on it both moves away, all right. And we still have off our cool effects on our buttons. Right? So, um, tiny little things when you do now, we're gonna add so that our just our color background color to the navigation button when we hover it with two point 1.2 2nd transition. So that glows as well. And we have her make that transition. Actually, they got change the transition time. You know, these are all things you can play with. Um, So Okay. I didn't get into the JavaScript at all. It was Copy that out of the source code. Um, yeah. Um, they shouldn't have any problems with that, But if you dio, uh, you know que a section All right, Take care 20. Portfolio For Your Landing page Collection: All right. Hey, guys, how you doing? Um, today we'll be working on a scrolling image. Um, it's great for Portfolio is great for landing pages. Um, I'm gonna show you the basics of how to just how to create that. And, you know, you fit in where you see fit. I mean, you won't necessarily want to do it exactly how it's done here, but I'll just show you it's very simple. Um, so we're gonna create a diff classic a container and two classes, both box and with image one image to so you'll need your two images. And these are two really long images. And, um, we'll scroll them. You'll see eso getting to basic reason. Should be familiar with this. Um, for after batting zero margin zero, um, where I'm going to do, I'm gonna be using a, um ah, grid display. Just interesting. So for our body height, 100 viewpoint height, display, flex, justify content center and line item center, the usual centering on our elements. Now, container that's a diff containing both boxes display grid. And we're in a grid template. Columns repeat, auto fill been mexx. And if you don't familiar with the Mid Mex function or the auto. Finn, I'm not gonna explain that here, but if you don't not familiar. But you can ask in the Q A, um before you might have a electric deals with at some point, all right, We're gonna style are box class effects, both the images. I'm gonna specify height of 400 pixels and we'll add some shadow underneath. 15 pixels blow and ah, 25 pixel blur. 2020 pixel. Blur of gray. Okay, now you can see I'm tournaments one under, the other on that's That's a mistake. It's probably cause we haven't specified. Ah, wits for the container. Eso it doesn't know to align them next to each other. But we'll fix that little bit later. Um, they're gonna style box image one. There's no space in between the two because it's the same element to several glasses. That's how we define them. Um, and we're gonna use our image as the background and background size cover and copy that and just change the image name for their second image. All right. Okay. No. Try to fix that bug from before giving a with of. There you go. So just by defining specifying with us 1002 100 um, they spread out how they're supposed to background, position, top and transition. He's in and out eight seconds. So for our however effect both when you're hiring and when you let go, it doesn't jump straight back to the top. It will slide both down and up. So are when hovering over a box in the container. Background position, bottom. All right, so that's that's what the transition canceled it out. And with your cancer, don't you get that easy in and out and say, That's these Out on the one. We've stopped hovering and easy and on the one All right, There you go. So, um, that's pretty much the effect. Um, you can you put the duration play with all sorts of objects. So any questions head of Q and A. Catch you later 21. Power On Button: All right. Hey, guys, how you doing? Um, in this lecture, we're gonna be working on using creating a cool button on off effect using a the checks box function. That means we don't have to use JavaScript. Is the power off and power on Gore's The applications? You could apply anywhere. Yeah, we're using. Ah, fun. Awesome for icon. Version 4.7 point. Oh, on our class. Um, the FAA, our off for the icon. All right. So you can see we got the icon. We got the check box next to it. Um, I will just follow on CSS and we'll see how we turned that into the glorious button you saw at the beginning. I'm basic. Reset, patting margin zero excising border box. So for a body and 2 100 vieux port height background. Uh, just black display flex. Justify content line items center. My. Here we go. So we're gonna style are labeled glass with a relative position with of 80 pixels. Height of the same and cursor pointer. Border radius, 50% in background white. Okay. So you can see there's our circle, the icons off to the side, and we still have that check box that we do not want. So for our check box class, what you can see here, we're gonna blind display. None. And it all disappears. Style are button within one of our spans and new position. Abs. Absolute absolute absolute. The top zero left zero display. No, not in line block. Okay, because we're dealing with spans, and, um, that the the automatic is in line display. So we have to define the displaced block with 100 sent hundreds sent and just a dark, dark gray black background. Ah, Blackground. That's a code word. Border radius of 50%. Pretty much where the white circle used to be. Only we made the white girl disappear with the display. None on the label. Now we're gonna style. Ah, the icon, which is the icon we took from Fond. Awesome. Given absolute position. 50% for the top 50% from the left. And transform translate minus 50% and my 50% just to center it font size, 40 pixels and color. Here's another um and they're black. Okay, so you see, you got the grey outline and are black icon on top of it. So now um, we're going to do We're gonna apply the effect by changing how the icon changing How the entire label having Sorry, changing how the icon class looks when the check box is checked. Okay, so we're gonna change the color of the funt to light blue, which is changing the color of the icon. I was gonna apply a little bit of text shadow, um, with just a darker blue and oh, save that refresh. I'm click. Okay, I look school. It's like an actual power button, which is nice, considering we're trying to create a power. But Nikon So I was gonna add a box shadow, too. Ah, the button itself. Um, you know the label using the button class and a Z. The insect is the shadow that goes inside and the regular shadows a shadow that's around. And then if you don't create your own shadows, you don't have to. You don't have to, you know, make it up from scratch. Ah, you can We can just go online and go away. Box shadow generator on its set up. Really nice. You input what you need, how you want to look and then they will do the rest for you. So our shadow creates a cool three D effect. Um, on the button when it's when it's not clicked when the check box is not checked. Okay. Exactly. All right. Okay. So I'm just gonna copy this, Um, apply different shadow for one at the label is checked when the check box is checked. I was gonna remind you the first number in the shadow is for left and right. The's second number, top and bottom third number is for blow radius. And the fourth button is for spread radius. Um, right. So yet again generated online. Copy my own, uh, see you in the next lecture. 22. Card with shrink Hover effect: Hello there. And in this lecture, welcome. We're going to be doing, um, cards, uh, cars with a shrinking, uh, when your ingredient cover. All right, So how we're gonna do that is we're going to have ah, three different Dave's with cards. And the class container contains all three of the cards. Each card class contains a card with a face class and face one. Ah, Class div. And within each face one, we have class content with hates to header and a paragraph and within each face to we have just the number off the card. So face to is the We'll see each card is made up of two faces. The top card has a number. Bottom card has the content. All right, so within our CSS, we're gonna go ahead and perform our basic reset setting out the padding and margins to zero and the box sizing to border box. I'm gonna go ahead. Styler Body 100 Report height display, flexed. Justify content center and the line items center font family sensor. If our background is going to be a linear Grady int 45 degree angle, uh, purple and a light pink. Is that hot pink. All right, I'm gonna go ahead and style are container. The one that contains all three of the different lives with cards in them. And we're going to give it a wits of 1200 pixels. Put the display as grid and our grid template columns repeat, auto Fit and Min Max. Um, now what this does is it spreads out are, uh, the dibs with our cards automatically. But because we're setting a witch to the card, it's not as critical. We're gonna give each each card class its own with a swell. The grid gap is 15 pixels now, Duchess Dolittle, spacing within the grid between the different elements on it. Margin will set it to zero on auto keeps everything centered more or less. All right. So now we got a style all the the card class, which effects all three of the different cards on a supposition to relative and which to 300 pixels heights of 400 pixels. Our margin is yet again zero and auto and background white at a box shadow, 15 pixels underneath and a 60 pixel blur. So if I marked a what does a comment here you can see, um, the space between the cards almost non existent because of the men Max feature. We set the minimum to 350 pixels and the maximum to one fraction. Um, so now we're gonna go ahead and keep our wits property on our cards. Great. Now we're gonna style. Ah, this is all the faces together. Both face one and face to will be affected by this opposition. Absolute bottom and left zero with 100% height, 100% display flex and justify content Center in line items center. Okay, right. So now we're going to style or face one. Now, this is the card part of the car that contains all our content. It contains our text. Contains are ah, our header element as well. I was gonna add padding for of ah, 20 pixels. Now our styling for the face to element, which is, uh, just a number. You had a black background and the transition of 0.5 seconds. So at the moment, you can't see anything we're not going to keep that is the background. But just so you could see that it hides the bottom face. Now we're gonna add a hover effect to face to and to find high to 60 pixels, cause we define the position as left zero and bottom zero. When it shrinks, it shrinks down to the bottom. So 60 pixels from the bottom of the picture. If we defined it as top zero left zero, then you would have seen it shrink up to the top. Now I'm gonna add a hover effect to face to to the header we have on face to, which is our number. We'll change the font size to 10 a.m. colored a white and position of 0.5 seconds. I'm gonna add a text shadow to that. Now we're gonna add, um sorry. No, When I got to do what, we're just gonna that's our card. That's all I want to start now, more hover effect. We're just gonna change the font size two to again. All right, So the number shrinks down as the car drinks down and it automatically aligns itself in the center of the card because that's how it's, um that's how it's defined to do. Now, Uh, all we're gonna do now is change the background of the different cards by applying background color effects who face to and just applying three different linear Grady INTs to each of the nth child. Great. So I'm gonna change over, are different college. And I learned your linear ingredients. Awesome. Yellow, radical blue. Fantastic. Fantastic. Think. And, um, perpetually yellow. And I'm just gonna change, uh, at a margin. There are face one header. Have a march of the bottom of five pixels to give it a little more space between the header and the rest of text. All right, There you go. So you next lecture. 23. Quote card : All right. Hey, guys. And this lecture, we're working on a cool card. In fact, for, um, cards in the background so you can see the background changes to the same as about kind of card, um, using font family Poppins for this. And we've got a few. We got a class quote in their body, and then we have the class of box and then the class for each of the boxes, Box one, box two and box three. Within that, we have some text. Ah, Paragraph hates to header for person making the quotation. And we have one more Dev with a class of background. That's because when we hover, we're gonna have to change the background. And that only works if the element you're changing is a child of your Your parent element is the HTML without any styling. So we'll get right into styling that over the bacon basic reset in selecting our all the different elements patting zero margin, zero box sizing bordered box. All right, So, um, so for a body, we're gonna do a display flex, justify content center, a line item center, and a minimum height 100 Report height, fun family. Um reading Poppins and for the weaker browsers sense a riff. Okay, cool. Now we're going to First off, we're gonna style are quote class defined. The entire thing is being a width of 1200 pixels. Minimum height, 400 pixels. Play flex. Justify content space between it. Right. So already spread out are different cards on the screen. And now we're going to find each and every box separate boxes with the relative position. With us 360 pixels and a height of 400 pixels, we're going to give him ah, white background and a hidden overflow. We'll get to why, a little bit later. Transition 0.5 seconds. The index to that. We're bringing it forward. So it's over our background elements padding of 30 pixels and just add some box shadow. Okay, Cool. Very cool. So next we're gonna style, um, is what happens when we hover over our box. So first we're gonna change the box shadow. They said that it grows just a little and I'll start will start a paragraph. Just change our front size to 18 pixels. I'm changed are header. So Justin is absolute and we put it. 30 pixels from the bottom. 30 pixels from the right was slightly larger. Font size, 20 pixels and upper case. Okay. All right. Okay. So now we're when you hover over the box, we're going to change the font color of both Header to and the paragraph. She changed white. All right, so when we have a background color, you'll see that now, when a style our background is all the backgrounds for the quotes, uh, we're depends fishing them on top of, um, you know, the entire page. So there's an absolute top and left zero opacity this important one a passage e zero. Because we're just gonna make it appear when we hover. Um, it's important. Understand? There's we got a few backgrounds running, so we're gonna make a different one. Capacity warned. Otherwise they'd hide each other. So, um, what we're doing is when we hover over box one, you're going to change both the background element, using the symbol ing to select another child within the same parent. That's not directly after it. And what's going to affect the box? So we're going to create the we're gonna change a passage to one and make the background a linear Grady int. Um, do these two colors case you can see when it selected both the background of the card changes and the entire background changes. Now, I was going to repeat the process for box to and for box story, just changing ingredient each time. All right, And one more. And there you go. All right. We got three different cards. 1,000,000 Grady. In effect, I just Ah, one more thing we're gonna dio you can create a before element for all the boxes with an empty content string on and before pseudo elements are and person absolute. We're gonna put it top zero left zero. Uh, sorry. It left minus 50%. Um, and with of 100%. So it's just the left half of the box. Height is the same as the card, and we're gonna change the color of that. Give that a ah, just dark gray color. So you can see you have, um, just a slight deviation of color in the cards with the left side of cards of light, lighter gray. And we're gonna create after element, which is for our quotation marks. Symbol the bottom right corner we're gonna do that using, um, just a, uh an image PNG image. Quotation marks position of absolute and a little bit on the bottom and push it over to ah , from the to the right. Just put on the bottom. Right. For the past, you have one and the same background color as our before element. Okay, The invert just shows the opposite color. So our quotation marks were writing by using inverted one is changed from white to black. And by adding 0.1 opacity fades, Do agree. Okay. Really not actually. Very notable. Noticeable difference. But, um ah, it's just a cool function to know the invert function. All right, now, one more thing. When we have over the box gonna take our after effect, then we're going to turn off the invert. Okay, So you can you just see that when it hovers? They're the quotations. Um, also changed slightly. Yeah. Yeah. You know, you don't even need that. But but it's there. So there you go. There you have it. All right, guys, take care 24. Rain Animation: All right. Hey, guys, how're you doing? I'm there working on a cool A simple lightweight, uh, animation effect for your website. Um, rather than using JavaScript what we're gonna take, we're gonna take a PNG image and just animated a little bit. Um uh, we're gonna need um uh is your, ah, European junior rain PNG. Now, you should know this. But the wonderful thing about PNG is that they're transparent, so you can have a transparent background. There's not a white back on you to remove, as opposed to a J. Peck. I've already done our basic reset of border box and the padding and margin zero, um, our body it again. A minimum my 100 Vieux port night. Um, we're gonna We're gonna styler section class. So the position is relative with 100% in high 100%. And our background is our image. It's BG dot jp mats are, uh, cool looking street background image and back on size cover. Ah. Right now, we're gonna add an effect to our Meghan as well. Call it enemy and just add a filter. That's Hugh. Rotate zero degrees at zero and 100 degrees at 306 degrees are 100 degrees, 36 degrees, 100%. That's your hue. Ah, spectrum. You can see from from 0 to 3 60 and it comes full circle. So what we'll do is just ah, uh, like instagram or when I was gonna filter through the colors on the duration will be how quickly it does that. So animates two seconds. Linear. Infinite. You can see it already. Uh, just cycles through. The color's gonna slow down the speed of this. Fine. I'm not gonna create our rain images in our before element within this section. So empty content, string position, absolute top zero in left. Zero. We're gonna change that, though with the transition and with hundreds sent an height 100% we wanted to fill our screen completely. Background is our rain, PNG or ping. However you want to pronounce it. I'm gonna get in on that one like that. Go gift Jif argument anyway. Key frames for the rain. Yeah. 0% background position zero and zero. Right. Zero jobs from the left. 100 sent background position. 20% from left in 100% from the top now. Animation. Rain duration 0.3 seconds when your infinite. Now I know I did different version when change duration, like one second rations to slow its kind of Skippy. Um um, So, yeah. So you will find the duration suits? I didn't 0.6. I made a version also with I had to just opacity 0.5. And that is what it looks like. So it's a bit gentler. So anyway, All right, guys, take care. Use your powers. Well, all the best. 25. Snake Button 2 done: um hey there. And welcome back on this lecture we're gonna be doing, Ah, neon snake button. You see, as we hover, you have a little snake effect and then ah, glow. So we're gonna need four spans with our ankle tag on and just the text me on button. Uh, which is you know, that's how it looks like, how the browser displays it, but it's not gonna look like that for long. So we're going to, uh, just your basic CSS reset. Adding zero margin, zero box sizing border box. I'm gonna go ahead and style our body display Flex fight content center a line item center . All right. They're gonna men height, 100 viewpoint, height. Which puts us right in the middle of the screen and background. Ah, dark blue and fun family. We will use guns. So, lass Okay, Next we're gonna dio is, um I wanna styler ankle tag, which contains all the spans. We're gonna make its position relative display in line block and padding 15 pixels on the sides assigned 15 pixels up and down 30 pixels on the sides. We're gonna make it. Ah, light blue. The fund text transform, uh, with uppercase and letter spacing four pixels. It's going to get rid of the text. Decoration is the underlying comes automatically with the lake. If you've been watching other lectures, this probably won't be new to you. It's very similar most of the beginning stuff. So if on size 24 pixels overflow is hidden and our text transition transition is 0.2 seconds. Okay, so now we're going to uh huh. Define our hover Got to give it a light blue color and the background of a lighter blows Our text is light is don't know in the color no maybes grayish grace blue and begins light blue transition delay of one second and box shadow of just 10 pixels of blur. Um, same color is the black ground. We're gonna go ahead and add few different blurs. It's so then it So, um, few different shadows. So it appears is a nice glowing effect, each one with a slightly larger blood. Now we're going to define all our spans as position. Absolute display block. We're gonna go ahead and define each one separately. Um, so the top one will be and th child one top zero left minus 100%. So it's not. It's not visible because overflows heading. It's actually off the screen with 100% which is identical to the height of the button today . What is the button and high two pixels? Background will be a linear Grady int 90 degrees, Which is like saying, um ah, like saying from left from right, Uh oh, and it goes from transparent to light blue. Okay, so if we if we take off the overflow hidden, you can see where it gets off the screen. Okay, so we're gonna add to hover effect for, uh, the first span. And what we'll do is we'll have changed the left so that it's at 100% so we'll have it leave. We'll have it leave the screen and the transition takes one second. All right, so it starts that left moves to the right, Then we want to We don't want to repeat, so we won't add linear, infinite anything of the sort. Now under the bottom part of the snake, which is the second, the third anti child we're gonna say is bottom zero right Minus 100 with 100% in height, two pixels. We're gonna use the same linear. Radiant. Just, um, changed, too. 270 degrees. That's that's That's like saying from right, nine years, like saying from left and yet again, we're gonna add a hover effect to that third and each child. So that right changes to 100%. And the transition takes one second. We're gonna delay of 0.5 seconds. You can see if we do 0.5 seconds. It happens in the same time, so we'll need Ah, um, yeah, well, you will need to play the delays a bit more, so I'm gonna we're gonna do our right side of the box will be our second and tears child top minus 100%. Meat is above the box, right? Zero with two pixels and height. 100% of our of our button of our ANC attack again. Copy the same background. I only changed degrees to 180 degrees riches. Um, talked about it and yet again, however, effect change it to top 100% just distance from tops. Put it below the box transition. One second transition delay. Zero point 25. Okay, so they all happen. Ah, right at the same time. So, yeah, we don't need to play the late. We just need to hide the overflow. Create the effect. No. Our last one left one and th child four bottom, 100%. Which means it's below the box, minus 1% left era with two pixels. Height 100%. And yet again. Face the same when you're radiant. Changed to 360 degrees. So it's bottom top and add a hover effect for the fourth span is bottom 100% transition, one second transition delay. 0.75 seconds. The whole animation happens in one second. Uh, it's the moment. Okay, We're gonna change the first. All right. So saying you hide overflow and you get them all lined up with their delays. Have is all the snakes are off one by one. And then the button gloves. So if you look at it all at once, you go. Spain wants man to spend three spent four, and then the glows. Awesome. All right, There you go. See next lecture. Take care Any questions? Q and a 26. Social Button Flip Box: Hey, guys, how you doing? They're going to working on a flipping box icon, as you can see. Excellent for your social media or dice needs. Anyway, um, so we've got we've got, um, using icons from fun. Awesome. If you don't have to do that, check out our video on that. Um, and we got contender class and three cubed classes for the one Q class for the three different cubes. And within each cube, we have a class for the size, which side? A class for the position just back, left front and a size for the color of the box, which is YouTube or gray or Twitter. All right, you'll see how all that works in the CSS. And you got the source code. So if you've got deposit and take a look, the source code, um, totally do that. Right. So I disagree. Set batting zero margin, zero box sizing border bucks, our body height, 100 vieux port night and color. Black fun family sensor. If let's play flex line items setting her center center again. No. Right. OK, so that's our Yeah, it looks absolutely nothing right now. Html um So we're gonna start styling our container in our containers contain The cubes are gonna give them their space within the within the screen on this place with 150 pixels. Right? And perspective. 1000 pixels. That's pretty much our distance from us. That's the worst explanation. You probably hear of perspective, but I could get into that more Any questions? Q and A. So we're gonna start. Are cubes position relative with 100 pixels, height, 100 pixels and transform. Sorry. Um, transform style preserved three day in transition. Transform for two seconds. He's alright, cause we're gonna have a transition with our hover effect that causes the rotating cube. Now we're in a style are different sides now, as it's a cute baller sides, they're going to be identical. Um, position absolute with 100 pixels, height 100 pixels, text align, center and display flex justifying content center align items center. Great. You can't actually see them yet. We haven't added. We'll make that a background. I'm white. Ah, So we're gonna styler YouTube side now on YouTube red. So we're gonna make that read. Um no, no, Sorry. I'm going to start by styling back. We're gonna style all the backs of all the cubes in transformed translate. Zed minus 50 pickles and rotate 180 degrees. Okay, what we're doing, we're flipping it upside down. So after our rotate effect, it's the right way up. Um, side left transformed. Translate. X minus 50 pixels. Rotate minus 90 degrees. Rotate white minus 90 degrees. Um, same again. It's to align our icons in the right direction. Side right. Transformed. Translate 50 pixels on the X. Sorry, translate. X rotate. Why, 90 degrees? All right. We need to pause that and copy them down and figure them out. That's fine. Um, if not awesome. So side front transformed. Translate. Zed 50. No need to rotate because it's the right way up side top transformed. Translate. Mind. 50 pixels rotate x 100 degrees or 90 degrees? No, definitely not. In the grace side, bottom transformed. Translate why? 50 pixels rotate x 90 degrees. All right, so you got it rebuilt our cube, and we've We've really just styled all the cubes we could copy and paste as many times we want have as many cubes. You can use this for any video where you need a cube. Uh, just an easy way of building a cube in CSS. So are, however effect when you have over the cube transformed rotate X 108 degrees, rotate y 720. Now it does that all the size and because of the preserves three D um, it keeps its shape if you you can see if you take out the preserve. Three D. Um, it just looks like a thin sheet of paper flipping. Anyway, we're gonna style the icons font size 30 pixels so you can actually see them, which is useful. All right, I can see I forgot to add 50 pixels on our translate said for the front. That's why it looked a little bit buggy that will fix that. Um, all right, now all our sides all are signed gray within the cubes. Um, actually, given the color white, but I'm not going to change class now. Our icons of gray that's the color. Which effects are fund and icons color are decided by fund. You call her? Mm. Anyway, side YouTube. We're gonna give it a red background in color gray for the icon side. Twitter, given a blue background, but all twitter colored background and our final side, the Facebook signed. I'm also with blow. You guys have a look at that? Oh, now I made a mistake somewhere because all are signs of blue. Hi, There you go. I forgot to change his name side Facebook blue and will delete the background cause it's absolutely relevant. There we go. So all our sides are white with gray icons, except for the background side. Hope you enjoyed that. Any questions? Ask in the Q and A take care. 27. Social Button Pink Background Hover Effect: Hey, guys doing today? We're gonna be working on, um, cool icons. It can see. And I can, uh, cool background transition and the color transition. Um, I use my guns are used. These icons from awesome cdn version five point 6.9 Sorry. 5.9 point. Oh, um, so, yeah, you can just a, uh, very much get any icons you want. Just make sure you linked to them from your HTML. Um, go ahead. Grab a few icons. You just copy the same ones I use. Good for social media links. You stick on all around your website. All right. Great. There we are. We have our four icons ankle tag, and we're gonna in our CSS a basic reset. Adding zero margin, zero and box siding, border box, our body. We're gonna create a background ah, white background with 100 viewpoint height, flex display, and center everything using justify center in a line. Items, I guess this one. It's like class box on Senator. All the objects again within the class display flex justify kind and alive and center. Um, no. Yeah. We don't need to alter the woods just yet, so now We're selecting the anchor tags within the box class. I'm just gonna copy that same center everything within of the underdogs as well. You've had a width of 34 pixels, height of 34 pixels and a one pixel solid border White. Give it a margin left. Here you go. And they're still square, so we'll take away the underlying from the text decoration and give our border radius 100% . There you go. Little circles around the icons. Now, to prepare for our animation, we're gonna give it a transition duration of 0.3 seconds and create our pseudo elements after element with an empty content string with the 34 pixels, height of 34 pixels. Background, uh, some sort of Think he ready, man, I really learned color names better. All right. And border right is 100%. Don't no goddamn shifted because, uh, position Abso okay. I mean, we gotta be a position relative on a line of top zero. Left zero. Get it right underneath are great, but we can't see alright guns anymore. So we're going to give the pass it. He had changed zero. Great. Now for the animation effect, we're gonna add a hover effect so that when you hover over the button, the after is changed a slowdown in duration and allowed transform a lot of scale. We're gonna make the scale of the beginning 0.3, even though it's invisible. And then when our capacity is one, when we hover also scale becomes one. So it was gross. Not only does it appear, but also grows, um, pretty simple effect. But now and to find a color, change the color for all the icons to a purple. Um, When? When I give the wits that size 18 pixels the highest auto just it'll fix the The ratio isn't squishing, you know. You know, we're going to just send it back to our Suzy Index. Mm hmm. That's still little bit buggy. Let's see. Let's fix that. No, it's aligned to the center. No change? No, just a second. Yeah, we still have it. We still the margin on our first cause. We added margin left to all the different icons. I was going to remove the margin from the first icon. We'll select that using the first child. And there you go. That's what you've removed the margins she's disappeared. Um, going to do is remove the border, which we have from the beginning over icon. So we're gonna do is when will select the anchor tags. And then when we have er There you go, get her to the border. Looks much cleaner. There you go. That's it for today. For now. Make sure you watch more than us today. Time is money. See you later. 28. Underline hover effect: Hey, guys, Welcome back. They were doing an underlying however effect. Um, that's what it looks like. There you go. Now it comes in from the left, disappears to the right. We just have an anchor link in our HTML with a class of button between, um now, in our CSS styling, your basic reset batting, zero margin, zero inbox sizing border box and we're gonna give our height 100 th start Blue background. There you go. I'm button still in the corner for God and bring it to the middle. Using a flex technique display flex, justify content center at line items center. There are more ways to do this, but it was going to use this one. We're gonna add some padding the button and make it white front size a bit bigger, you know, for case and remove the underlined with text decoration Okay, now on display as an inland block because if you don't, if you just automatically the buttons displayed is in line, so you can't change its Haider it's with if you displace them by blocking and play with that, I gotta create before element, which is our line underneath. Uh, empty content string because you need it and we don't want any text there. Position absolute means it's relative to our button going to give it a height of one pixel with the 100% of our button. There you go. No, we're gonna add a transform scale transition of 0.4 seconds. So when you hover, you will see that it transforms on a scale to from 0 to 1. Now that's coming from the center. We don't want from the center, so we just need to change its origin to the left. See, It's bouncing. After the left. We want to disappear to the right. So in our hover button, we changed the the origin to write. So it thinks that actually came from the right, so disappears. And there you go. And that's all for this time. 29. Special Switch On and Off button: Well, hey there. And welcome to another lecture. Another button lecture and his legs were gonna be working on. Um uh, this cool check box button. The court is by an semen. It is the final product, and we're gonna use and have an input check, box input and a label for that button. I named it toggle, and they're CSS. We're gonna begin with our our basic reset sending ever are padding and margin to zero or box sizing to border box styler body with 100 vieux port height. Flex display. Justify common center line item center. You don't have the check box display for a button label display flex justify card and center align items center cursor pointer with 110 pixels. Height, 80 pixels. And we'll add a little bit of padding to that. Make our border radius 40 pixel and a dark gray medium grade background. Transition will be 0.25 seconds. He's in and out and button display. None removes the check box. Now we're gonna create a before element on our label, which will be the little line that becomes a circle or empty content. String 48 pixel with a pixel height of the border radius of just four pixels and are starting background color will be green in our transition will be also 1/4 of a second ease in and out. Now, when are button is checked? We're going to alter our before element within our label. Transformed Translate X by 90% shifting into the other side of the label. Change our wits to 64 pixels and our height to 64 pixels aboard a radius to 100% essentially creating a circle and will changes background to white, adding a little bit of box shadow to pick is on the bottom and the pixel blur because have a look at that. Okay, I understand what I've done. Ah, because it's a and Siemens code. He he changed dimensions for, ah content display as opposed to a content boxes opposed to border box. So just changed that over, and everything will work fun, and we're gonna change the kind of the label. So when it's clicked, changes to light green. All right, there you have it. Any questions? Hit a par Q and A. Don't have any questions. Don't hit up acumen. A take care 30. Rotating images box animation: Hey, guys. And welcome to another lecture we're gonna be doing, um, rotating pieces of a box effect When Harvard you can see it's a cool transition. Eso We're gonna have a classic box. The difficult with a classic box that contains ah did for the class of face face one and another one of face and face to each one has four spans. Those therefore rectangles of our image you saw at the beginning Eso you know, inner CSS or basic reset margin zero patting zero and box sizing border box Ah, quickly style our body to height 103 point height display flex justify content center line items center And, uh, we're gonna get ah, we're gonna style are box position relative with 60 pick 600 pixels Height, 400 pixels and back on black. All right, you saw that. Cool. Now, within our box, we're going to style. Ah, the two different faces, Each one containing four spans. Position absolute top zero left zero width and height 100%. So this fills our box. True party defined now I'm gonna do is I'm going to style all the spans inside and each one has a width of 150 pixels, height 100% and transition one second now, within, um, spans have faced one. We're gonna spot style them separately from the spans of face to. So their background is our first image and the background size cover and transform origin top. Okay, so, yeah, you can see it's just repeat the same picture. Gonna fix that soon just by shifting the background over freed span. Um, we're gonna do is we're gonna style the face to span is gonna give them Also a background image. I change the image background too, and maybe transform origin bottom it is. Right now. We see, we see, um, face dio we're gonna transform rotate x 90 degrees, translate. Why, 50% You can see it slides out of the picture because it's 90 degrees. It just It's like a thin piece of paper held sideways, and it's below what we can actually see. All right, So when we hover over, um, over face one it's gonna happen to the spans is they're all going to rotate 90 degrees and translate. Why, uh, out of the screen. Minus 50 degrees? Yeah, We're gonna do the same. We're gonna add another the same, however, effect to face to. Only we're going to transform it. Enter the picture. So the rotate X zero degrees translate. Why is zero I was gonna Adam faces? Well, for higher specificity to all of these, uh, different attributes or stylings. Okay, now? Mm hmm. That's not supposed to look. Let's see what's wrong. Uh oh. I forgot to add zero degree. So rotator, zero degrees. Okay. So you can see the 2nd 1 fixes the 1st 1 and then we gotta fix the backgrounds, and, ah, the delay. So we're going to take our first nth child and said it His background position zero and transition. Too late. Zero seconds. Gonna copy that? For the four spans, we're gonna change each one. We're going to change their background position. 2nd 1 of the 150 My sorry. Minus 250 x pixels and then minus 300 pixels and a longer delay and minus 450 pixels. That fills up our box and the last 1.6. So each one is 10.2 seconds longer than the last. Okay, Awesome. There you have it. See you next. Lecture 31. Auto typing animation with colors: All right. Hey, there. Everybody in this lecture, we're going? No, just, um, text typing effect on Lee. We undo it with color. All right, you get a moving color effect. That glow. Cool. So, what we got going on? Um, in our html, we just have a body with a using ah header. One element called a color type. I noticed the British spelling of color. That includes the you supposed to be American spelling. That does not include you. So we're gonna take under a basic reset in CSS. She's a patting zero margin row to all our elements after before and regular backsliding. Border box, body. We're gonna do a background black and this Blake Flex justify content line I'm center our heights gonna be 100 vieux port height and in background this rust color. You know, that is exactly so. You saw what happens if you don't view port height text way up there. So in header one, we're gonna position relative and text transform uppercase family. So us. Let's basing 0.1 e m. He and fun size teddy him color transparent. So we've hidden our text. So the Texas invisible on ice is the background. So now we're gonna create a pseudo element. And I hate one before with our content colors, type, text transform, upper case position Absolute. On top zero left zero as well. So we've essentially just put our before island exactly. On top of the previous text that was there. Now we're gonna add, Is the border right on one pixel solid white. And that's like our typing line. There's a name for it, but I can remember right now Whitespace No rap. Which means that even when our containers small Ah, it doesn't push the text down below it. It still stays there like the text line exists. You can't see it cause overflows hidden and our background We're going to lead your radiant linear Grady into right, just a bunch of colors. Now, I'm gonna use, um what? Get background clip text, which means that it's we show the background that's behind the text, but not the rest. So you won't see the linear behind everything on Lee. Where the Texas transparent the animation. Call it type six seconds. We got in steps. 11 steps for one of reach. Um, character and spaces. You can see um, of filter blur of one pixels. Well, I'm gonna create an after element pseudo element, I should say. I was gonna copy all the content. Just changed the blood to 60 pixels. It's a cool blur effect. It's over. Animation at 0%. Um, 70% 90% and 100 cents. That's four different stops. I was going to change our wits. So this is for the linear Grady int. It starts compressed and then widens out as we type. All right, let me go on the steps. Give us the typing effect. So it's not an exact typing effect, but it works well and it's CSS, right? Okay. I didn't turn that off. That's a you can see. That's why you need both overflow hidden and why it's based rap. No rap. Sorry. No. You all right? No, They're cool. Color typing effect animation and CSS Take care