• 1
  • 2
Home > Tips

CSS3 Login Form - CSS3 Login Form Free Download



 

 

 

 


 


 Brief Introduction to the CSS3 Login Form

This CSS3 login form may look ordinary. However, the method to create the CSS3 login form is new and fresh. The old technologies we used to create the CSS3 login form include using @font-face to create the icons, using box-shadow to create the shadow effects, etc. The new and highlight method to create the CSS3 login form is using the calc() function to calculate the value of positioning. If you also want to create a CSS3 login form like the one we created, please continue reading this article.



 How to Create the CSS3 Login Form?

To help you understand better how to create the CSS3 login form, it is necessary for us to show you the CSS3 login form codes. There are many explanations within the codes, we hope it will help you a lot.


HTML Codes for the CSS3 Login Form

 <form action='' method='post' class='login-form'>
  <div class='username'>
    <input type='text' name='username' placeholder='emma.watson@gmail.com' autocomplete='on' />
    <span class='user-icon icon'>u</span>
  </div>
  <div class='password'>
    <input type='password' name='password' placeholder='*******' />
    <span class='password-icon icon'>p</span>
  </div>
  <div class='account-control'>
    <input type='checkbox' name='Remember me' id='Remember me' value='Remember me' checked='' />
    <label for='Remember me' data-on='c' class='check'></label>
    <label for='Remember me' class='info'>Remember me</label>
    <button type='submit'>Login</button>
  </div>
  <p class='not-registered'>Not a registered user yet?<a>Sign up now!</a></p>
</form>


CSS Codes for the CSS3 Login Form

 

/*Explanation: Basic Styles*/
body {
  background: url(bg.jpg) no-repeat center fixed;
  background-size: 100% 100%;
}
.content {
  width:600px;
  height:420px;
  margin:50px auto;
}
/*Explanation: Form Styles*/
.login-form {
  width:400px;
  height:177px;
  margin:70px auto 0;
  padding-top:73px;
  position: relative; /* Explanation: make a reference point to position the users avatar */
  background-image:-*-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));/* Explanation: Create the gradient effect */
  box-shadow:0 3px 3px rgba(21,62,78,0.8);/* Explanation: Create the shadow effect*/
}
/* Explanation: Using pseudo-class to create the effect for the avatar */
.login-form:before {
  content:'';
  position:absolute;
  top:-50px;
  left:150px;
  width:102px;
  height:102px;
  padding:2px;
  border:1px solid rgb(216,216,219);
  background:#fff url('profilepicture.jpg') no-repeat 2px 2px;/* Explanation: Preloading uses avatar*/
}
/* Explanation: prompts */
.not-registered {
  position:absolute;
  color:rgb(153,153,153);
  font-weight:bold;
  top:calc(100% + 20px);
  background-color:rgb(255,255,255);
  width:400px;
  height:46px;
  margin:0 auto;
  line-height:46px;
  text-align: center;
  box-shadow:0 3px 3px rgba(21,62,78,0.8);
}
.not-registered a {
  margin-left:5px;
  text-decoration: none;
  color:rgb(52,119,182);
  cursor: pointer;
}
/* Explanation: inner elements styles of the form */
.login-form div {
  width:216px;
  height:28px;
  margin:20px auto;
  position:relative;
  line-height:28px;
  border:none;
}
/* Explanation: icons for the username and password */
.login-form .user-icon,
.login-form .password-icon {
  display:inline-block;
  font-family: 'loginform-icon';
  font-size:15px;
  text-align:center;
  line-height:28px;
  color:rgb(153,153,153);
  position:absolute;
  left:1px;
  top:1px;
  background-color:rgb(255,255,255);
  border:none;
  border-right:1px solid rgb(229,229,232);
  width:30px;
  height:28px;
  transition: all 300ms linear;
}
/*Explanation: Form input styles*/
.login-form .username input, .login-form .password input {
  height:100%;
  width:calc(100% - 40px);
  padding-left:40px;
  border-radius:2px;
  border:1px solid;
  border-color:rgb(229,229,232) rgb(220,220,221) rgb(213,213,213) rgb(220,220,221);
  display:block;
  transition: all 300ms linear;
}
/*Explanation: using pseudo-class to create the arrow/triangle effect */
.login-form .icon:before, .login-form .icon:after {
  content:'';
  position:absolute;
  top:10px;
  left:30px;
  width:0;
  height:0;
  border:4px solid transparent;
  border-left-color:rgb(255,255,255);
}
.login-form .icon:before {
  top:9px;
  border:5px solid transparent;
  border-left-color:rgb(229,229,232);
}
/*Explanation: form focus effect*/
.login-form .username input:focus, .login-form .password input:focus {
  border-color:rgb(69,153,228);
  box-shadow:0 0 2px 1px rgb(200,223,244);
}
.login-form .username input:focus + span, .login-form .password input:focus + span {
  background:-*-linear-gradient(top,rgb(255,255,255),rgb(245,245,245));
  color:rgb(51,51,51);
}
.login-form .username input:focus + span:after, .login-form .password input:focus + span:after {
  border-left-color:rgb(250,250,250);
}

