Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design a transparent login/Sign Up webpage using HTML and CSS
In HTML, the login forms are used to collect information about the user and have a button to send the details for server-side operations. The login form contains basic information such as Name, Date of birth, Email, Mobile number, Gender, Address, etc. Nowadays, HTML forms are used in almost every website on the Internet to gather user information.
In this article, we are going to design a transparent login form on a webpage using HTML and CSS.
Designing a transparent login/Sign Up webpage
The following is the approach −
Create an <div> element with the class named "login-container".
Inside that, create another two <div> elements with the class named "textbox" for the username and password fields.
Then, add an <input> element with the class "btn" for the login button.
Then to make the login form transparent, we styled the ".textbox" input class with the CSS background property set to none.
Example
In the following example, we are using the above approach to design a transparent login form in a webpage using HTML and CSS −
<!DOCTYPE html>
<html>
<head>
<title>Transparent Login Form</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-12N37f5QGtxзVEgiss14W3ExzMWZxybE1SJSESQP9S+oqd12jhcu+A56EbclzFSJ" crossorigin="anonymous">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: lightslategray;
background-size: cover;
}
.login-container{
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.login-box h1{
border-bottom: 6px solid whitesmoke;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid whitesmoke;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 80%;
float: left;
margin: 0 10px;
}
.btn{
width: 100%;
background: none;
border: 2px solid whitesmoke;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 12px 0;
}
h1{
text-align: center;
font-size:x-large;
padding-bottom: 50px;
color: purple;
}
</style>
</head>
<body>
<div class="login-container">
<h1>Tutorialspoint - 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="Login">
</div>
</body>
</html>
889 Views
