Saturday, June 29, 2013
Labels:
CSS
Here I have provided ready made code for log in form designing. It is awesome designs with best color combinations.
All designs are created just using CSS, so you don’t have to worry loading time it is very faster and compatible on all browsers. It is auto adjustable and dynamic designs.
There are also new Login Designs available here:
10 awsome Login Form Designs developed in HTML and CSS with ready code
5 awesome Login form design created using CSS and HTML
Introduction:
Here in this post I have provided five log in form designs with code. log in form is the first impression of a website. The design of the log in form will define the nature of the website. A sober, creative as well as attractive log in form will surely encourage a visitor to signup in your website.Here I have provided ready made code for log in form designing. It is awesome designs with best color combinations.
All designs are created just using CSS, so you don’t have to worry loading time it is very faster and compatible on all browsers. It is auto adjustable and dynamic designs.
There are also new Login Designs available here:
10 awsome Login Form Designs developed in HTML and CSS with ready code
Log in Form with Facebook and Twitter Log in buttons:
Recently it is a popular design.this form is available with two other options for log in without signup. Users like this types of log in forms because this types of forms save users from boring and lengthy signup forms.
Code In HTML/CSS:-
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Social-Tooltip</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
background-color: #f4f4f4;
color: #5a5656;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
a { text-decoration: none; }
h1 { font-size: 1em; }
h1, p {
margin-bottom: 10px;
}
strong {
font-weight: bold;
}
.uppercase { text-transform: uppercase; }
/* ---------- LOGIN ---------- */
#login {
margin: 50px auto;
width: 300px;
}
form fieldset input[type="text"], input[type="password"] {
background-color: #e5e5e5;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #5a5656;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
height: 50px;
outline: none;
padding: 0px 10px;
width: 280px;
-webkit-appearance:none;
}
form fieldset input[type="submit"] {
background-color: #008dde;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #f4f4f4;
cursor: pointer;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
height: 50px;
text-transform: uppercase;
width: 300px;
-webkit-appearance:none;
}
form fieldset a {
color: #5a5656;
font-size: 10px;
}
form fieldset a:hover { text-decoration: underline; }
.btn-round {
background-color: #5a5656;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #f4f4f4;
display: block;
font-size: 12px;
height: 50px;
line-height: 50px;
margin: 30px 125px;
text-align: center;
text-transform: uppercase;
width: 50px;
}
.facebook-before {
background-color: #0064ab;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
color: #f4f4f4;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.facebook {
background-color: #0079ce;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
color: #f4f4f4;
cursor: pointer;
height: 50px;
text-transform: uppercase;
width: 250px;
}
.twitter-before {
background-color: #189bcb;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
color: #f4f4f4;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.twitter {
background-color: #1bb2e9;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
color: #f4f4f4;
cursor: pointer;
height: 50px;
text-transform: uppercase;
width: 250px;
}
</style>
</head>
<body>
<div id="login">
<h1><strong>Welcome.</strong> Please login.</h1>
<form action="javascript:void(0);" method="get">
<fieldset>
<p><input type="text" required value="Username" onBlur="if(this.value=='')this.value='Username'" onFocus="if(this.value=='Username')this.value='' "></p> <!-- JS because of IE support; better: placeholder="Username" -->
<p><input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "></p> <!-- JS because of IE support; better: placeholder="Password" -->
<p><a href="#">Forgot Password?</a></p>
<p><input type="submit" value="Login"></p>
</fieldset>
</form>
<p><span class="btn-round">or</span></p>
<p>
<a class="facebook-before"><span class="fontawesome-facebook"></span></a>
<button class="facebook">Login Using Facbook</button>
</p>
<p>
<a class="twitter-before"><span class="fontawesome-twitter"></span></a>
<button class="twitter">Login Using Twitter</button>
</p>
</div> <!-- end login -->
</body>
</html>
Ice Blue Login Design:-
Here is the first simple but very attractive log in form with registration link.this is ice blue theme. It is awesome theme. All the elements are in center of a page and when you focus on the textbox it will display one shutter with user icon it also applied on password field.
Code In HTML/CSS:-
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title> Aby Designs </title>
<style type="text/css">
/* To generate icons
http://weloveiconfonts.com
*/
/* CSS3 rotating menu
==================================================
================================================== */
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
/*******************
SELECTION STYLING
*******************/
::selection {
color: #fff;
background: #f676b2; /* Safari */
}
::-moz-selection {
color: #fff;
background: #f676b2; /* Firefox */
}
/*******************
BODY STYLING
*******************/
* {
margin: 0;
padding: 0;
border: none;
outline: none;
}
body {
background: url('http://www.demo.amitjakhu.com/login-form/images/bg.png');
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
height: 500px;
}
#wrapper {
/* Center wrapper perfectly */
width: 300px;
height: 400px;
margin: 70px auto;
}
/* Download Button (Demo Only) */
.download {
display: block;
position: absolute;
float: right;
right: 25px;
bottom: 25px;
padding: 5px;
font-weight: bold;
font-size: 11px;
text-align: right;
text-decoration: none;
color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:hover {
color: rgba(0,0,0,0.75);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:focus {
bottom: 24px;
}
/*
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
background: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png) no-repeat;
}
*/
.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
z-index: -2;
/* Fallback */
background-image: url(http://www.demo.amitjakhu.com/login-form/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));
}
/*******************
LOGIN FORM
*******************/
.login-form {
width: 300px;
margin: 0 auto;
position: relative;
background: #f3f3f3;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/*******************
HEADER
*******************/
.login-form .header {
padding: 40px 30px 30px 30px;
}
.login-form .header h1 {
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 28px;
line-height:34px;
color: #414848;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
margin-bottom: 10px;
}
.login-form .header span {
font-size: 11px;
line-height: 16px;
color: #678889;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}
/*******************
CONTENT
*******************/
.login-form .content {
padding: 0 30px 25px 30px;
}
/* Input field */
.login-form .content .input {
width: 188px;
padding: 15px 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
/* Second input field */
.login-form .content .password, .login-form .content .pass-icon {
margin-top: 25px;
}
.login-form .content .input:hover {
background: #dfe9ec;
color: #414848;
}
.login-form .content .input:focus {
background: #dfe9ec;
color: #414848;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.user-icon, .pass-icon {
width: 46px;
height: 47px;
display: block;
position: absolute;
left: 0px;
padding-right: 2px;
z-index: -1;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.user-icon {
top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/user-icon.png) no-repeat center;
}
.pass-icon {
top:201px;
background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/pass-icon.png) no-repeat center;
}
.content input:focus + div{
left: -46px;
}
/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
/*******************
FOOTER
*******************/
.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;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill out the form below to login to my super awesome imaginary control panel.</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
<input type="submit" name="submit" value="Register" class="register" />
</div>
</form>
</div>
<div class="gradient"></div>
</body>
</html>
Green Paper Login Design:-
This design is very simple so no another animations and effects are used but it looks sober and creative. it’s design based on Notebook Paper theme.it is simple but very attractive.
Code In HTML/CSS:-
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title> Aby Designs </title>
<style type="text/css">
body {
font-family: helvetica, arial;
font-size: 100%;
line-height: 1.5;
margin:0;
padding:0;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
.form_1 {
width: 320px;
margin: 60px auto;
font-family: 'Anaheim', sans-serif;
background-color: #fff;
background-image:-webkit-linear-gradient(left, transparent 9%, rgb(144,228,63) 9%, rgb(144,227,63) 10%, transparent 10.2%),
-webkit-linear-gradient(-90deg, transparent 22px, rgba(124,191,43, .14) 22px, rgba(144,211,63, .6) 23px, transparent 23px);
background-image:-moz-linear-gradient(left, transparent 9%, rgb(144,228,63) 9%, rgb(144,227,63) 10.3%, transparent 10%),
-moz-linear-gradient(-90deg, transparent 21px, rgba(124,201,43, .14) 22px, rgba(144,231,63, .63) 23px, transparent 21px);
background-image:-ms-linear-gradient(left, transparent 9%, rgb(144,228,63) 9%, rgb(144,227,63) 10.3%, transparent 10%),
-ms-linear-gradient(-90deg, transparent 21px, rgba(124,201,43, .1) 22px, rgba(144,231,63, .9) 23px, transparent 21px);
background-size: 100% 1.62em;
border-radius: 0 4px 4px 0;
color: rgb(125,126,125);
position:relative;
border: 1px solid rgba(170,170,175, .25);
box-shadow: 1px 1px 2px rgba(159,209,108, .4), inset 0 0 12px 1px rgba(180,223,88, .2);
}
.form_1 .field_wrap{
margin: 18px 30px;
padding: 6px 15px 6px;
}
.form_1 .field_wrap label {
display: block;
width: 35%;
float:left;
line-height: 1.5;
vertical-align: middle;
text-shadow: 0 1px 1px rgba(194,196, 198, .2);
}
.form_1 .field_wrap input {
width: 140px;
font-size: 14px;
outline:none;
border:none;
background: transparent;
}
.form_1 .submit_form input{
-webkit-appearance: button;
position:absolute;
right:0px;
outline: none;
width: 25%;
padding: 4px;
margin-top: 10px;
background: -webkit-linear-gradient(top, rgb(144,214,58) 0%,rgb(144,211,63) 24%,rgb(115,195,23) 80%,rgb(108,188,10) 100%);
background: -moz-linear-gradient(top, rgb(144,214,58) 0%,rgb(144,211,63) 24%,rgb(115,195,23) 80%,rgb(108,188,10) 100%);
background: -ms-linear-gradient(top, rgb(144,214,58) 0%,rgb(144,211,63) 24%,rgb(115,195,23) 80%,rgb(108,188,10) 100%);
color:rgb(252, 253, 252);
text-shadow: 0 1px 1px rgba(57,130,53, .4);
border: none;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(86,123,25, .8);
}
.form_1 .submit_form input:active {
-webkit-transform:translate(0, 1px);
-moz-transform:translate(0, 1px);
-ms-transform:translate(0, 1px);
background: -webkit-linear-gradient(top, rgb(102, 180, 12) 0%, rgb(138, 198, 28) 26%, rgb(122, 200, 63) 80%, rgb(148, 218, 56) 100%);
background: -moz-linear-gradient(top, rgb(102, 180, 12) 0%, rgb(138, 198, 28) 26%, rgb(122, 200, 63) 80%, rgb(148, 218, 56) 100%);
background: -ms-linear-gradient(top, rgb(102, 180, 12) 0%, rgb(138, 198, 28) 26%, rgb(122, 200, 63) 80%, rgb(148, 218, 56) 100%);
box-shadow: 0 1px rgba(90, 148, 30, .5);
}
</style>
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>
<form method="post" action="#" class="form_1">
<div class="field_wrap">
<label>Username:</label>
<input type="text" placeholder="Username or Email" name="username">
<label>Password:</label>
<input type="password" placeholder="Password" name="password">
</div>
<div class="submit_form">
<input type="submit" name="submit" value="Sign In">
</div>
</form>
</body>
</html>
Pniky Login Design:-
This design is very sweet and small. it can be placed in small space when there is a little space on page. There is also designed validations for required field using Javascript.
Code In HTML/CSS:-
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Aby Design code</title>
<style type="text/css">
/* CSS *//* CSS *//* CSS *//* CSS */
/*CSS*/
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@font-face{
src:url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictos-regular-webfont.ttf") format("truetype"),
url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictos-regular-webfont.otf") format("opentype"),
url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictos-regular-webfont.svg") format("svg");
font-family:icon;
}
body{
background:#292931;
font-family:'Open Sans';
}
label{
font-family:icon;
text-shadow:0 -1px 0 #666;
-webkit-font-smoothing: antialiased;
}
#block,#option{
width:230px;
height:113px;
margin:auto;
}
#block{
background:#423143;
margin-top:100px;
}
#block:before{
content:'';
display:block;
width:230px;
height:3px;
/* The rainbow*/
background:linear-gradient(left, rgba(173,107,173,1) 0%, rgba(173,107,173,1) 1%, rgba(181,121,168,1) 1%, rgba(181,126,181,1) 2%, rgba(181,126,181,1) 2%, rgba(189,136,187,1) 3%, rgba(189,136,187,1) 3%, rgba(197,151,181,1) 4%, rgba(197,151,181,1) 5%, rgba(206,165,194,1) 5%, rgba(206,165,194,1) 6%, rgba(214,178,194,1) 6%, rgba(214,178,194,1) 7%, rgba(222,189,189,1) 7%, rgba(222,189,189,1) 8%, rgba(222,197,197,1) 8%, rgba(222,197,197,1) 9%, rgba(229,210,200,1) 9%, rgba(229,210,200,1) 10%, rgba(241,230,197,1) 11%, rgba(241,230,197,1) 12%, rgba(247,247,197,1) 12%, rgba(247,247,197,1) 15%, rgba(236,247,194,1) 15%, rgba(236,247,194,1) 16%, rgba(230,239,189,1) 17%, rgba(230,239,189,1) 18%, rgba(222,239,183,1) 19%, rgba(222,239,183,1) 20%, rgba(212,239,176,1) 20%, rgba(212,239,176,1) 22%, rgba(201,230,165,1) 22%, rgba(201,230,165,1) 25%, rgba(186,230,158,1) 26%, rgba(186,230,158,1) 27%, rgba(182,225,147,1) 27%, rgba(182,225,147,1) 30%, rgba(169,222,140,1) 30%, rgba(169,222,140,1) 32%, rgba(160,222,132,1) 32%, rgba(160,222,132,1) 36%, rgba(156,214,147,1) 36%, rgba(156,214,147,1) 39%, rgba(148,214,161,1) 40%, rgba(148,214,161,1) 43%, rgba(148,214,174,1) 43%, rgba(148,214,174,1) 45%, rgba(148,206,186,1) 46%, rgba(148,206,186,1) 48%, rgba(140,206,197,1) 49%, rgba(140,206,197,1) 52%, rgba(140,206,212,1) 52%, rgba(140,206,212,1) 55%, rgba(140,195,221,1) 55%, rgba(140,195,221,1) 58%, rgba(148,179,210,1) 59%, rgba(148,179,210,1) 60%, rgba(156,173,206,1) 61%, rgba(156,167,197,1) 61%, rgba(156,167,197,1) 63%, rgba(165,154,189,1) 63%, rgba(165,154,189,1) 64%, rgba(169,148,181,1) 65%, rgba(169,148,181,1) 66%, rgba(173,134,175,1) 66%, rgba(173,134,175,1) 67%, rgba(181,121,168,1) 67%, rgba(181,121,168,1) 69%, rgba(189,115,156,1) 69%, rgba(189,115,156,1) 70%, rgba(196,102,146,1) 71%, rgba(196,102,146,1) 72%, rgba(200,88,143,1) 73%, rgba(200,88,143,1) 74%, rgba(206,80,132,1) 74%, rgba(206,80,132,1) 76%, rgba(214,64,123,1) 76%, rgba(214,64,123,1) 78%, rgba(220,59,114,1) 78%, rgba(220,59,114,1) 79%, rgba(222,48,110,1) 79%, rgba(222,48,110,1) 80%, rgba(232,42,107,1) 80%, rgba(232,42,107,1) 81%, rgba(230,33,99,1) 81%, rgba(230,33,99,1) 83%, rgba(232,42,107,1) 83%, rgba(232,42,107,1) 84%, rgba(222,48,110,1) 85%, rgba(222,48,110,1) 86%, rgba(220,59,114,1) 87%, rgba(220,59,114,1) 88%, rgba(214,64,123,1) 88%, rgba(214,64,123,1) 89%, rgba(206,66,130,1) 90%, rgba(206,66,130,1) 92%, rgba(199,74,141,1) 92%, rgba(199,74,141,1) 94%, rgba(189,82,148,1) 95%, rgba(189,82,148,1) 96%, rgba(184,90,158,1) 97%, rgba(184,90,158,1) 99%, rgba(181,99,165,1) 99%, rgba(181,99,165,1) 100%);
}
#block:after{
content:'';
display:block;
width:15px;
height:15px;
background:#423143;
transform:rotate(-45deg);
margin:10px 18px;
position:absolute;
}
#block label, #submit{
position:absolute;
width:33px;
height:34px;
background:#dedede;
margin:15px;
text-align:center;
line-height:2.2;
color:#857487;
border-top-left-radius:2px;
border-bottom-left-radius:2px;
}
#block label#pass{
position:absolute;
width:33px;
height:34px;
background:#dedede;
margin:-5px 15px;
}
#submit{
border:0;
margin:-29px 180px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
font-family:icon;
background:#ae6cac;
text-shadow:0 -1px 0 #333;
box-shadow:-1px 0 1px 0px #6c5b6d;
font-size:12px;
line-height:2.8;
padding:0;
}
#submit:hover{
color:#fff;
}
#user, #pass{
box-shadow:0.1px 0 2px #6c5B6d;
}
#block input[type=text],#block input[type=password], #option p {
font-family:'Open Sans';
font-weight:300;
-webkit-font-smoothing: antialiased;
}
#block input[type=text],#block input[type=password]{
width:156px;
height:32px;
margin:15px 15px;
border:0;
border-radius:2px;
outline:0;
display:block;
font-size:18px;
}
#block input[type=password]{
width:156px;
height:32px;
margin:-5px 15px;
}
#submit{
color:#fff;font-size:8px;font-weight:bold;
}
#option{
width:230px;
height:80px;
overflow:hidden;
margin:auto;
}
#option p{
color:#6c5B6d;
font-size:24px;
text-transform:uppercase;
padding:0px 18px;
margin-top:15px;
display:block;
float:left;
-webkit-font-smoothing: antialiased;
/*text-shadow:0 -1px 0 #000;*/
}
#option a{
-webkit-font-smoothing: antialiased;
color:#6c5B6d;
/*text-shadow:0 -1px 0 #000;*/
font-size:12px;
display:block;
float:right;
margin:26px 15px;
}
input{padding-left:40px;}
#block:active > #block:before{
background-position:100px 100px;
}
/* placeholder */
::-webkit-input-placeholder {
-webkit-font-smoothing: antialiased;
color:#999;
font-size:16px;
}
:-moz-input-placeholder {
color:#999;
font-size:16px;
}
/* Want to see the magic ? So open a webkit browser then remove the comments below !
/!\ YOU NEED TO PLACE THIS IN INPUTS /!\
oninvalid="setCustomValidity('Custom Message')"
*/
/*
input::-webkit-validation-bubble-message {
color:white;
background: #e62163;
border:0;
border-radius:0;
padding:0;
width:55px;
height:34px;
position:absolute;
float:left;
margin:-33px 208px;
text-align:center;
line-height:2.7em;
box-shadow:0 0 0;
}
input::-webkit-validation-bubble-message:before {
content:"X";
display:block;
font-family:icon;
color:white;
background: #e62163;
border:0;
border-radius:0;
padding:0;
width:34px;
height:34px;
position:absolute;
float:left;
margin:0px -208px;
text-align:center;
line-height:2.7em;
color: #fff;
border-top-left-radius:2px;
border-bottom-left-radius:2px;
-webkit-font-smoothing: antialiased;
}
input::-webkit-validation-bubble-icon {
display: none;
}
input::-webkit-validation-bubble-arrow {
background: #e62163;
border:0;
width:10px;
height:10px;
position:absolute;
margin:-23px 178px;
}*/
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form id="form" name="form" action="#" method="post">
<div id="block">
<label id="user" for="name">p</label>
<input type="text" name="name" id="name" placeholder="Username" required/>
<label id="pass" for="password">k</label>
<input type="password" name="password" id="password" placeholder="Password" required />
<input type="submit" id="submit" name="submit" value="a"/>
</div>
</form>
<div id="option">
<p>Sign in</p>
<a href="#">forgot?</a>
</div>
</body>
</html>
Simple Design:-
It is very simple design with Black and White color combination. It is the login form with Home Page means you can use this design if your first page is not login page. In home page there is sign in button in upper left corner of home page when you click it will display one popup login form with close button.
Code In HTML/CSS:-
<!DOCTYPE html>
<html>
<head>
<title>MAD Logics Designs</title>
<style type="text/css">
::selection {
background: transparent;
}
body {
font-family: TriplexLight, Verdana;
background-size: cover 100%;
}
.contain {
position: absolute;
display: block;
height: 100%;
width: 100%;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
z-index: 0;
}
#welcome {
text-align: center;
font-size: 75px;
line-height: 32px;
color: #fff;
transform: scale(1);
}
#welcome p {
margin-top: 150px;
}
#welcome span {
font-size: 32px;
color: #bbb;
text-transform: uppercase;
}
input[type='checkbox'] {
display: none;
}
input[type='reset'] {
display: none;
}
input[type='submit'] {
display: none;
}
label[for='checkme'] {
position: absolute;
cursor: pointer;
background: #333;
color: #fff;
padding: 10px;
z-index: 1;
}
input[type='checkbox']:checked ~ #content {
background: rgba(0,0,0,.4);
}
input[type='checkbox']:checked ~ #welcome {
display: none;
}
.box {
position: relative;
left: 0;
right: 0;
margin: 100px auto;
padding: 10px 15px 20px 15px;
display: none;
width: 300px;
background: rgba(255,255,255,0.75);
box-shadow: 0 0 20px #000;
}
.box p {
text-align: center;
margin: 5px 0px;
padding: 10px 0;
background: #333;
color: #fff;
}
.box a {
text-align: right;
font-size: 12px;
text-decoration: none;
color: blue;
}
input[type='checkbox']:checked ~ #content .box {
display: block;
}
label[for='close'] {
position: static;
cursor: pointer;
float: left;
display: block;
width: 10px;
height: 10px;
line-height: 8px;
text-align: center;
background: #333;
color: #fff;
padding: 10px;
z-index: 1;
border: 2px solid #fff;
border-radius: 30px;
box-shadow: 0 0 5px #000;
margin: -25px;
}
#sign {
float: right;
cursor: pointer;
text-align: right;
margin: 4px 0;
padding: 4px 8px;
background: #333;
color: #fff;
}
#sign:hover {
color: #333;
background: none;
}
.label {
display: inline-block;
width: 100px;
padding: 4px 2px;
}
.login {
border: none;
outline: none;
width: 180px;
background: #bbb;
color: #fff;
padding: 2px 5px;
margin: 1px 0;
}
</style>
</head>
<body>
<form>
<input id="checkme" type="checkbox">
<label for="checkme">
Sign
in</label>
<div class="contain" id="welcome">
<p>
Welcome<br />
<span>sign in to access</span>
</p>
</div>
<div class="contain" id="content">
<div class="box" id="box">
<input id="close" type="reset">
<label for="close">x</label>
<p>Login to your account</p>
<label class="label" for="text">Username</label>
<input class="login" id="user" type="user">
<label class="label" for="pass">Password</label>
<input class="login" id="pass" type="password">
<label for="submit" id="sign">sign in</label>
<input id="submit" type="submit">
<br />
<br />
<a href="#">Forgot password?</a>
</div>
</div>
</form>
</body>
</html>
Subscribe to:
Post Comments
(
Atom
)
Simply Awesome! Many many thanks for this sharing..!
ReplyDeletehow should i specify an user name and password for it
ReplyDeleteDear sir, Among the above 5 design samples i used 2nd design successfully in my application but i am not able to generate event of login button. kindly do let me know how to achieve this task.
ReplyDeleteYou Just Have to convert the css input object into ".input" css class and apply this css class in you server control after that you will able to generate event for your server control.
Delete