Easy Flipcard Tutorial | HTML & CSS

hello folks in this video i'm going to show you how to create this flip card effect with html in css so when you mouse over the card it flips over and it shows you some additional information so let's get straight into it i've got my index.html file here and i'm using sublime text so if i just type html and hit tab it's going to auto complete this skeleton structure for me so first of all i'll give it a title i'll call it flip card and let's just save and refresh this make sure it's pulling through okay that's fine and now i can set up the structure of the document now this isn't going to have a whole lot in it but it's just going to be a bunch of divs all within each other so i'll explain these as i go now the first one is going to be the container so i'll set up a div class container and within the container is going to be the actual card itself so i'll have another div or the class of card but then the card has a front and a back so you have to set them up as individual classes again so the first one i'll set up is front now this doesn't have any content so this will just be a closed div and underneath that i'm going to have another one which will be the back of the card and in this one i will have a little bit of content so i'm just going to have a h1 which says back of card and a paragraph which says additional info on the back of the cart close that one out and then i can start closing all my divs okay save that and there we go so the content is pulling through and that's actually the html pretty much done now i've got my empty style sheet here i just need to make sure that i'm linking it through to the html document so right at the top here underneath the title tag i'm going to say link and again a lot of complete so link corel is stylesheet and the file name is style.css so in my case both of these files are in the same folder so i can just call it the name of it and it will load through okay so that's the html pretty much done so i can move on to the style sheet now there's a couple of things i want to reset first of all so i'm going to overwrite some default values by saying margin is zero padding is zero and the box sizing is border box so when i save that you'll notice that the default values have disappeared and everything is bunched up together next we'll style the body first i'll give it a height of 100 vh which just means it takes up the entirety of the vertical viewport and we'll say overflow is hidden and for the background well i'm going to use a linear gradient here so again be a 45 degree gradient and the two colors that i used in the demo are this blue color and kind of pinkish pinkish purple save that okay that's looking good and now let's just set a font here so we'll say font family of helvetica sans serif and we'll give it a color of rgb two one one two one one two one one so it's just a not quite fully white just a little very light gray color and for now that's fine that's everything i need for the body then i need to style the container so the container is where the card is going to sit and all this really needs at the moment is a width and a height so i'll say 350 pixels and height is going to be 500 pixels next i want to style the card so if i just go back to the html for a second i've got this order here with my container within it is the card and then within the card is the front and back faces so actually the card doesn't really have a whole lot on it either it just has a height which is going to be 100 and a width of 100 now because it's within the container class it just takes the same sizes as what that has so that's the card for now and then i do the same with the front and back of the card so there's going to be a few things that are common to both of them and one the size is one of them so i'll say height is 100 and width is 100 so i keep repeating this but essentially it just means it kind of cascades down through each of the classes so i've set my container to that size and everything that's within it is going to be the same size as that so when i save that you see that it's moved but it's not quite clear why so i'm going to come back to this but first of all i'm just going to add a little bit of styling to the front specifically so here i've combined the two classes because these are properties that are going to apply to them both but then there are some things that only apply to the front or only to the back so for example the front had that image so i'm going to say background background image and i'm going to load this in so the image is going to be from unsplash it's just going to be a random image we'll go https source dot unsplash.com forward slash random and then you specify the size in pixels so i already have a size here it's 350 by 500 that's how big my container for it is so i'll just say 350 by 500. and there you go as soon as i save that you can see this has appeared and then the text is underneath and the reason for that is it's essentially taking the front and the back as individual divs and stacking them underneath each other of course the card is going to have to have these on the reverse of each other so we'll come to that in a second i'm just going to add a little bit more styling to this front and back first of all so i've got a height and a width let's just add a border radius as well here border radius of two ram so you'll see these ends round off and then let's add a little box shadow to it as well just to give it a slight 3d effect so zero zero five pixels two pixels rgba 50 5050 and then i'll give it a little bit of transparency so that's what the a is for and now you can actually see what's going on here so i've got one card up here and then another card or the outline of it underneath it to get these cards to be sitting on top of each other i need to go to the card div and say position is relative then if i go into the front and back classes and set their position to absolute well they're just going to move on top of each other so now it kind of looks like one card but really is the front and the back both in the same place and the next thing i don't like having this all on top left so i'm going to center it in the middle of the body now the body has this container in it so what i can do is go into the body and say display flex and once i've done that i can then position things on the screen so i can say justify content center and it's going to move it to the middle and align item center and because i've given a height of 100 vh when i align items it's going to go into the middle of the page now i want to add in that hover effect so we'll go into the card here and i'll say card hover and when you hover the mouse over it first of all i want to set the cursor to a pointer so that goes into a little hand and then i want to transform it so i'll say transform rotate y you got different options here but i'll go with rotate y 100 degrees and now when i hover over it it happens in an instance there's no animation yet but you can see it just flips so let's add in the animation if i go back into the card i can add a transition here so i'll say transition transform and the duration for this will be 1500 milliseconds so now it's a smoother transition so it actually looks more of an animation now one little bug that you might notice here is if i move my mouse around within it quite quickly it just gets stuck and gets a little bit jittery that's because i'm applying my hover effect to the card and then i'm trying to rotate the card so what i need to do instead is apply this hover effect to the container of the card because that's fixed that doesn't rotate so let's change this to say container but it's still the card that i want to modify well i'm going to add that in here so what essentially what i'm saying is i'm looking for a hover on the container which will then apply these to the card so if i save this now and i move the mouse around nothing else happens so it gets rid of that kind of jitteriness next i want to actually style the back of the card so let's target the back and we'll give it a background color so we'll go with 3a383a save that and of course you're actually what you're seeing here is the text that says back of card but i shouldn't really be able to see that because all i should be seeing here is the front of the card so i need to start with the back flipped over and they say transform rotate y by 180 degrees so this way the back of the card is already facing well backwards it's already flipped over but i don't really want to be able to see the back of the card so i need to go into this section here and make sure that i hide the back faces of both of those cards so we'll say back face visibility is hidden so now when i've saved this you can see that the back is no longer visible so all i'm seeing is the front of the card now you would think that when i hover over it the back would come up but it isn't it's just giving me a mirror of the front so to fix that there's one more thing we need to add in here and within the card class i just say transform style preserve 3d so now rather than just flipping this back and forth or essentially mirroring the top face it's actually going to treat it more of a 3d object and it's going to properly flip them over hiding the front and showing me the back and there we go so now it's properly flipping over and we're separating the front from the back now let's just style the back a little bit so it doesn't look ugly like that so i just want to put that text into the middle i'm going to set this to flexbox by saying display flex flex direction is going to be column so that i can stack my h1 and p on top of each other and we'll say justify content center and align items center save that okay that's a bit better let's just add a little gap in there as well cap of five rim okay that's looking a lot better now before i close this out there's one more thing that i want to add so at the moment when i hover over this it's not really much of a 3d effect you can kind of see that the image just gets compressed into the middle and then opens out again so what you can add in here in the container class is a perspective value so if i add a perspective of say 500 pixels and hover over it again it gives more of a 3d image so it's perspective essentially is giving you an impression of being a certain distance away from the screen so if i set this to like a low value like 100 pixels oh it just goes straight through the screen so if i increase this say 800 pixels it looks a lot better and you're actually getting more of a proper 3d effect now and you can do all sorts of these transitions so you could either say keep that rotate y but also add another one so we'll go over rotate zed and i need to make sure i need to do the same with this card here so if i save that now it's going to do this kind of weird backflip almost so really you can just mess around with these and add all sorts of funky effects to it but that's the gist of it and that's how you set up a flip card effect so i hope you found that useful and thanks for watching

Channel: Coding With Russ

Views: 60,448

Keywords: html, css, tutorial, flexbox, html5, instagram, clone, grid, coding with russ, html tutorial for beginners, html tutorial, css tutorial, css tutorial for beginners, flexbox css, flexbox tutorial, flexbox tutorial for beginners, web development, front end, frontend development, learn html and css, learn html, html and css, media queries, responsive, responsive web design, css grid, odin project, media query, profile card, glass, transition, flipcard, flip, rotate, animation

Id: NCLdf661ILE

Length: 11min 19sec (679 seconds)

Published: Sun Dec 05 2021