Best Bootstrap Login Form Style

2015年5月26日 发表评论 阅读评论

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

A few weeks ago I made a post about the login form style using CSS.Now, I find the CSS login form with bootstrap. We know, bootstrap is most CSS fraemwork  used on the planet. I am 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. 

1. Parallax Login form with Bootstrap

bootstrap-login1

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

HTML code

<script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script>
<!-- This is a very simple parallax effect achieved by simple CSS 3 multiple backgrounds, made by http://twitter.com/msurguy -->
<div class="container">
    <div class="row vertical-offset-100">
    	<div class="col-md-4 col-md-offset-4">
    		<div class="panel panel-default">
			  	<div class="panel-heading">
			    	<h3 class="panel-title">Please sign in</h3>
			 	</div>
			  	<div class="panel-body">
			    	<form accept-charset="UTF-8" role="form">
                    <fieldset>
			    	  	<div class="form-group">
			    		    <input class="form-control" placeholder="E-mail" name="email" type="text">
			    		</div>
			    		<div class="form-group">
			    			<input class="form-control" placeholder="Password" name="password" type="password" value="">
			    		</div>
			    		<div class="checkbox">
			    	    	<label>
			    	    		<input name="remember" type="checkbox" value="Remember Me"> Remember Me
			    	    	</label>
			    	    </div>
			    		<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
			    	</fieldset>
			      	</form>
			    </div>
			</div>
		</div>
	</div>
</div>

CSS

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;
}

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 msurguy Source. / Demo

2. Full Screen Login Form with Bootstrap

bootstrap-login2

HTML Code

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="pr-wrap">
                <div class="pass-reset">
                    <label>
                        Enter the email you signed up with</label>
                    <input type="email" placeholder="Email" />
                    <input type="submit" value="Submit" class="pass-reset-submit btn btn-success btn-sm" />
                </div>
            </div>
            <div class="wrap">
                <p class="form-title">
                    Sign In</p>
                <form class="login">
                <input type="text" placeholder="Username" />
                <input type="password" placeholder="Password" />
                <input type="submit" value="Sign In" class="btn btn-success btn-sm" />
                <div class="remember-forgot">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" />
                                    Remember Me
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 forgot-pass-content">
                            <a href="javascription:void(0)" class="forgot-pass">Forgot Password</a>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
    <div class="posted-by">Posted By: <a href="http://www.jquery2dotnet.com">Bhaumik Patel</a></div>
</div>

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%;
}

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");
    });
});

Demo

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

bootstrap-login3

This snippet will give a flip 3D effect, check this demo and read the code.

<div class="container">
	<div class="row">
    	<div class="container" id="formContainer">
          <form class="form-signin" id="login" role="form">
            <h3 class="form-signin-heading">Please sign in</h3>
            <a href="#" id="flipToRecover" class="flipLink">
              <div id="triangle-topright"></div>
            </a>
            <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email address" required autofocus>
            <input type="password" class="form-control" name="loginPass" id="loginPass" placeholder="Password" required>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
          <form class="form-signin" id="recover" role="form">
            <h3 class="form-signin-heading">Enter email address</h3>
            <a href="#" id="flipToLogin" class="flipLink">
              <div id="triangle-topleft"></div>
            </a>
            <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email address" required autofocus>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Recover password</button>
          </form>
        </div> <!-- /container -->
	</div>
</div>
====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;
 }
});

Source

4、Iron Man Style Login Form

bootstrap-login4

Create a login form like in the Iron Man movie, make sure your visitors surprised with this style.Demo and Source code




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

分类: http/html/web 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.