Best Bootstrap Login Form Style

由于上一篇提到flask + bootstarp 做一个简单的登录页面,所以本篇幅是上一篇幅的一个副产品,在找模板的时候,会国外一篇文章上看到的几个不错的模板,这里摘录如下。



<br />



A few weeks ago I made a post about the <a href="http://freshwebdev.com/10-best-awesome-login-form-from-designer-to-developer.html">login form style using CSS</a>.Now, I find the CSS login form with bootstrap. We know, bootstrap is most CSS fraemwork &nbsp;used on the planet. I am&nbsp;using bootstrap to design an online store, this blog and others. Bootstrap is easy to use and produce responsive web design.



Login form is usually used as a screen to enter an application or service. Nearly all of the web using the login form. I found some login form designs that you can use. All use bootrap as framework. Incidentally, I was looking for a design for applications that I make. So, this list may be useful for you as well.



All this code and example using latest bootstrap version (3.03), make sure you use right version before apply.&nbsp;



<br />

1. Parallax Login form with Bootstrap

<br />



<a href="https://www.361way.com/wp-content/uploads/2015/05/bootstrap-login1.png"><img src="https://www.361way.com/wp-content/uploads/2015/05/bootstrap-login1.png" alt="bootstrap-login1" width="344" height="248" class="alignnone size-full wp-image-4455" /></a>



Its awesome login form with parallax effect. Using CSS+Javascript to build it. See this code

HTML code

<br />


Please sign in

<br />

CSS

