Transparent Login Form Using HTML & Pure CSS
In this blog, This code creates a transparent login form that is visually appealing and easy to use. The form is design to be minimalistic and clean, making it easy to read and understand. The use of the FontAwesome library allows for the use of easy to recognize icons for the username and password fields. The form is center on the page and is design to be responsive with the use of the viewport meta tag.
The CSS stylesheet sets the background image and uses the background-size and background-position properties to ensure that the image is properly scaled and centered on the page. The loginBox class sets the position, width and top, left properties to center the form on the page and the transform property is used to ensure that the form remains centered on the page as the viewport is resized. The textbox class is used to style the input fields and the btn class is used to style the submit button.
Video Tutorial of Transparent Login Form
To see a live demonstration of the Transparent Login Form, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Transparent Login Form
HTML:
Create a new file with the name “index.html
” and add the provide code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Transparent Login Form</title> </head> <body> <div class="loginBox"> <h1>Login</h1> <div class="textBox"> <i class="fas fa-user"></i> <input type="text" placeholder="Username"> </div> <div class="textBox"> <i class="fas fa-lock"></i> <input type="password" placeholder="Password"> </div> <input type="button" class="btn" value="Sign in"> </div> </body> </html>
HTML code for a simple login form with a transparent background, including two text boxes for username and password, a “Sign in” button, and an icon font library (fas fa-user and fas fa-lock). The form links to a “style.css” file for styling.
CSS:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css"; body{ margin: 0; padding: 0; min-height: 100vh; font-family: sans-serif; background: url(bg.jpg) no-repeat; background-size: cover; background-position: center; } .loginBox{ position: absolute; width: 280px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } .loginBox h1{ float: left; font-size: 40px; border-bottom: 6px solid #4caf50; margin-bottom: 50px; padding: 13px 0; } .loginBox .textBox{ width: 100%; overflow: hidden; font-size: 20px; padding: 8px 0; margin: 8px 0; border-bottom: 1px solid #4caf50; } .loginBox .textBox i{ width: 26px; float: left; text-align: center; } .loginBox .textBox input{ border: none; outline: none; background: none; color: white; font-size: 18px; float: left; margin: 0 10px; } .loginBox .btn{ width: 100%; background: none; border: 2px solid #4caf50; color: white; padding: 5px; font-size: 18px; cursor: pointer; margin: 12px 0; }
This is CSS code that is use to style the elements of the login form HTML code provided earlier.
The code imports the fontawesome library to use the icons in the username and password fields.
The body of the page has a background image which is use to cover the entire page and is center.
The login box is position at the center of the page and has a specific width. The text inside the login box is white. The “h1” element has a font size of 40px, with a bottom border and a margin at the bottom. The “textBox” class is use to style the input fields, it sets width, font-size, padding and margins. The class also has an icon class ‘i’ which is float to the left with a width of 26px and text-align set to center. The input fields have a white text color, a font-size of 18px, and are float to the left. The button has a width of 100%, a background color of none, a border of 2px solid #4caf50, a color of white, padding, font-size of 18px, a cursor of pointer and a margin of 12px 0.
Summary:
This code creates a visually appealing, easy-to-read, and responsive transparent login form. The minimalistic and clean design makes it easy to understand. The use of FontAwesome, background-size, background-position, and transform properties in the CSS stylesheet ensure the form stays centered and responsive as the viewport is resized. The code is well-organized and easy to understand, making it a great example of creating a transparent login form.