HTML Transparent Login Form ( With Source Code )

Blogger Leb
October 24, 2020
0

HTML Transparent Login Form ( With Source Code )

Do you want to create a transparent login form?

If your answer is yes, I will help you. You can easily create an awesome login form using a simple programming code.

 I am Santanu Jana a web designer. I'm going to show you completely how to create a great stylish login form using only HTML and CSS programming languages. There are a few things to keep in mind before creating a login form. The first login form should be completely professional and responsive, which means that this login form should be adjusted nicely for all types of devices. So that all your viewers or users can use the login form nicely. 

How To Create Transparent Login Form Using HTML and CSS

I have shown you here an awesome and Responsive Transfer login form which will help you a lot to create a beautiful login form. I have written the code used here very simply so that you can easily learn and know how this login form was created. This login form is not just a login form but there is an opportunity to increase the account here. In other words, if a user does not have an account before, he can create an account here and then login.

  Below is the code required to create this login form for your convenience. Using that code you can add it to your project or website.

How To Create Transparent Login Form Using HTML and CSS




Some special information about this login

💗 This login form is completely transparent and responsive using only simple HTML, CSS, and a small amount of JavaScript programming language.

💖 This is a multi-login form which means your user can log in to the account nicely and create a new account if you do not have an account. This is a professional login form as there are such opportunities. This login form is currently used on most websites.

💜 Here you will find the option to input user ID and password. Then below you will find the login button, you can log in to the account by clicking there.

💙 There is a click button below to keep you logged in to this account forever. If you click on that button, you will not have to log in next time. You can automatically access your account.

💚 If a user does not have an account, he can go to the Create Account option and create a new account.

💛 In this case, the user can create a new account by inputting his new user ID, password, etc.

Make It Transparent Using This code 

This login form has been made a bit transparent i.e. it has a background image that can be seen lightly. If you want, you can increase the quality of this transfer. This means that if you want the back image to look better, you can do so very easily. For that, you need to change a CSS code slightly. I have shown below what code it is.

💢 To watch the live demo of this transparent login form. You can click the demo button above. You can also click on the download button above to download the required code.

transform:rotateY(180deg);
    backface-visibility:hidden;
    transition:all .4s linear;


Create This login Form Using HTML and CSS

To add the login form to your website, you have to paste the html5 code below in the body tag on your website. Then paste the following CSS codes into the style file in the head tag of your project or website. This way you can create this professional and transparent login form by adding the following codes to your project.

I would especially request you to download the required code by clicking on the download button above, you will get 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="login-wrap">
    <div class="login-html">
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>
        <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
        <div class="login-form">
            <div class="sign-in-htm">
                 <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
                <div class="group">
                    <label for="user" class="label">Username</label>
                    <input id="user" type="text" class="input">
                </div>
                <div class="group">
                    <label for="pass" class="label">Password</label>
                    <input id="pass" type="password" class="input" data-type="password">
                </div>
                 <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
                <div class="group">
                    <input id="check" type="checkbox" class="check" checked>
                    <label for="check"><span class="icon"></span> Keep me Signed in</label>
                </div>
                <div class="group">
                    <input type="submit" class="button" value="Sign In">
                </div>
                 <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
                <div class="hr"></div>
                <div class="foot-lnk">
                    <a href="#forgot">Forgot Password?</a>
                </div>
            </div>
            <div class="sign-up-htm">
                <div class="group">
                    <label for="user" class="label">Username</label>
                    <input id="user" type="text" class="input">
                </div>
                 <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
                <div class="group">
                    <label for="pass" class="label">Password</label>
                    <input id="pass" type="password" class="input" data-type="password">
                </div>
                <div class="group">
                     <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
                    <label for="pass" class="label">Repeat Password</label>
                    <input id="pass" type="password" class="input" data-type="password">
                </div>
                <div class="group">
                    <label for="pass" class="label">Email Address</label>
                    <input id="pass" type="text" class="input">
                </div>
                 <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
                <div class="group">
                    <input type="submit" class="button" value="Sign Up">
                </div>
                <div class="hr"></div>
                <div class="foot-lnk">
                    <label for="tab-1">Already Member?</a>
                </div>
            </div>
        </div>
    </div>
</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;
    color:#6a6f8c;
    background:#c8c8c8;
    font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/

.login-wrap{
    width:100%;
    margin:auto;
    max-width:525px;
    min-height:670px;
    position:relative;
    background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
    box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
    width:100%;
    height:100%;
    /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
    position:absolute;
    padding:90px 70px 50px 70px;
    background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
    top:0;
    left:0;
    right:0;
    bottom:0;/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
    position:absolute;
    transform:rotateY(180deg);
    backface-visibility:hidden;
    transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
    display:none;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
    text-transform:uppercase;
}
.login-html .tab{
    font-size:22px;
    margin-right:15px;
    padding-bottom:5px;
    margin:0 15px 10px 0;
    display:inline-block;
    border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
    color:#fff;
    border-color:#1161ee;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.login-form{
    min-height:345px;
    position:relative;
    perspective:1000px;
    transform-style:preserve-3d;
}
.login-form .group{
    margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
    width:100%;
    color:#fff;
    display:block;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.login-form .group .input,
.login-form .group .button{
    border:none;
    padding:15px 20px;
    border-radius:25px;
    background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
    text-security:circle;
    -webkit-text-security:circle;
}
.login-form .group .label{
    color:#aaa;
    font-size:12px;
}
.login-form .group .button{
    background:#1161ee;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.login-form .group label .icon{
    width:15px;
    height:15px;
    border-radius:2px;
    position:relative;
    display:inline-block;
    background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
    content:'';
    width:10px;
    height:2px;
    background:#fff;
    position:absolute;
    transition:all .2s ease-in-out 0s;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.login-form .group label .icon:before{
    left:3px;
    width:5px;
    bottom:6px;
    transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
    top:6px;
    right:0;
    transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
    color:#fff;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.login-form .group .check:checked + label .icon{
    background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
    transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
    transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
    transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
    transform:rotate(0);
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.hr{
    height:2px;
    margin:60px 0 50px 0;
    background:rgba(255,255,255,.2);
}
.foot-lnk{
    text-align:center;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/

Hopefully from this article, you can easily understand and understand how to create a professional transparent login form using only HTML and CSS programming code. If you encounter any problems while creating this login form, you can let me know by commenting.


❤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