Transparent Login Form Tutorial

Key Takeaways

hello everybody my name is Kyle and this is web dev simplified where we make the web easy and accessible for everyone so that you can realize your dream of becoming a better web developer in this video we're going to take care of creating this simple login screen that you see here so let's get started now to get started I have a visual studio project that links the font that we're going to be using from google fonts as well as the style sheet that we're going to be putting all of our styles inside of to get started we need to create all the HTML for this login form that you see on the right here this is going to be a bit more HTML than usual for this series so stick with me the first thing we want to do is create a div that our full screen image is going to sit inside of we can just give this a class of fullscreen container and then inside of here we're going to want to put the actual container for our login form so again let's create another do we're gonna give it the class of login container and then inside of here we're going to have our header which says welcome as well as our form so let's first put our header which will be an h3 we can give it a class a login title and then it set it here we'll just put our welcome text and then outside of this we're going to create our form and inside of our form here we're going to want to put our email field with a label our password field with a label and our sign-in button so to do that we'll first wrap all of these inside of groups so we'll have an input group for each one of our inputs and inside of that input group we're going to put the label which is going to be email for the first one and then we're gonna put our input of type email says this is an email input and there we go now we have our email and put done we can just copy this and paste it to do our password input we just need to change it to say password and we need to change the title as well to be password and then lastly we just need to add a submit button to the end here so we're just going here white a button gonna give it the type of submit so that our page knows this is mid button I'm gonna give it a class a vloggin button so we can style it later and inside that button will just put the text sign in and now we can just open that up using live server and you see that we now have our welcome message as well as our two inputs for our form and a sign-in button that allows us to sign in from our form so now what we need to do is start applying the styles that will make this login form look exactly like this login form to get started inside of our style sheet I've already changed our box sizing DePorter box as well as applied the font to all the elements on our page that we imported from our head of our HTML earlier so to get started the first thing I want to do is apply the styles that we need for our background image as many of you know the body element has margins on it by default so we want to remove these margins from the body element so that our image will take up the full screen of our page so we'll do that before we get started with anything else the next thing we'll do is we'll select that full screen container class that we created earlier and instead of here we're going to apply the background image for our image that we're going to be using as the background which is linked right here inside of our project so I'm set up here we're gonna put background image and we're going to set it to be the URL of that background image JPEG and now if you save that you see that we now have our background image being shown on our page which is exactly what we want the next thing we want to do is we want to make us so that image will take up the full height and width of the screen in order to do that we can set the height to be 100 view height which is 100% of the screen size and we can do the same thing with the width 100 of you widths and now if we say that you'll see our image takes up the full size of our screen which is perfect but we want our image to be scaled down so that it'll fit inside of our browser just as it does over here to do that we're going to use the background size property and set it to cover so our image will fill the entire space of our screen and keep its aspect ratio and we're also going to set the background position property to be Center so that way our image will be centered always no matter what size our browser is and if you say that now see that our image is perfectly centered and scaled inside of our browser just as on our other page the next thing we want to do is we want to set a few display properties for our container so that way our login form here will be in the center of our page to do that we'll just use flexbox so we'll set a display of Flex will justify the content center and the line items in the center so that our login form will appear in the very center of our page and now we've already got a great start on making our login page look exactly like this now let's move on to styling the container for our login form we'll do this by selecting our login container class and the first thing we want to do is apply the background color that we have right here so in order to do that we're just gonna use background color and I've decided to use HSL for my background color because all the colors on the page that I have are just a different shade of the same blue so it's either a darker or lighter version of the same blue and HSL makes it very easy to change that with just one of the numbers so I'll paste in here the color that I've chosen and you can see 201 is the hue of blue that we're going to be using on the entire page and this lightness value over here we are going to be changing for all the different elements to get either a brighter or a darker blue color so now if we save that and look at our form you see that we now have a blue background around the outside just like we want with 60% opacity and now we just need to add a little bit of padding to our form so that it'll take up a little bit of extra space and look a little cleaner so we'll use 50 pixels on the top and bottom and 30 pixels on the weapon right and if you say that you see we now have a nice large login form for our users to use the last thing we want to do is make the size of our login form scale with the size of our browser this will make us so that the width is going to be 50% and we'll also add in a minimum width here so that we know that our login form will never be smaller than 400 pixels and we'll also add in a maximum width so we know it'll never be larger than 600 pixels now if you saved that and if we scale the size of our browser you can see that our login form will scale as our browser increases until it gets to a certain point it will stop scaling and same thing with when we shrink it wants to get to a certain point it'll stop shrinking and that's exactly what we want the next thing that we want to do is tackle the title of welcome instead of our loggin farm let's go down here select that with login title and the first thing that we want to do is change the color to be white now we want to text align in the center so that our welcome will appear in the center of our screen if we say that you see that's already starting to look better we're going to remove all the margins from this because we used an h3 element inside of our index here an h3 elements by default have a margin and we don't want any margin on our welcome element on the top so to remove all of our margins with the margin to zero and then since we do want a margin on the bottom we'll add a margin bottom here 40 pixels just so we have a little bit of space between our input elements and our title of top last thing we need to do is increase the font size and decrease the font weight so we'll increase the font size to 2.5 e/m and then we'll decrease the font weight a bit so that it's a little bit lighter and we'll just change it to normal font label and if you say that you now see that our login form is starting to look a lot like our login form over here the next thing we need to do is tackle the actual grouping of our inputs which we surrounded both of our inputs with this input group class so we'll select that input group and what we want to do is we want to use display flex in order to create a column based layout for our email as well as our email input so we'll use display flex here and we'll use the Flex direction of column so that these will stack on top of each other instead of being side by side as you can see interest like this and the next thing we want to do is add a little bit of a margin so there's space between them so we'll just use a margin bottom and we'll put 20 pixels and there we go next we're going to be moving on to the actual labels for our different input elements so to select those we're going to just select the input group class that we created and we want to select any label inside that in book root class and we're going to change the color to be white we want to make the font weight a really light font which we'll use lighter as our font weight and then lastly we'll increase the font size a little bit to 1.5 e m and add a small margin onto the bottom so that it separates it from our input a little bit we'll just say 7 pixels and if you say that you now see that we have these nice thin clean looking labels that are slightly separated from our input element and next thing to style is going to be our input element which is a bit more involved than it first looks so to select that we'll use the input group and we'll select our input element inside of that input group and the first thing we want to do is remove all the default styles that are applied to this input so we're going to take the background and we're going to completely remove it so we'll use background:none that'll get rid of the background on the element next thing we want to do is remove the border with order none and then if you click inside of an input it gets an outline around it so we want to also remove that outline by using outline of none and now it got rid of all the default styles of the element and we can now override these with our own styles ourselves so the first thing we want to do is use a background color for our different elements so we can come into here we can change our background to the background color and then we can use this HSL color which is just a much lighter version of that hue of 201 that we used earlier with an app a speed of 30 percent and now if you say that we have this nice partially opaque slightly blue but mostly white background color which complements the other blue colors in our design the next thing that we want to do is increase the font size and add some padding to our input element to make a look a little bit cleaner so we'll add font size here to be 1.5 a.m. and we're also going to add a padding of 0.1 a.m. on the top and bottom and 0.25 a.m. on the left and right and if you say that you know so that we have a much larger and cleaner looking input element to work with next we want to select our border and apply our own unique border to this element we're going to again take a shade of blue so we'll do a 1 pixel solid with HSL we have that same Q of 201 but now it's a 6% Vitus which means it's going to be a very dark almost black fluke so if you say that we now have this nice really dark blue color around our very light colored blue input element all we need to do next is change our border radius so we have a slight Bend onto the corners of our boxes so we'll just add five pixels here we want to make the color of our text be white so that it shows easily on our dark background and then lastly we want to make our font weight to be lighter so that it looks very somewhere to our labels and if you save that and we type in here you now see that we have a very clean looking input element that matches our input element from this page except for all we need to do is make it so that highlights in blue when we focus on it so to do that we just need to select our element by going down here input group select the input element and use the focus attribute to say only supply these Styles when we're focusing on the element and we want to just change the border so we'll make it one pixel we're gonna use a solid color and we're gonna use that same exact blue hue but instead of having a lightness of six percent we're gonna use 50% which means we want it to be as blue as possible with no extra white or black attitude and now if you say that and we focus on these inputs you see we now get that nice blue highlight around it just like in our example over here so now the last thing that we have left to style is going to be a sign-in button down to the bottom here so we're going to select our login button and again just like we did with the inputs we want to remove all the default styles so first we're going to set the background to be none guess at the border to be none and we're gonna set the outline to be none and now as you can see we removed all the default styles from our button and we're ready to start applying our own styles so the first thing is we can take our background color and we can change it here so we can set background color and we can apply that same hue but with a different opacity and if you say that you now see whether we get a little bit of a slight opaque background on our button which is perfect so that way we can you distinguish it as a clickable element we also want to add a lot of padding to our button so it would be quite a bit bigger so we'll add a padding here of 10 picks on the top and bottom and 30 pixels on a lepton right you say that we now have a larger button and we also want to just increase the width to be 100% of a size of our screen so it would be the same width is all of our input elements we're also going to apply the same border radius as we applied to our input element so that we have a similar match to our other elements so we used five pixels there and that way everything is consistent throughout our design and then since we have a border radius we can now apply our border that we want to use and we're going to use the same border as we use for our focus input element here so we can just paste that down here we want to use one pixel solid and now if you save that you now see we have this masked border around our sign-in button and only need to do is change our font a little bit so that our font is white and larger so don't do that but she is a font size here we're going to just do 1.5 e/m so this is same size as our labels we're also going to change the color to be white and we want our font weight as well to be lighter here to match the rest of our design if you say that you now see that we have this really clean looking input button here that we can click on to sign in to our form we also want to separate it slightly from our other input elements to distinguish it from our form so we'll use margin top here of 20 pixels to space it a little bit from the rest of our input elements we're also going to make it so that our cursor changes to the pointer cursor so we know that this is a clickable element when we highlight over it so now if you highlight over you see you get the pointer icon instead of just the normal default icon and the last thing we want to do is apply styles to it when we hover over it because as you can see over here we have a hover style as well as a focus style which is even darker blue color so to do that let's go down here we're going to select our login button again for this time we're going to use the hover attribute to say on hover what do we want to do and what we want to do is you want to change the background color we're gonna use that same exact 201 hue that we've been using for the rest of our project and we're going to use even the same 50% color we're just gonna make it 30% of Haake instead of 10% opaque and now if you save that we hover over our button you see that now it gets a little bit less opaque so it looks more blue the last thing we needed to do is just copy that do the same exact thing but for focus instead of hover so what changed us to focus and instead of point three here we'll just point five opacity so that's even more blue colored and less opaque so now as we can see if we focus on it it's now an even darker blue color instead of the really opaque white blue color from just a hover and that's all you need to do to create this nice-looking transparent login page it's really fairly simple to create this login page and it's a very common and very clean-looking design that you'll see throughout bunch of web pages across the internet so hopefully you guys learned something in this video on how to create these transparent login pages and if you guys did enjoy it make sure to please leave a like down below and give me a comment on what kind of videos you want me to create in the future for these CSS challenges thank you guys very much have a good day