.login-form .account-control label {
  margin-left:24px;
  font-size:12px;
  font-family: Arial, Helvetica, sans-serif;
  cursor:pointer;
}
/*Explanation: login button effect */
.login-form button[type='submit'] {
  color:#fff;
  font-weight:bold;
  float:right;
  width:68px;
  height:30px;
  position:relative;
  background:-*-linear-gradient(top,rgb(74,162,241),rgb(52,119,182)) 1px 0 no-repeat,
       -*-linear-gradient(top,rgb(52,118,181),rgb(36,90,141)) left top no-repeat;
  background-size:66px 28px,68px 29px;
  border:none;
  border-top:1px solid rgb(52,118,181);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgb(86,174,251);
  text-shadow:0 1px 1px rgb(51,113,173);
  transition: all 200ms linear;
}
.login-form button[type='submit']:hover {
  text-shadow:0 0 2px rgb(255,255,255);
  box-shadow:inset 0 1px 0 rgb(86,174,251),0 0 10px 3px rgba(74,162,241,0.5);
}
.login-form button[type='submit']:active {
  background:-*-linear-gradient(top,rgb(52,119,182),rgb(74,162,241)) 1px 0 no-repeat,
       -*-linear-gradient(top,rgb(52,118,181),rgb(36,90,141)) left top no-repeat;
}
/*Explanation: The effect of the checkbox */
.login-form .account-control input {
  width:0px;
  height:0px;
}
.login-form label.check {
  position:absolute;
  left:0;
  top:50%;
  margin:-8px 0;
  display:inline-block;
  width:16px;
  height:16px;
  line-height: 16px;
  text-align:center;
  border-radius:2px;
  background:-*-linear-gradient(top,rgb(255,255,255),rgb(246,246,246)) 1px 1px no-repeat,
       -*-linear-gradient(top,rgb(227,227,230),rgb(165,165,165)) left top no-repeat;
  background-size:14px 14px,16px 16px;
}
.login-form .account-control input:checked + label.check:before {
  content:attr(data-on);
  font-family:loginform-icon;
}
/*Call server font styles*/
@font-face {
  font-family: 'loginform-icon';
  src: url('font/loginform-icon.eot');
  src: url('font/loginform-icon.eot?#iefix') format('embedded-opentype'),
    url('font/loginform-icon.woff') format('woff'),
    url('font/loginform-icon.ttf') format('truetype'),
    url('font/loginform-icon.svg#loginform-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}



 Terms of Use

The CSS3 login form was created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the CSS3 login form and then edit it for their own use. If you are interested in this CSS3 login form, please feel free to download it. If you have problem understanding or editing the CSS3 login form, please feel free to contact our support team (support@slicemaker.com).



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0