How To Make Transparent Login Form Using HTML, CSS only

Blogger Leb
October 24, 2020
0



The transparent login form is one of the most important parts of web development. Which is very important for every web development and a computer engineer to know.

If you want to create a transparent login form using only HTML and CSS programming languages. But I will help you fully in this article.

Hello friends I am Santanu Jana a web designer. I am going to explain to you step by step very easily based on my experience of the last five years and teach you how to create a professional and transfer login form using only html5, css3 language.

Create Transparent Login Form Using HTML, CSS 

The login form is basically one of the parts of the website that helps to increase the quality of the website. The most popular of the login forms is the transfer login form. In the case of this login form, the background can be seen completely. That is, the background can be seen as a picture or something else. I used a very simple and easy programming code to create the login form. So that you can easily know and learn. I have given below the necessary code for this which you can use in your project or website. This login form code will work even if you don't have any programming knowledge to add it to your project. Because I have given you complete instructions on how to add the required code of this login form to your project.

how to create a professional and transfer login form using only html5, css3



Some special information about this login form

💚This is a completely transparent login form built using common HTML and CSS programming languages.

💗 A very simple programming code has been used for you to know and learn very easily. Some special CSS code has been used to make the login form transparent, which I have shown below.


background: transparent;

💜 In this login form, you will first find the place to input the user ID and password. Then when you click on the login button below, the login will be done.

💛 It is very easy and simple to use. By clicking on the download button above, you can easily download the required code of this login form for free. You can also see the live demo of this login form by clicking on the demo button.

How To Create Transparent Login Form

Hopefully from the video above you can fully understand how to make and work this transparent login form. If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code in the CSS file. Be sure to link the HTML and cis code to each other (<link rel="stylesheet" href="sidebar.css">).

I would especially request you to download the codes by clicking the download button above without copying the codes below. But you will get many more benefits.




HTML TAGS (<body> Add Code </body>)

This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.


 <div class="box">
  <h2>Login</h2>
  <form>
    <div class="inputBox">
      <input type="email" name="email" required onkeyup="this.setAttribute('value', this.value);" value="">
      <label>Username</label>
       <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
    </div>
    <div class="inputBox">
      <input type="password" name="password" required value=""
             onkeyup="this.setAttribute('value', this.value);"
             pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
             title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
      <label>Password</label>
       <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
    </div>
    <input type="submit" name="sign-in" value="Sign In">
  </form>
</div>



CSS CODE (<head><style> Add code</style></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

 body {
  margin: 0;
  padding: 0;
  background: url(https://picsum.photos/2500/1500?image=1041);
  background-size: cover;
  font-family: sans-serif;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25rem;
  padding: 2.5rem;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.625rem;
}

.box h2 {
  margin: 0 0 1.875rem;
  padding: 0;
  color: #fff;
  text-align: center;
}

.box .inputBox {
  position: relative;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.box .inputBox input {
  width: 100%;
  padding: 0.625rem 0;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0.062rem;
  margin-bottom: 1.875rem;
  border: none;
  border-bottom: 0.065rem solid #fff;
  outline: none;
  background: transparent;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.box .inputBox label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.625rem 0;
  font-size: 1rem;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label,
.box .inputBox input:not([value=""]) ~ label {
  top: -1.125rem;
  left: 0;
  color: #03a9f4;
  font-size: 0.75rem;
}

.box input[type="submit"] {
  border: none;
  outline: none;
  color: #fff;
  background-color: #03a9f4;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  border-radius: 0.312rem;
  font-size: 1rem;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.box input[type="submit"]:hover {
  background-color: #1cb1f5;
}


Hopefully from this article, you have learned very easily and learned how to create a professional and transparent login form using only HTML and CSS programming languages. Be sure to comment on how much help you have received from the article. Also, let me know if you encounter any problems. I will help you as much as possible to create and learn this transparent login form.


❤Sharing is caring❤





Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
To Top