By the end of this tutorial, you’re going to design this cool registration form very quickly using CSS Flexbox with step-by-step instructions from scratch. As you can see, it’s also responsive and will look nice on any screen. Finally, I’ll be using a bit of javascript for the slider functionality.
Set Background Colour Full Screen
As you can see from the final output, the registration form is nicely centered horizontally and vertically on the viewport of the browser.
To do that, create a section element with an id called registration-page inside the body tag.
<body>
<section id="registration-page">
</section>
</body>
Now, make the section HTML element to fit the viewport of the browser. There are a few CSS techniques to achieve this. I’m going to use height:100% property in this tutorial.
Recommended
CSS Make A Div Full Screen
As you know, the section is a block-level element that will stretch the width to match its parent width, which is the body element in this case, and its width is 100% by default, so I do not have to be explicit about it inside the #registration-page CSS rule.
To stretch the height of the section HTML element to fit the screen, add height:100% to it as well as inside the html and body CSS rules.
Finally, add the background colour to match the final output.
html, body {
height:100%;
}
#registration-page {
height:100%;
background:#78a7ba;
}
As you can see from the above screenshot, the background color of the #registration-page did not fill the whole screen, because the body tag has some default margin which also triggers the scroll bar to appear.
Instead of getting rid of the default margin of the body tag, get rid of all default margins of the HTML elements.
To do this, create a wildcard CSS rule using asterisks (*) and set the margin to 0 like below. This doesn’t only get rid of the default margin of the body tag, but also the scroll bar.
* {
margin:0;
}
Make The Registration Form Center To The Screen
Now, let’s create a form HTML element with a class name .signup-form inside the #registration-page and add the text “Registration Form” inside so that I know where exactly the position of the form element is in the viewport of the browser.
<body>
<section id="registration-page">
<form class="signup-form">
Registration Form
</form>
</section>
</body>
Note: As you can see, I haven’t added any of the form attributes in the starting form tag because this tutorial is purely for the design of the registration form.
Adding just 3 properties of CSS Flexbox to a #registration-page will make its child center horizontally and vertically on the viewport, in this case, the child is the form element.
- display:flex will covert an HTML element to a flexbox.
- justify-content: center will make the child element center horizontally on the screen.
- align-items:center will make the child element center vertically on the screen.
#registration-page {
height:100%;
background:#78a7ba;
display:flex;
justify-content: center;
align-items: center;
overflow:scroll;
}
Registration Form Responsive Width
Now, I want the form to take the full width of the screen in the small screen as well as give the maximum width so that it will not exceed when the screen is bigger.
.signup-form {
flex:1;
background-color: #EFF0F1;
}
Setting flex:1 to the .signup-form will stretch the width of the signup-form to fit the screen and that’s what I want for the small screen.
But not for the bigger screen.
For that, set the max-width to 600px.
Also, add the border radius and border to match the final design.
.signup-form {
flex:1;
max-width:600px;
background-color: #EFF0F1;
border-radius: 10px;
border: 1px solid #999;
}
Recommended
Must-Know CSS Flexbox Responsive Multi-Column Layout Explained
Registration Form Header
First, replace the text “Registration Form” with a div with the class name .form-header inside the .signup-form and add an h1 tag with the text “Create Account” inside.
<form class="signup-form">
<div class="form-header">
<h1>Create Account</h1>
</div>
</form>
First, add padding to the top and bottom of the form-header as well as to the border at the bottom.
.form-header {
padding:15px 0;
border-bottom:1px solid #cccccc;
}
Then, change the font size, text align and color of the h1 element.
.form-header h1 {
font-size: 28px;
text-align:center;
color:#666;
}
Add Custom Font To The Form
The first step is to import the desired font at the top of the style.css file, in this case, Roboto.
@import url('https://fonts.googleapis.com/css?family=Roboto');
Note: Feel free to choose your favourite font from the Google Font Collection.
The second step is to set the font-family property inside the wildcard CSS rule (*) so that the font will be applied to all the text in the registration form.
* {
margin:0;
font-family: "Roboto", sans-serif;
}
Recommended
CSS Make Background Image Full Screen
Registration Form Body (Name)
As you can see from the final output, the form body has a two-column layout and is responsive as it becomes a one-column layout when on the small screen.
The good news is making a two-column layout is so easy with CSS flexbox.
After the form-header end tag, define div with a class name form-body which is where all of the input elements would go in.
Top comments (0)