Sliding Sign In & Sign Up Form

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development bootcamp intended to get you a full time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys so today I have a UI project that was actually created by a friend of mine Florin pop who is a front-end developer and he created this sliding sign-in signup form so basically we have just this elegant looking form with this overlay on the side that has a sign up button if I click that you can see that now we get the sign up form ok so we can toggle between the sign in and sign up with this cool effect and we can do this by having CSS transitions using transform translate and also adding a little bit of JavaScript to trigger an event when we click the button to add and remove assert to the container all right now Florin has a website that has a blog and some weekly coding challenges actually this is one of the challenges and this is a post that has basically a written tutorial for this project so I will put a link in the description if you want to dive into it even more and check this out ok I'll also have a code pen with the with the code in the description so I'm not going to type out all the HTML I already have that here I will go over it but I don't want to spend time just typing out HTML it's pretty simple so let's take a look at it real quick we have link to font awesome for our social icons we have a link to the CSS as far as the structure it's just an index HTML style CSS and mange a/s so down in the body we have a div with the class of container and the ID of container so we can grab on to this in JavaScript and this surrounds everything ok the overlays the form everything and then inside here we have a form container and then we have another form container ok so we have the sign up form here and the sign-in form down here and there's a special class for each one we have sign up container and sign-in container as well and then the forms themselves they just have an h1 the social container which has the social icons a span with some text some input fields and a Senna button all right same thing here so h1 social icons fields there's also a forgot password link and then a button so pretty simple and then after the forms we have this overlay container so we have a class of overlay container and then overlay which wrap both panels okay so we have these two overlay panels that hold the content and each panel has a class of one is overlay left one is overlay right all right and there's just an h1 a paragraph and a button and each button has an ID so that we can target that in the JavaScript and we can go ahead and add a special class in the JavaScript all right and that's pretty much it and I just have a script tag down here for main je s so if you want to go ahead and copy this just scroll up slowly so you can copy everything or you can just go to the code pen and grab the HTML now the code pen the CSS will be it's the same CSS but I'm gonna write it in a different order just because I needed to change it up to kind of explain it in the best way possible all right so we're gonna jump into our stylesheet and all I have here is an import of our font which is this montserrat font that I'm using from google fonts so we're gonna go ahead and get started I'm gonna just make this a little smaller I just want to be able to see both at the same time and it's not really that responsive it's basically a desktop UI but if you wanted to make it responsive you could for instance flip it and have it you know have it go vertically instead of horizontal so let me just bring that to right about there and that should be good all right so let's get started we're gonna start off by just creating some core styles positioning things and then we'll get into adding the JavaScript in the dynamic class all right now I'm gonna open this up with live server which is just a vyas code extension that will give me auto reload and stuff like that I'm sure you guys have you have seen it before so let's go ahead and start off by adding box-sizing to everything we want to set box sizing to border box so that the padding doesn't so the padding stays within the box model doesn't make the width bigger and then for the body we're gonna add our font family which is gonna be whoops which is gonna be this Monserrat I think how you say it and then we'll do sans-serif okay and then the background of the body is gonna be a light gray it's going to be hexadecimal f6f-5 what is it v f7 okay so we get that light gray and if I save it's gonna auto refresh so we also want to make the body display flex however we want to make the direction up-and-down so we're going to do flex direction column instead of row okay that way we can add our justify content oops I want to do justify content center and let's do a line items Center so I saved that that pushes everything to the middle now I also want it to be in the middle vertically so I have to add a height of 100 viewport Heights or VH which is going to take up the whole browser so now it's centered that way but I want to bring it up a little bit so I'm gonna add some margin I'm gonna do negative 20 pixels on the top and then let's do 0 and then 50 pixels all right and that should do it for the body styling next thing we're gonna do is some of the core elements like the h1 so for the h1 I'm gonna add a font let's do a font weight of bold and let's do margin let's remove the margin okay next is the paragraph so we're talking about this and this the two paragraphs here we're going to do a font size of 14 pixels let's do font weight of let's do 100 and a line height oops line height of 20 pixels and letter spacing is going to be 0.5 pixels and then some margin will do 20 top let's do 0 and 30 pixels okay so now we have some spacing for our paragraphs next is a span which is this text in this text we want it to be just a little smaller so let's add in span here and let's do a font size of 12 pixels we'll shrink it a little bit all right now for links just general links I'm going to change the color to 333 which is dark gray almost black font size 14 pixels text decoration want to make sure there's no underline so we want to set that to none and then margin we're gonna do 15 pixels top and bottom and you can see the icon colors have changed all right so that's that's it for the the core styles this core elements I should say so now let's do the container and the container wraps around everything so I'm going to add a background of white okay so if I save that and you can see that now that containers white we're gonna add a border radius I want to have some rounded corners we'll do 10 pixels I'm gonna add a box shadow pretty deep box shadow which I'm gonna just paste in here and you can see I'm using RGB a red green blue alpha so black 0 0 0 and then the Alpha values so if I save that we get a pretty deep box shadow on this and if you want to lighten it up a little bit you can mess with the numbers next thing I'm gonna do is position this relative because we're gonna have some stuff positioned absolute within it we're gonna add an overflow of hidden and we're gonna set a width of 768 pixels and just set a max width of 100% and then a minimum height as well so that's gonna be 480 okay and again you can mess with some of these values if you want so next thing I'm gonna do is the actual forms and if you remember they're inside a class called form container I'm not going to do the form container just yet because it has I want to do the the main styling first before we do positioning so in the form the form itself let's do background white and let's let's display flex and remember this is for both forms as two forms but we want to do a flex direction of column because we want it to go up and down so if I save that immediately you can see that we get that flex column and then we're going to add padding so zero and then 50 on the left and right okay and let's do a height of 100% let's do justify content center as well as a line items center and also text-align:center alright so we'll save that so the next thing I'm gonna do is the and I'm gonna get to these input fields I know those are very ugly but let's do the social container here because I'm kind of going top to bottom so let's say social - container so the container itself I'm just going to add some margin to the top and bottom okay and then we want to target the links within social container and we're gonna set give that a border one pixel solid ddd and let's do we want them to be circular or rounded so we're gonna do a border radius of 50% alright and let's do display:inline flex and we can add justify content center line-items center and let's add margin say zero top and bottom five left and right just to push them away from each other and then the height the height and the width will be 40 pixels if I can spell height right so width will be 40 pixels okay so there we go those look pretty good next let's do these inputs so say form container input and I'm gonna set the background to be a little darker so we'll do Triple E and I'm gonna take away the border so border:none so save that still doesn't look very good so let's add some padding I'll do 12 pixels 15 pixels let's separate them out a little bit so we'll do 8 pixels top and bottom and then let's make them a hundred percent of their container and there we go so that looks pretty nice so next we're going to move on to the button our buttons so I'm going to give them some course tiles will do border-radius of let's do 20 pixels which will make them pretty rounded border let's do 1 pixel solid and we're gonna do FF 4 B 2 B which is that orangey color actually that's not right it's FF FF for the all I put a semicolon here there we go all right and we're gonna do background whoops I cannot spell today so background is actually going to be the same color so I'll go ahead and just copy that okay if I save that there we go let's make the color of the text white and let's make the font size 12 pixels and let's make the font-weight:bold and I'm gonna add some padding we're gonna do 12 top and bottom and 45 left and right to make them pretty wide like that okay we're gonna do letter spacing one pixel text transform so that we can make them uppercase make the text uppercase okay good now we're gonna add a transition here so I'm going to say transition on transform 80 milliseconds and let's say ease in so the reason I'm adding a transition is because I'm gonna add in effect a transform scale effect when I click it I want it to kind of expand or scale a little bit so I'm gonna grab the button active state and I'm gonna add a transform property and we're gonna use scale okay and let's do 0.95 scale so now if i click you can see we get that effect now this ugly outline we can get rid of that by targeting the focus class and let's set the outline to none okay so now we get rid of that ugly outline all right good so that's the button now these two down here these are gonna have a class of ghosts or they do have a class of ghosts because we want them to be like this transparent so let's go ahead and style button with the class of ghosts and set the background to transparent and then just change the border color to white okay and we're not gonna be able to see it just yet because it's on a white background so those are pretty much the core styles now the rest of this is basically all positioning so let's grab the form container which is wrap wrapped around both forms and let's position that absolute within the regular container so if I do that it's gonna look like this which is really a funny looking so let's do top zero and we want to set the height to 100% and I'm gonna add a transition on all properties 0.6 seconds and then ease in oh okay we're gonna have a lot of transitions because we're gonna add transform translate X which will it moves things along the x-axis and we want this to smoothly you know we want these things to smoothly slide over not just flick over so that's what all these with the transitions are for alright now I'm gonna grab each individual form so we have sign-in container and signed sign up container so let's take the sign sign-in container and let's let's set set it to left 0 it's already positioned absolute because it also has this that element also has this class but we want to say left 0 and let's make the width 50% so if I save that now you can see the signing container goes out 50% I'm also going to add a Z index of 2 so that it's always on top of the sign up now the sign up is underneath and it's going to have pretty close to the same styling so I'm going to just copy that and say sign up we want left 0 with 50% I'm gonna put the Z index less than the sign in and I'm also going to add an opacity of 0 all right so that's that now the next thing we want to do is start to work with the overlay okay the forms are styled so we're gonna work with the overlays which is this welcome back and this hello friend okay and remember there's a class of overlay container if we look right here and then a class of overlay and then within that we have the two panels so let's start from top top down so we'll start with overlay container okay so it's overlay container so we're gonna position this absolute within the container and we're gonna say from the top zero position and we're gonna move it from the left fifty percent so now if I save you can see we can we can now see the panel content because the container is pushed over fifty percent from the left and we want to set the width also to 50 percent the height should be a hundred percent set overflow:hidden and let's do transition on the transform property that we'll add so zero point six and then ease in out all right we're just going to set the z-index to 100 okay so now we're going to do the overlay class and this is the class that actually has like the background color and gradient so I'm going to do both background and also I'm going to do a regular color background and a linear gradient just for browsers that don't support gradient so let's say F F for one six C and then for the gradient I'm actually going to just paste that and so for we have another background property with Linea gradient that's going to be to the right this color to this color so it's kind of an orange to a pink and then no-repeat zero zero and cover save that and it's going to look like that all right so let's do the text color which is gonna be white and let's do position:relative because we're going to be positioning stuff with inside of it absolute we're gonna set left to negative 100% set the height to 200 I'm sorry the height to 100% and then the width is going to be set to 200 percent so that's gonna make it take up this whole space right here now if this is confusing Florin does a pretty good job explaining it right here so the overlay has a width of 200 percent which is double has a double width size of 200 percent so it's taking the full width of the main container so 200 percent times 50 percent which is this right here 50% equals 100% all right and again the 50% is from the overlay container which is that right there okay and he goes on to explain some of the other things pretty in depth so definitely check that out all right so the next thing we want to do is add a transform property and we're gonna use translate X so if you're not familiar with translate what am I doing here no that's right translate X just means we're positioning it along the x axis translate Y would be you know the this way the y axis so we're gonna set that to zero and let's add a transition on the transform I'll just copy it from here alright so now we're going to start to work with the overlay panels so basically these two and each one has a class of overlay left and right as well so let's do the general panels first so we want to position:absolute and now we're positioning these absolute within this overlay that's positioned relative and we're gonna say top zero we want to display flex I know that we can't see this yet really want to do flex direction column we can't see it because it's behind this but we'll fix that in a second we're going to have the overlay right pushed over here actually I guess I can do that before we finish this just so we can kind of see what we're doing so let's say overlay right and we want to say from the right side zero so I'll save that now we can at least see the right side and we're also going to add a transform translate X and it's due negative twenty percent I'm sorry not twenty percent that's left we want zero okay so at least we can see this side this hello friends so let's continue the the panel so we have flex Direction column let's do justify content center and let's do a line items Center okay and then we're gonna add some padding so zero forty pixels on the sides and let's do height of a hundred percent a width of 50 percent so that's going to kind of fix that and let's do a text align do we want to yeah text-align:center okay and then I'm gonna add transform translate X in the zero position which is just where it is now and then transition on transform I'll just grab this so there's a lot of transitions on the translate X I mean I'm sorry on the transform where there's translate X because that's gonna take care of that sliding alright so that looks good let's see now the overlay left see overlay left so I'm actually gonna add a transform translate X font for negative 20% here and we can't see the overlay left it's actually behind this but if we look at the finished product when this moves over see the welcome back see how it comes in from the left right now when it comes in from the left instead of just staying in that same spot that's why we're doing this negative 20% we're starting with it over here and then later on when we add the container class it through JavaScript we're gonna have it push over by setting it to zero if that makes sense all right so I think that we're pretty much ready to add the JavaScript so that we can start to style style this stuff with the active class what's going to happen is when we click the button it's gonna add a class of right panel active okay so let's jump into our main j/s and this isn't going to be very difficult at all we're just going to select a couple elements and we're going to add a listener and then add and remove a class so let's create a variable called sign up button set it to document dot get element by ID and we're gonna get the idea of sign okay we'll copy that down let's get the sign-in button so sign-in button and then the container okay remember we have that idea of container alright and then we just want to add a couple event listeners so let's do sign-up button add event listener and in here we're gonna do a click and run an arrow function and then take the container and we're going to add a class by using class list dot add and the name of the class we're going to add is called right panel active all right and then we can just copy this and we're going to take the sign-in button so sign in and we're going to do class list remove right panel active so we click signup it's gonna add this class sign-in will remove it alright so let's try that out we're gonna go over here and open up our dev tools and I'll just reload so you see this div here with the container I'm gonna go ahead and click signup and now right panel active has been added if i click well actually I can't show you like we can't see the other overlay which has the button to take it off but you can see that that class has been added alright so now we can start to finish up our Styles and animations here alright so let's go ahead and I'm just going to put in animation here just so we know that this these styles are particularly when the right panel active is is activated I guess I'm just going to put some comments to what each of these do because I know that this stuff can get a little confusing so that we're gonna create a style to move the sign in to the right okay so basically we want this sign in form to move over so we're going to take the container with the right panel active so when that's active we want to target the sign-in container okay so basically when this class is added so when we click this button we want to style the signing container and what we want to do is transform translate X because that will move it okay move it along the x-axis and we want to move it a hundred percent over to the right okay a positive number is going to move right a negative number will move left so let's save that let's click sign up and there it goes all right reload click again so that takes care of that functionality so next thing I want to do is move this overlay here to the left so let's say move overlay to or should say yeah move overlay to left so again we want to target the container right panel active and then the overlay container and we just want to add a transform translate X and we want to move it to the left so we're gonna do negative 100 not $100 I don't think that's gonna do anything negative a hundred percent so now if I click this the sign in goes over and the overlay goes over this way now notice we still have sign in that's not what we want we wanted to show the the other form the signup form so let's do that let's say bring sign up over sign-in I know these comments aren't that great but it is what it is so let's do container right panel active and then target the sign up container and we want to add a transform translate translate X and we're gonna move it 100 100 percent now remember the sign up container has an opacity of 0 so we want to change that to 1 and we want to change the Z index to go on top of the sign-in so we're going to act we're going to put that to 5 so we'll save and now when I click there we go so the create account or I should say the sign up container is now on top of the when it's on this side all right so now we want to work on getting this back also not showing hello friend we wanted to show welcome back like this all right so let's work on that so let's go down here and let's say move over lay back yeah move over lay back to the right so we'll grab our container right panel active and we want to target the overlay class and transform translate X and we want to do 50% okay so let's try that we'll save it let's reload so if I click that now we can see that this goes back and then that goes back that way okay so that's working now this text is it's not centered because of what I took what I told you earlier this negative 20% if I put this to zero then it's centered however I want it to have that effect where it comes in like it does here like that see how it slides in so what we need to do is just add another style down here so container right panel active and we want to target the overlay left and instead of doing negative 20% that's the starting point we want to bring it to zero okay when that when this class is activated we want that to go to zero so let's save that and there we go so now you can see that it kind of slides in from the left now we want the same effect for this text because right now that text just stays where it is so let's actually copy this and let's grab the overlay right and let's change this to 20% because we want it to move that way all right so now let's save and now you can see it goes that way when we click it comes back to the left when we go back all right so it's exactly what we want all right so that's gonna be it guys hopefully you enjoyed this again if you want to check out Florenz blog post here and also some of his other coding challenges there they're really cool so please leave this video a like if you liked it and I'll see you next time

Channel: Traversy Media

Views: 210,504

Keywords: css, css form, css animation, css transitions, login form

Id: mUdo6w87rh4

Length: 32min 14sec (1934 seconds)

Published: Wed Apr 17 2019