Up next in 10
Transparent Login Form Tutorial
517 views
Feb 7, 2024
The "Transparent Login Form Tutorial" is an instructional video that guides viewers through the process of creating a stylish and modern transparent login form for websites or applications. Throughout the tutorial, viewers learn how to design and implement a login form that overlays on top of a background image or video, providing a visually appealing user experience. The video covers essential concepts such as HTML structure, CSS styling, and possibly JavaScript for interactivity. Through clear demonstrations and explanations, viewers are shown how to use CSS properties like opacity, background transparency, and box-shadow to achieve the desired transparent effect. Whether you're a beginner exploring front-end development techniques or an experienced designer seeking to enhance user interface aesthetics, this tutorial offers valuable insights into creating sleek and immersive login forms with transparency.
View Video Transcript
0:00
Hello everybody. My name is Kyle and this is WebDev Simplified, where we make the web easy and accessible for everyone so that you can realize your dream of becoming a better web developer
0:09
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
0:19
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
0:30
To get started, we need to create all the HTML for this login form that you see on the right here
0:34
This is going to be a bit more HTML than usual for this series, so stick with me
0:38
The first thing we want to do is create a div that our full screen image is going to sit inside of
0:44
We can just give this a class of full screen container, and then inside of here we're going to want to put the actual container for our login form
0:53
So again, let's create another div. We're going to give it the class of login container, and then inside of here we're going to
0:59
going to have our header which says welcome as well as our form. So let's first put our header
1:05
which will be an H3. We can give it a class of login title. And then inside of here, we'll just
1:12
put our welcome text. And then outside of this, we're going to create our form. And inside of our
1:18
form here, we're going to want to put our email field with a label, our password field with a label
1:22
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
1:29
for each one of our inputs. And inside of that input group, we're going to put the label
1:35
which is going to be email for the first one. And then we're going to put our input of type email
1:41
since this is an email input. And there we go. Now we have our email input done
1:46
We can just copy this and paste it to do our password input. We just need to change it to say password
1:52
and we need to change the type as well to be password
1:56
And then lastly, we just need to add a submit button to the end here. here, so we'll just go in here, we'll add a button
2:03
going to give it the type of submit so that our page knows it says
2:07
submit button. We're going to give it a class of login button so we can style it later
2:13
And then inside that button, we'll just put the text, sign in
2:18
And now we can just open that up using live server. And you see that we now have our welcome message
2:25
as well as our two inputs for our form and a sign in button
2:29
that allows to sign in from our form. So now what we need to do is start applying the styles
2:34
that will make this login form look exactly like this login form. To get started inside of our style sheet
2:41
I've already changed our box sizing to border box, as well as applied the font to all the elements
2:45
on our page that we imported from our head of our HTML earlier
2:51
So to get started, the first thing I want to do is apply the styles that we need for our background image
2:56
As many of you know, the body element has margins on it by default
3:00
So we want to remove these margins from the body element so that our image will take up the full screen of our page
3:06
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
3:13
class that we created earlier. And inside of here, we're going to apply the background image
3:18
for our image that we're going to be using as the background, which is linked right here inside of our project
3:23
So inside of here, we're going to put background image and we're going to set it to be
3:29
URL of that background image JPEG. And now if you save that, you'll see that we now have our background image being shown on
3:37
our page, which is exactly what we want. Next thing we want to do is we want to make us so that image will take up the full height
3:44
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
3:50
screen size. And we could do the same thing with the width, 100 view widths
3:55
And now if we save 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 will fit inside of our browser just as it does over here To do that we going to use the background size property and set it to cover
4:12
so our image will fill the entire space of our screen and keep its aspect ratio
4:17
and we're also going to set the background position property to be center
4:21
so that way our image will be centered always no matter what size our browser is
4:25
And if you save that, you now see that our image is perfectly centered and scaled inside of our browser
4:31
just as on our other page. The next thing we want to do is we want to set a few display
4:36
properties for our container so that way our login form here will be in the center of our
4:40
page. To do that, we'll just use Flexbox, so we'll set a display of Flex, we'll justify the content
4:47
center, and align the items in the center so that our login form will appear in the very
4:52
center of our page, and now we've already got a great start on making our login page look
4:56
exactly like this. Now let's move on to styling the container for our login form
5:00
We'll do this by selecting our login container class and the first thing we want to do
5:05
is apply the background color that we have right here. So in order to do that we're just
5:11
going to use background color and I've decided to use HSL for my background coloring
5:18
because all the colors on the page that I have are just a different shade of the same blue
5:23
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
5:30
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
5:38
and this lightness value over here, we are going to be changing for all the different elements
5:42
to get either a brighter or a darker blue color. So now if we save that and look at our form
5:48
you see that we now have a blue background around the outside, just like we want with 60% opacity
5:53
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
6:00
So we'll use 50 pixels on the top and bottom and 30 pixels on the left and right
6:05
And if you say that, you see we now have a nice large login form for our users to use
6:10
The last thing we want to do is make the size of our login form scale with the size of our browser
6:14
So we'll make it 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 small
6:23
more than 400 pixels and we'll also add in a maximum width so we know it'll never be larger than 600 pixels
6:29
Now if you save that and if we scale the size of our browser you can see that our login form will scale as our browser increases
6:37
until it gets to a certain point it'll stop scaling and same thing with when we shrink it once it gets to a certain point it'll stop shrinking
6:44
and that's exactly what we want. The next thing that we want to do is tackle the title of welcome instead of our login form
6:50
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
6:58
And we want a text align in the center so that our welcome will appear in the center of our screen
7:04
If we save 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
7:14
And H3 elements by default have a margin, and we don't want any margin on our welcome element on the top
7:19
So to remove all of our margins, we put margin zero. and then since we do want a margin on the bottom, we'll add a margin bottom here of 40 pixels
7:28
just so we have a little bit of space between our input elements and our title of the top
7:32
The last thing we need to do is increase the font size and decrease the font weight
7:37
so we'll increase the font size to 2.5 em, and then we'll decrease the font weight a bit
7:42
so that it's a little bit lighter and we'll just change it to normal font weight, and if you say that, you now see that our login form is starting to look a lot like our login form over here
7:52
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
8:00
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 layout for our email as well as our email input So we use display flex here and we use the flux direction of column so that these will stack on top of each other instead of being side by side
8:19
As you can see, just like this. And the next thing we want to do is add a little bit of a margin
8:23
so there's space between them. So we'll just use a margin bottom and we'll put 20 pixels
8:30
And there we go. Next we're going to be moving on to the actual labels for our different input elements
8:35
So to select those, we're going to select the input group class that we created
8:40
And then we want to select any label inside that input group class
8:44
And we're going to change the color to be white. We want to make the font weight a really light font weight, so we'll use lighter as our font weight
8:52
And then lastly, we'll increase the font size a little bit to 1.5 em
8:58
and add a small margin onto the bottom so that it separates it from our input a little bit
9:03
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
9:12
And next thing to the style is going to be our input element, which is a bit more involved than it first looks
9:18
So to select that, we'll use input group, and we'll select our input element inside of that input group
9:24
And the first thing we want to do is remove all the default styles that are applied to this input
9:29
So we're going to take the background, and we're going to completely remove it
9:34
So we'll use background none. That'll get rid of the background on the element
9:38
Next thing we want to do is remove the border with border none
9:42
And then if you click inside of an input, it gets an outline around it
9:46
So we want to also remove that outline by using outline of none
9:50
And now it got rid of all the default styles of the element, and we can now override these with our own styles ourselves
9:56
So the first thing we want to do is use a background color for our different elements
10:02
So we can come into here. We can come into here, we can change our background to be background color
10:07
and then we can use this HSL color, which is just a much lighter version of that hue of 201 that we used earlier
10:15
with an opacity of 30%. And now if you save that, we have this nice, partially opaque
10:20
slightly blue but mostly white background color, which complements the other blue colors in our design
10:25
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
10:31
So we'll add font size, to be 1.5 em and we're also going to add a padding of 0.1 em on the top and bottom
10:41
and 0.25 em on the left and right and if you save that you now so that we have a much
10:46
larger and cleaner looking input element to work with. Next we want to select our
10:51
border and apply our own unique border to this element. We're going to again
10:55
take a shade of blue so we'll do a one pixel solid with HSL we have that same
11:01
hue of 201 but now it's a 6% lightness which means it's going to be a very dark, almost black blue color
11:07
So if you say that, we now have this nice really dark blue color around our very light colored blue input element
11:14
All we need to do next is change our border radius, so we have a slight bend onto the corners of our boxes
11:20
So we'll just add five pixels here. We want to make the color of our text be white
11:25
so that it shows easily on our dark background. And then lastly, we want to make our font weight to be lighter
11:31
so that it looks very similar 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 us so that a highlights in blue when we focus on it
11:45
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 apply these styles when we're focusing on the element
11:56
And we want to just change the border, so we'll make it one pixel. We're going to use a solid color, and we're going to use that same exact
12:03
blue hue but instead of having a lightness of 6% we're gonna use 50% which means
12:09
we want it to be as blue as possible with no extra white or black added to it
12:13
now if you save that and we focus on either 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 the sign button down to the bottom here
12:27
So we're going to select our login button, and again, just like we did with the inputs
12:32
we want to remove all the default styles. So first, we're going to set the background to be none
12:39
we're going to set the border to be none, and we're going to set the outline to be none
12:45
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
12:51
So the first thing is we can take our background color, and we can change it here, so we can say a background color
12:58
and we can apply that same hue, but with a different opacity, and if you save that, you now see that we get a little bit of a slight opaque background on our button, which is perfect
13:10
so that way we can distinguish it as a clickable element. We also want to add a lot of padding
13:15
to our button so it'll be quite a bit bigger. So we'll add a padding here of 10 pixels on the top and bottom
13:21
and 30 pixels on the left and right. If you say that, we now have a larger button
13:25
And we also want to just increase the width to be 100% of a size of our screen
13:29
so it'll be the same width as all of our input elements. We're also going to apply the same border radius
13:35
as we apply to our input elements so that we have a similar match to our other elements
13:40
So we'll use 5 pixels here, and that way everything is consistent throughout our design
13:44
design. And then since we have a border radius, we can now apply our border that we want to use
13:49
And we're going to use the same border as we use for our focus input element here
13:53
So we can just paste that down here. We want to use one pixel solid
13:58
And now if you save that, you now see that we have this nice border around our sign in button
14:02
And all we need to do is change our font a little bit so that our font is white and larger
14:07
So to do that. Let's use a font size here. We're going to just do 1.5 em, so this is the same size as our labels
14:14
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
14:22
If you say that, you can see that we have this really clean looking input button here that we can click on to sign into our form
14:28
We also want to separate it slightly from our other input elements to distinguish it from our form
14:34
so we'll use margin top here of 20 pixels to space it a little bit from the rest of our input elements
14:40
We're also going to make it so that our cursor changes to our
14:44
the pointer cursor so we know that this is a clickable element when we highlight over it
14:49
So now if you highlight over it you see you get the pointer icon instead of just the normal default
14:53
icon. And the last thing we want to do is apply styles to it when we hover over it because as
14:58
you can see over here we have a hover style as well as a focus style which is even darker blue color
15:03
So to do that let's go down here we're going to select our login button again but this time
15:09
we're going to use the hover attribute to say on hover what do we want to do and what we want to do
15:14
is we want to change the background color. We're going to use that same exact 201 hue that we've
15:19
been using for the rest of our project. And we're going to use even the same 50% color. We're
15:23
just going to make it 30% opaque instead of 10% opaque. And now if you save that, we hover over
15:29
our button, you see that it now gets a little bit less opaque so it looks more blue. The last
15:34
thing we need to do is just copy that, do the same exact thing. But for focus, instead of hover
15:40
So we'll change this to focus. And instead of 0.3 here, we'll use 0.5 opacity so that it's even more blue colored and less opaque
15:48
So now, as we can see, if we focus on it, it's now an even darker blue color
15:53
instead of the really opaque light blue color from just a hover. And that's all you need to do to create this nice looking transparent login page
16:01
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 a bunch of web pages
16:10
web pages across the internet. So hopefully you guys learned something in this video on how to create these transparent login pages
16:16
And if you guys did enjoy it, make sure to please leave a like down below and give me a comment
16:21
on what kind of videos you want me to create in the future for these CSS challenges
16:24
Thank you guys very much. Have a good day