<br />
body{
    background: url(http://mymaplist.com/img/parallax/back.png);
    background-color: #444;
    background: url(http://mymaplist.com/img/parallax/pinlayer2.png),url(http://mymaplist.com/img/parallax/pinlayer1.png),url(http://mymaplist.com/img/parallax/back.png);
}
.vertical-offset-100{
    padding-top:100px;
}
<br />

Javascript (Jquery needed)

$(document).ready(function(){
  $(document).mousemove(function(e){
     TweenLite.to($('body'),
        .5,
        { css:
            {
                'background-position':parseInt(event.pageX/8) + "px "+parseInt(event.pageY/12)+"px, "+parseInt(event.pageX/15)+"px "+parseInt(event.pageY/15)+"px, "+parseInt(event.pageX/30)+"px "+parseInt(event.pageY/30)+"px"
            }
        });
  });
});
This code has been created by <a href="http://bootsnipp.com/msurguy" target="_blank" rel="noopener">msurguy</a>&nbsp;<a href="http://bootsnipp.com/snippets/featured/parallax-login-form" target="_blank" rel="noopener">Source</a>. / <a href="http://bootsnipp.com/fullscreen/VxmR" target="_blank" rel="noopener">Demo</a>



<br />

2. Full Screen Login Form with Bootstrap

<br />



<br />



<a href="https://www.361way.com/wp-content/uploads/2015/05/bootstrap-login2.png"><img src="https://www.361way.com/wp-content/uploads/2015/05/bootstrap-login2.png" alt="bootstrap-login2" width="317" height="214" class="alignnone size-full wp-image-4456" /></a>



<br />

HTML Code

Sign In

Posted By: Bhaumik Patel
<br />

CSS

body
{
    background: url('http://farm3.staticflickr.com/2832/12303719364_c25cecdc28_b.jpg') fixed;
    background-size: cover;
    padding: 0;
    margin: 0;
}
.wrap
{
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
p.form-title
{
    font-family: 'Open Sans' , sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #FFFFFF;
    margin-top: 5%;
    text-transform: uppercase;
    letter-spacing: 4px;
}
form
{
    width: 250px;
    margin: 0 auto;
}
form.login input[type="text"], form.login input[type="password"]
{
    width: 100%;
    margin: 0;
    padding: 5px 10px;
    background: 0;
    border: 0;
    border-bottom: 1px solid #FFFFFF;
    outline: 0;
    font-style: italic;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: #FFFFFF;
    outline: 0;
}
form.login input[type="submit"]
{
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 16px;
    outline: 0;
    cursor: pointer;
    letter-spacing: 1px;
}
form.login input[type="submit"]:hover
{
    transition: background-color 0.5s ease;
}
form.login .remember-forgot
{
    float: left;
    width: 100%;
    margin: 10px 0 0 0;
}
form.login .forgot-pass-content
{
    min-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
form.login label, form.login a
{
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
}
form.login a
{
    transition: color 0.5s ease;
}
form.login a:hover
{
    color: #2ecc71;
}
.pr-wrap
{
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}
.show-pass-reset
{
    display: block !important;
}
.pass-reset
{
    margin: 0 auto;
    width: 250px;
    position: relative;
    margin-top: 22%;
    z-index: 999;
    background: #FFFFFF;
    padding: 20px 15px;
}
.pass-reset label
{
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 15px;
}
.pass-reset input[type="email"]
{
    width: 100%;
    margin: 5px 0 0 0;
    padding: 5px 10px;
    background: 0;
    border: 0;
    border-bottom: 1px solid #000000;
    outline: 0;
    font-style: italic;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: #000000;
    outline: 0;
}
.pass-reset input[type="submit"]
{
    width: 100%;
    border: 0;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 10px;
    outline: 0;
    cursor: pointer;
    letter-spacing: 1px;
}
.pass-reset input[type="submit"]:hover
{
    transition: background-color 0.5s ease;
}
.posted-by
{
    position: absolute;
    bottom: 26px;
    margin: 0 auto;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.66);
    padding: 10px;
    left: 45%;
}
<br />

Javascript (Jquery needed)

 (document).ready(function () {('.forgot-pass').click(function(event) {
      (".pr-wrap").toggleClass("show-pass-reset");
    });('.pass-reset-submit').click(function(event) {
      $(".pr-wrap").removeClass("show-pass-reset");
    });
});
<br />



<a href="http://bootsnipp.com/fullscreen/dPKk" target="_blank" rel="noopener">Demo</a>



I’ll update this list soon, please stay tune. Dont forget to subscribe our RSS feed



Update : Ok, i am back to update this awesome list.

3. Flip Login Form and Register with 3D Effect

<a href="https://www.361way.com/wp-content/uploads/2015/05/bootstrap-login3.png"><img src="https://www.361way.com/wp-content/uploads/2015/05/bootstrap-login3.png" alt="bootstrap-login3" width="283" height="275" class="alignnone size-full wp-image-4457" /></a>



This snippet will give a flip 3D effect, check this <a href="http://bootsnipp.com/fullscreen/7RMe" target="_blank" rel="noopener">demo</a> and read the code.



<br />

<

pre class=”prettyprint linenums lang-js”>

CSS
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #ddd;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
background-color: #f3f3f3;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
font: 15px ‘Segoe UI’,Arial,sans-serif;
background-color: #EAEBE5;
height: auto;
padding: 10px;
color:#7e8c8d;
outline:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type=”email”] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type=”password”] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#recover input[type=”email”] {
margin-bottom: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/___________________________________/
.container {
border-top: 2px solid #aaa;
box-shadow: 0 2px 10px rgba(0,0,0,0.8);
width:288px;
height:321px;
margin:0 auto;
position:relative;
z-index:1;
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
}
.container form {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
/* Enabling 3d space for the transforms /
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/
When the forms are flipped, they will be hidden /
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/
Enabling a smooth animated transition /
-moz-transition:0.8s;
-webkit-transition:0.8s;
transition:0.8s;
}
.container.flipped .form-signin{
opacity:0;
/**
* Rotating the login form when the
* flipped class is added to the container
*/
-moz-transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}
.container.flipped #recover{
opacity:1;
/
Rotating the recover div into view /
-moz-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
.form-signin {
z-index:100;
}
/
Enabling 3d space for the transforms /
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/
When the forms are flipped, they will be hidden /
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/
Enabling a smooth animated transition /
-moz-transition:0.8s;
-webkit-transition:0.8s;
transition:0.8s;
}
#login{
background: #f3f3f3;
z-index: 100;
}
#recover:before {
/
The “Click here” tooltip /
width:100px;
height:26px;
content:’Sign in ->’;
position:absolute;
right:270px;
top:15px;
}
#login:after {
/
The “Click here” tooltip /
width:150px;
height:26px;
content:'<- Forgot password?’;
position:absolute;
right:-170px;
top:15px;
}
#recover{
background:#f3f3f3;
z-index:1;
/
Rotating the recover password form by default /
-moz-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#formContainer.flipped #login{
opacity:0;
/**
* Rotating the login form when the
* flipped class is added to the container
*/
-moz-transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}
#formContainer.flipped #recover{
opacity:1;
/
Rotating the recover div into view /
-moz-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
/
—————————-
Inputs, Buttons & Links
—————————–*/
#login .flipLink,
#recover .flipLink{
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
text-indent: -9999px;
top: 0;
width: 50px;
}
#triangle-topright {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 0;
height: 0;
border-top: 100px solid #ddd;
border-left: 100px solid transparent;
}
#triangle-topleft {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
right:auto;
left:0;
width: 0;
height: 0;
border-top: 50px solid #ddd;
border-right: 50px solid transparent;
}
#recover .flipLink{
right:auto;
left:0;
}
#forkongithub a {
box-sizing: content-box;
background:#ddd;
color:#fff;
text-decoration:none;
font-family:arial, sans-serif;
text-align:center;
font-weight:bold;
padding:5px 40px;
font-size:1rem;
line-height:2rem;
position:relative;
transition:0.5s;
}
#forkongithub a:hover {
background:#aaa;
color:#fff;
}
#forkongithub a::before, #forkongithub a::after {
content:””;
width:100%;
display:block;
position:absolute;
top:1px;
left:0;
height:1px;
background:#fff;
}
#forkongithub a::after {
bottom:1px;
top:auto;
}
@media screen and (min-width:800px){
#forkongithub {
position:absolute;
display:block;
top:0;
right:0;
width:200px;
overflow:hidden;
height:200px;
}
#forkongithub a {
width:200px;
position:absolute;
top:60px;
right:-60px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
box-shadow:2px 2px 10px rgba(0,0,0,0.8);
}
}
Javascript
(function(){
// Checking for CSS 3D transformation support
.support.css3d = supportsCSS3D();
var formContainer = (‘#formContainer’);
// Listening for clicks on the ribbon links
(‘.flipLink’).click(function(e){
// Flipping the forms
formContainer.toggleClass(‘flipped’);
// If there is no CSS3 3D support, simply
// hide the login form (exposing the recover one)
if(!.support.css3d){(‘#login’).toggle();
}
e.preventDefault();
});
formContainer.find(‘form’).submit(function(e){
// Preventing form submissions. If you implement
// a backend, you might want to remove this code
e.preventDefault();
});
// A helper function that checks for the
// support of the 3D CSS3 transformations.
function supportsCSS3D() {
var props = [
‘perspectiveProperty’, ‘WebkitPerspective’, ‘MozPerspective’
], testDom = document.createElement(‘a’);
for(var i=0; i<props.length; i++){
if(props[i] in testDom.style){
return true;
}
}
return false;
}
});

<a href="http://bootsnipp.com/snippets/featured/login-form-with-css-3d-transforms" target="_blank" rel="noopener">Source</a>

4、Iron Man Style Login Form

<br />



<a href="https://www.361way.com/wp-content/uploads/2015/05/bootstrap-login4.png"><img src="https://www.361way.com/wp-content/uploads/2015/05/bootstrap-login4.png" alt="bootstrap-login4" width="529" height="363" class="alignnone size-full wp-image-4458" /></a>



Create a login form like in the Iron Man movie, make sure your visitors surprised with this style.<a href="http://codepen.io/hugo/pen/ypcqb" target="_blank" rel="noopener">Demo and Source code</a>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注