Creating Beautiful Login Form

Beautiful login form using HTML, CSS3 and JavaScript
247 Flares 247 Flares ×

Tutorial: Beautiful Login Form using HTML, CSS3 and JavaScript

In our one of the article Login form UI psd collection we have provided you many of the free psd files for login form. So, we decided to have a tutorial on converting a PSD to HTML/CSS version. In this article we will provide you the HTML and CSS for one of the login form PSD. Please note that, we are not going to discuss the exact and detailed conversion of PSD to HTML. It’s just a brief of PSD to HTML version of one of the free psd we had in our article; Free login form UI PSD collection.

Let’s heads towards our tutorial. Firstly, we will add our stylesheet and and add a simple JavaScript for sliding out icons when we focus on input for entering details.

Head


<!--Stylesheets-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="fonts/pacifico/stylesheet.css" rel="stylesheet" type="text/css" />

<!--Scripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--Sliding icons-->
<script type="text/javascript">
$(document).ready(function() {
$(".username").focus(function() {
$(".user-icon").css("left","-48px");
});
$(".username").blur(function() {
$(".user-icon").css("left","0px");
});

$(".password").focus(function() {
$(".pass-icon").css("left","-48px");
});
$(".password").blur(function() {
$(".pass-icon").css("left","0px");
});
});
</script>

Markup

Here are very simple lines of html for our form


<div id="wrapper">
<!--Sliding icons-->
<div></div>
<div></div>
<!--END Sliding icons-->

<!--login form inputs-->
<form name="login-form" action="" method="post">

<!--Header-->
<div>
<h1>Login Form</h1>
<span>Please login by using this beautiful login form or if you dont have an account, you can Register!</span>
</div>
<!--END header-->

<!--Input fields-->
<div>
<!--USERNAME--><input name="username" type="text" placeholder="Username" /><!--END USERNAME-->
<!--PASSWORD--><input name="password" type="password" placeholder="Password" /><!--END PASSWORD-->
</div>
<!--END Input fields-->

<!--Buttons-->
<div>
<!--Login button--><input type="submit" name="submit" value="Login" /><!--END Login button-->
<!--Register button--><input type="submit" name="submit" value="Register" /><!--END Register button-->
</div>
<!--END Buttons-->

</form>
<!--end login form-->

</div>

<!--bg gradient--><div></div><!--END bg gradient-->

CSS

Now the following CSS code will add some really nice look to our Login form, which is very simple

The following lines of css will style and create a background structure of our form. Please notice that how we centered the gradient class. Its easy but important.


.heading {
width:100%;
top:0;
position:fixed;
text-align:center;
padding:10px 0;
margin:0 auto;
font-family:"PacificoRegular", Georgia, Times, serif;
font-weight:normal;
font-size:40px;
color:#FFFFFF;
text-shadow:0 2px 2px #333;
}

#wrapper {
/* Center wrapper perfectly */
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -200px;
}

.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;

/* Fallback */
background-image: url(../images/gradient.png) no-repeat;

/* CSS3 Gradient */
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}

For applying the style to input fields of our form;


.heading {
width:100%;
top:0;
position:fixed;
text-align:center;
padding:10px 0;
margin:0 auto;
font-family:"PacificoRegular", Georgia, Times, serif;
font-weight:normal;
font-size:40px;
color:#FFFFFF;
text-shadow:0 2px 2px #333;
}

#wrapper {
/* Center wrapper perfectly */
width: 300px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -200px;
}

.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;

/* Fallback */
background-image: url(../images/gradient.png);
background-repeat: no-repeat;

/* CSS3 Gradient */
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}

For Submit and Register button;


.login-form .footer {
padding: 25px 30px 40px 30px;
overflow: auto;

background: #d4dedf;
border-top: 1px solid #fff;

box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}

/* Login button */
.login-form .footer .button {
float:right;
padding: 11px 25px;

font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;

box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}

.login-form .footer .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);

box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.login-form .footer .button:focus {
position: relative;
bottom: -1px;

background: #56c2e1;

box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}

/* Register button */
.login-form .footer .register {
display: block;
float: right;
padding: 10px;
margin-right: 20px;

background: none;
border: none;
cursor: pointer;

font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #414848;
text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}

.login-form .footer .register:hover {
color: #3f9db8;
}

.login-form .footer .register:focus {
position: relative;
bottom: -1px;
}

So what we have actually created? Here you can have a look at the demo and download the example we created. If you would like to share your thoughts or want to suggest something for our next post of if you like this tutorial then please do comment below.

 

247 Flares Twitter 3 Facebook 14 Google+ 5 LinkedIn 225 Pin It Share 0 247 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him akash@dzyngiri.com | Twitter | Facebook

Connect with us

10 Comments

  1. I believe this is one of the so much vital information for me. And i’m satisfied reading your article. However should remark on few normal things, The web site style is wonderful, the articles is in reality excellent : D. Excellent process, cheers

Leave a Reply

(*) Required, Your email will not be published