Diseño de Formularios Con Css

DISEO DE FORMULARIOS CON CSS
http://itechnode.com/20-disenos-de-formularios-con-css
HTML
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>Flat Login</title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1">


</head>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
<a href="#login" class="active">Login</a>
</li>
<li>
<a href="#register">Register</a>
</li>
<li>
<a href="#reset">Reset Password</a>
</li>
</ul>
<div id="login" class="form-action show">
<h1>Login on webapp</h1>
<p>
Morbi leo risus, porta ac consectetur ac, vestibulum at
eros.
Maecenas sed diam eget risus varius bladit sit amet
non
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
<input type="password"
placeholder="Password" />
</li>
<li>
<input type="submit" value="Login"

class="button" />
</li>
</ul>
</form>
</div>

<div id="register" class="form-action hide">
<h1>Register</h1>
<p>
You should totally sign up for our super awesome
service.
It's what all the cool kids are doing nowadays.
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
placeholder="Password" />
</li>
<li>
<input type="submit" value="Sign Up"
class="button" />
</li>
</ul>
</form>
</div>

<div id="reset" class="form-action hide">
<h1>Reset Password</h1>
<p>
To reset your password enter your email and your
birthday
and we'll send you a link to reset your password.
</p>
<form>
<ul>
<li>
<input type="text" placeholder="Email" />
</li>
<li>
<input type="text" placeholder="Birthday" />
</li>
<li>
<input type="submit" value="Send"
class="button" />
</li>
</ul>
</form>
</div>

</div>
</div>
<script class="cssdeck"
src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></s
cript>
</body>
</html>
CSS
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyerreset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 390px;
height: 340px;
position: relative;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid @tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
}
:-ms-input-placeholder {
color: #e74c3c;
}
JAVASCRIPT
(function( $ ) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$( '.tabs' ).on( 'click', 'li a', function(e){
e.preventDefault();
var $tab = $( this ),
href = $tab.attr( 'href' );
$( '.active' ).removeClass( ACTIVE_CLASS );
$tab.addClass( ACTIVE_CLASS );
$( '.show' )
.removeClass( SHOW_CLASS )
.addClass( HIDE_CLASS )
.hide();
$(href)
.removeClass( HIDE_CLASS )
.addClass( SHOW_CLASS )
.hide()
.fadeIn( 550 );
});
})( jQuery );
http://cssdeck.com/labs/flat-ui-login-form
HTML5/CSS3
HTML
<!DOCTYPE html>



 <html lang="en"> 

<head>
<title>Paper Stack</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<section id="content">
<form action="">
<h1>Login Form</h1>
<div>
<input type="text" placeholder="Username"
required="" id="username" />
</div>
<div>
placeholder="Password" required="" id="password" />
</div>
<div>
<input type="submit" value="Log in" />
<a href="#">Lost your password?</a>
<a href="#">Register</a>
</div>
</form>

<div class="button">
<a href="#">Download source file</a>
</div>
</section>
</div>
</body>
</html>
CSS
/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
background: #DCDDDF
url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
color: #000;
font: 14px Arial;
margin: 0 auto;
padding: 0;
position: relative;
}
h1{ font-size:28px;}
h1,h2,h3,h4,h5,h6{ color:#563D64;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
form:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container { margin: 25px auto; position: relative; width: 900px; }
#content {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1)
0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top,
rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1)
0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1)
0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1)
0%,rgba(249,249,249,1) 100%);
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f
8', endColorstr='#f9f9f9',GradientType=0 );
-webkit-box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow: 0 1px 0 #fff inset;
-ms-box-shadow: 0 1px 0 #fff inset;
-o-box-shadow: 0 1px 0 #fff inset;
box-shadow: 0 1px 0 #fff inset;
border: 1px solid #c4c6ca;
margin: 0 auto;
padding: 25px 0 0;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 400px;
}
#content h1 {
color: #7E7E7E;
font: bold 25px Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
line-height: 20px;
margin: 10px 0 30px;
}
#content h1:before,
#content h1:after {
content: "";
height: 1px;
position: absolute;
top: 10px;
width: 27%;
}
#content h1:after {
background: rgb(126,126,126);
background: -moz-linear-gradient(left, rgba(126,126,126,1)
0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left,
rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(126,126,126,1)
0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(126,126,126,1)
0%,rgba(255,255,255,1) 100%);
background: linear-gradient(left, rgba(126,126,126,1)
0%,rgba(255,255,255,1) 100%);
right: 0;
}
#content h1:before {
background: -moz-linear-gradient(right, rgba(126,126,126,1)
0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(right,
rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(right, rgba(126,126,126,1)
0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(right, rgba(126,126,126,1)
0%,rgba(255,255,255,1) 100%);
background: linear-gradient(right, rgba(126,126,126,1)
0%,rgba(255,255,255,1) 100%);
left: 0;
}
#content:after,
#content:before {
background: #f9f9f9;
0%, rgba(249,249,249,1) 100%);
rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
0%,rgba(249,249,249,1) 100%);
0%,rgba(249,249,249,1) 100%);
0%,rgba(249,249,249,1) 100%);
filter:
8', endColorstr='#f9f9f9',GradientType=0 );
border: 1px solid #c4c6ca;
content: "";
display: block;
height: 100%;
left: -1px;
position: absolute;
width: 100%;
}
#content:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
top: 0;
z-index: -1;
}
#content:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
top: 0;
z-index: -2;
}
#content form { margin: 0 20px; position: relative }
#content form input[type="text"],
#content form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08)
inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08)
inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08)
inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #eae7e7
url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) norepeat;
border: 1px solid #c8c8c8;
color: #777;
font: 13px Helvetica, Arial, sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 80%;
}
#content form input[type="text"]:focus,
#content form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #ed1c24 inset;
-moz-box-shadow: 0 0 2px #ed1c24 inset;
-ms-box-shadow: 0 0 2px #ed1c24 inset;

-o-box-shadow: 0 0 2px #ed1c24 inset;
box-shadow: 0 0 2px #ed1c24 inset;
background-color: #fff;
border: 1px solid #ed1c24;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#content form input[type="submit"] {
0%, rgba(254,193,81,1) 100%);
rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
0%,rgba(254,193,81,1) 100%);
0%,rgba(254,193,81,1) 100%);
0%,rgba(254,193,81,1) 100%);
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee7
9a', endColorstr='#fec151',GradientType=0 );
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;

-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
border: 1px solid #D69E31;
color: #85592e;
cursor: pointer;
float: left;
font: bold 15px Helvetica, Arial, sans-serif;
height: 35px;
margin: 20px 0 35px 15px;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
width: 120px;
}
#content form input[type="submit"]:hover {
0%, rgba(254,231,154,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,193,81,1)
0%,rgba(254,231,154,1) 100%);
0%,rgba(254,231,154,1) 100%);
0%,rgba(254,231,154,1) 100%);
0%,rgba(254,231,154,1) 100%);
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec1
51', endColorstr='#fee79a',GradientType=0 );
}
#content form div a {
color: #004a80;
float: right;
font-size: 12px;
margin: 30px 15px 0 0;
text-decoration: underline;
}
.button {
0%, rgba(240,240,240,1) 100%);
rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
0%,rgba(240,240,240,1) 100%);
0%,rgba(240,240,240,1) 100%);
0%,rgba(240,240,240,1) 100%);
filter:
a', endColorstr='#f0f0f0',GradientType=0 );
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid #CFD5D9;

padding: 15px 0;
}
.button a {
background:
url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0
-112px no-repeat;
color: #7E7E7E;
font-size: 17px;
padding: 2px 0 2px 40px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.button a:hover {
background-position: 0 -135px;
color: #00aeef;
}
http://cssdeck.com/labs/login-form-using-html5-and-css3
HTML
<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>
CSS
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@font-face{
src:url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictosregular-webfont.ttf") format("truetype"),
url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictosregular-webfont.otf") format("opentype"),
url("http://dl.dropbox.com/u/94346812/cssdeck/fonts/pictosregular-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-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;
}
#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;
/*text-shadow:0 -1px 0 #000;*/
}
#option a{
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 {
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;
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;
}
input::-webkit-validation-bubble-icon {
display: none;
}
input::-webkit-validation-bubble-arrow {
border:0;
width:10px;
height:10px;
position:absolute;
margin:-23px 178px;
}*/
http://cssdeck.com/labs/minimal-style-login-form
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Al3xis</title>


<link rel="stylesheet" href="assets/css/styles.css" />

</head>
<body>
<div id="main">
<h1>Sign up, it's FREE!</h1>
<form class="" method="post" action="">
<div class="row email">

<input type="text" id="email" name="email"
placeholder="Email" />
</div>
<div class="row pass">

<input type="password" id="password1"
name="password1" placeholder="Password" />
</div>
<div class="row pass">

<input type="password" id="password2"
name="password2" placeholder="Password (repeat)"
disabled="true" />
</div>


<div class="arrowCap"></div>
<div class="arrow"></div>
<p class="meterText">Password Meter</p>
<input type="submit" value="Register" />
</form>
</div>
<footer>
<a class="al3xis"> a form with password meter and pass

validation </a>
</footer>

<script src="http://code.jquery.com/jquery1.7.2.min.js"></script>
</body>
</html>
CSS
/*------------------------Simple reset
--------------------------*/
*{
margin:0;
padding:0;
}
/*------------------------General Styles
--------------------------*/
html{
background:url('http://i34.tinypic.com/m922bk.jpg') repeat
center top #826e79;
}
body{
font:14px/1.3 'Segoe UI', 'Arial', sans-serif;
}
a, a:visited {
outline:none;
color:#1c4f64;
}
a:hover{
text-decoration:none;
}
section, footer, header{

display: block;
}
/*---------------------------The Header
-----------------------------*/
h1{
font:bold 36px Cambria, "Hoefler Text",serif;
margin-bottom:50px;
color:#71564b;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
}
/*---------------------------The Form
-----------------------------*/
#main{
width:440px;
margin:80px auto 120px;
position:relative;
text-align:center;
}
#main form{
width:440px;
height:450px;
background:url('http://i33.tinypic.com/24eng8x.png') norepeat;
padding-top: 50px;
}
#main form .row{

position:relative;
}
#main form .row.error:after,

#main form .row.success:after{
content:'';
position:absolute;
right: 60px;
top: 8px;
width:32px;
height:32px;
background:url('http://i38.tinypic.com/33c4s9c.png') norepeat;
}
#main form .row.error:after{

background-position: 0 -79px;
}
#main form input[type=text],

#main form input[type=password]{
border:none;
background:url('http://i34.tinypic.com/2qm0ndc.png') norepeat top left;
font:14px 'Segoe UI','Arial',sans-serif;
color:#888;
outline:none;
height: 48px;
margin: 0 auto 22px;
padding: 0 10px 0 50px;
width: 278px;
}
#main form input[disabled]{

opacity: 0.5;
}
#main form .email input{

background-position:0 0;
}
#main form .email input:focus{

background-position:0 -48px;
}
#main form .pass input{

}
#main form .pass input:focus{

/*---------------------------The Submit Button

-----------------------------*/
#main form input[type=submit]{
border: 1px solid #004C9B;

border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px
rgba(0, 0, 0, 0.3);
color: #D3EBFF;
cursor: pointer;
display: block;
font: bold 24px Cambria,"Hoefler Text",serif;
margin: 230px auto 0;
padding: 10px;
text-shadow: 0 -1px 0 #444444;
width: 410px;
background-color:#0496DA;
background-image: linear-gradient(top, #0496DA 0%,

#0067CD 100%);
background-image: -o-linear-gradient(top, #0496DA 0%,
#0067CD 100%);
background-image: -moz-linear-gradient(top, #0496DA 0%,

#0067CD 100%);
background-image: -webkit-linear-gradient(top, #0496DA 0%,
#0067CD 100%);
background-image: -ms-linear-gradient(top, #0496DA 0%,
#0067CD 100%);
}
#main form input[type=submit]:hover{
background-color:#0383d3;
background-image: linear-gradient(top, #0383d3 0%,

#004c9b 100%);
background-image: -o-linear-gradient(top, #0383d3 0%,
#004c9b 100%);
background-image: -moz-linear-gradient(top, #0383d3 0%,
#004c9b 100%);
background-image: -webkit-linear-gradient(top, #0383d3 0%,
#004c9b 100%);
background-image: -ms-linear-gradient(top, #0383d3 0%,
#004c9b 100%);
}
#main form input[type=submit]:active{
background-color:#026fcb;
background-image: linear-gradient(top, #026fcb 0%, #004c9b

100%);
background-image: -o-linear-gradient(top, #026fcb 0%,
#004c9b 100%);
background-image: -moz-linear-gradient(top, #026fcb 0%,

#004c9b 100%);
background-image: -webkit-linear-gradient(top, #026fcb 0%,
#004c9b 100%);
background-image: -ms-linear-gradient(top, #026fcb 0%,
#004c9b 100%);
}
/*---------------------------The Arrow
-----------------------------*/
#main form .arrow{

background: url("http://i33.tinypic.com/14txydw.jpg") no-repeat
-10px 0;
height: 120px;
left: 214px;
position: absolute;
top: 392px;
width: 11px;
/* Defining a smooth CSS3 animation for turning the arrow */
-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
/* Putting the arrow in its initial position */
-moz-transform: rotate(-134deg);
-webkit-transform: rotate(-134deg);
-o-transform: rotate(-134deg);
-ms-transform: rotate(-134deg);
transform: rotate(-134deg);
}
#main form .arrowCap{

background: url("http://i33.tinypic.com/14txydw.jpg") norepeat -43px 0;
height: 20px;
left: 208px;
position: absolute;
top: 443px;
width: 20px;
z-index: 10;
}
#main form .meterText{

color: #575757;
font-size: 10px;
left: 189px;
line-height: 1.1;
position: absolute;
top: 485px;
width: 60px;
/*---------------------------The Footer
-----------------------------*/
footer{
font:14px/1.3 'Segoe UI',Arial, sans-serif;
background-color: #111111;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
height: 45px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000;
}
footer h2{
color: #EEEEEE;
font-size: 14px;
font-weight: normal;
left: 50%;
margin-left: -400px;
padding: 13px 0 0;
position: absolute;
width: 540px;
}
footer h2 i{
font-style:normal;
color:#888;
}
footer a.al3xis,a.al3xis:visited{
color: #999999;
font-size: 12px;
left: 50%;
margin: 16px 0 0 110px;
position: absolute;
top: 0;
}
footer a i{
color:#ccc;
font-style: normal;
}
footer a i b{
color:#c92020;
font-weight: normal;
}
JAVASCRIPT
$(function(){
var pass1 = $('#password1'),

pass2 = $('#password2'),
email = $('#email'),
form = $('#main form'),
arrow = $('#main .arrow');
// Empty the fields on load

$('#main .row input').val('');
// Handle form submissions

form.on('submit',function(e){
// Is everything entered correctly?

if($('#main .row.success').length == $('#main
.row').length){
// Yes!
alert("Thank you for trying out this demo!");

e.preventDefault(); // Remove this to allow actual
submission
}
else{
// No. Prevent form submission

e.preventDefault();
}
});
// Validate the email field

email.on('blur',function(){
// Very simple validation

if (!/^\S+@\S+\.\S+$/.test(email.val())){
email.parent().addClass('error').removeClass('success');
}
else{
email.parent().removeClass('error').addClass('success');
}
});
// Use the complexify plugin on the first password field
pass1.complexify({minimumChars:6,
strengthScaleFactor:0.7}, function(valid, complexity){
if(valid){
pass2.removeAttr('disabled');
pass1.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.attr('disabled','true');
pass1.parent()
.removeClass('success')
.addClass('error');
}
var calculated = (complexity/100)*268 - 134;

var prop = 'rotate('+(calculated)+'deg)';
// Rotate the arrow

arrow.css({
'-moz-transform':prop,
'-webkit-transform':prop,
'-o-transform':prop,
'-ms-transform':prop,
'transform':prop
});
});
// Validate the second password field

pass2.on('keydown input',function(){
// Make sure its value equals the first's

if(pass2.val() == pass1.val()){
pass2.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.parent()
.removeClass('success')
.addClass('error');
}
});
});
//jquery complexify.js script
/*
http://github.com/danpalmer/jquery.complexify.js
This code is distributed under the WTFPL v2:

*/
(function ($) {
$.fn.extend({
complexify: function(options, callback) {
var MIN_COMPLEXITY = 49; // 12 chars with Upper,

Lower and Number
var MAX_COMPLEXITY = 120; // 25 chars, all
charsets
var CHARSETS = [
// Commonly Used
////////////////////
[0x0030, 0x0039], // Numbers
[0x0041, 0x005A], // Uppercase
[0x0061, 0x007A], // Lowercase
[0x0021, 0x002F], // Punctuation
[0x003A, 0x0040], // Punctuation
[0x005B, 0x0060], // Punctuation
[0x007B, 0x007E], // Punctuation
// Everything Else
////////////////////
[0x0080, 0x00FF], // Latin-1 Supplement
[0x0100, 0x017F], // Latin Extended-A
[0x0180, 0x024F], // Latin Extended-B
[0x0250, 0x02AF], // IPA Extensions
[0x02B0, 0x02FF], // Spacing Modifier Letters
[0x0300, 0x036F], // Combining Diacritical
Marks
[0x0370, 0x03FF], // Greek
[0x0400, 0x04FF], // Cyrillic
[0x0530, 0x058F], // Armenian
[0x0590, 0x05FF], // Hebrew
[0x0600, 0x06FF], // Arabic

[0x0700, 0x074F], // Syriac
[0x0780, 0x07BF], // Thaana
[0x0900, 0x097F], // Devanagari
[0x0980, 0x09FF], // Bengali
[0x0A00, 0x0A7F], // Gurmukhi
[0x0A80, 0x0AFF], // Gujarati
[0x0B00, 0x0B7F], // Oriya
[0x0B80, 0x0BFF], // Tamil
[0x0C00, 0x0C7F], // Telugu
[0x0C80, 0x0CFF], // Kannada
[0x0D00, 0x0D7F], // Malayalam
[0x0D80, 0x0DFF], // Sinhala
[0x0E00, 0x0E7F], // Thai
[0x0E80, 0x0EFF], // Lao
[0x0F00, 0x0FFF], // Tibetan
[0x1000, 0x109F], // Myanmar
[0x10A0, 0x10FF], // Georgian
[0x1100, 0x11FF], // Hangul Jamo
[0x1200, 0x137F], // Ethiopic
[0x13A0, 0x13FF], // Cherokee
[0x1400, 0x167F], // Unified Canadian
Aboriginal Syllabics
[0x1680, 0x169F], // Ogham
[0x16A0, 0x16FF], // Runic
[0x1780, 0x17FF], // Khmer
[0x1800, 0x18AF], // Mongolian
[0x1E00, 0x1EFF], // Latin Extended
Additional
[0x1F00, 0x1FFF], // Greek Extended

[0x2000, 0x206F], // General Punctuation
[0x2070, 0x209F], // Superscripts and
Subscripts
[0x20A0, 0x20CF], // Currency Symbols
[0x20D0, 0x20FF], // Combining Marks for
Symbols
[0x2100, 0x214F], // Letterlike Symbols
[0x2150, 0x218F], // Number Forms
[0x2190, 0x21FF], // Arrows
[0x2200, 0x22FF], // Mathematical Operators
[0x2300, 0x23FF], // Miscellaneous Technical
[0x2400, 0x243F], // Control Pictures
[0x2440, 0x245F], // Optical Character
Recognition
[0x2460, 0x24FF], // Enclosed Alphanumerics
[0x2500, 0x257F], // Box Drawing
[0x2580, 0x259F], // Block Elements
[0x25A0, 0x25FF], // Geometric Shapes
[0x2600, 0x26FF], // Miscellaneous Symbols
[0x2700, 0x27BF], // Dingbats
[0x2800, 0x28FF], // Braille Patterns
[0x2E80, 0x2EFF], // CJK Radicals Supplement
[0x2F00, 0x2FDF], // Kangxi Radicals
[0x2FF0, 0x2FFF], // Ideographic Description
Characters
[0x3000, 0x303F], // CJK Symbols and
Punctuation
[0x3040, 0x309F], // Hiragana
[0x30A0, 0x30FF], // Katakana
[0x3100, 0x312F], // Bopomofo

[0x3130, 0x318F], // Hangul Compatibility
Jamo
[0x3190, 0x319F], // Kanbun
[0x31A0, 0x31BF], // Bopomofo Extended
[0x3200, 0x32FF], // Enclosed CJK Letters and
Months
[0x3300, 0x33FF], // CJK Compatibility
[0x3400, 0x4DB5], // CJK Unified Ideographs
Extension A
[0x4E00, 0x9FFF], // CJK Unified Ideographs
[0xA000, 0xA48F], // Yi Syllables
[0xA490, 0xA4CF], // Yi Radicals
[0xAC00, 0xD7A3], // Hangul Syllables
[0xD800, 0xDB7F], // High Surrogates
[0xDB80, 0xDBFF], // High Private Use
Surrogates
[0xDC00, 0xDFFF], // Low Surrogates
[0xE000, 0xF8FF], // Private Use
[0xF900, 0xFAFF], // CJK Compatibility
Ideographs
[0xFB00, 0xFB4F], // Alphabetic Presentation
Forms
[0xFB50, 0xFDFF], // Arabic Presentation
Forms-A
[0xFE20, 0xFE2F], // Combining Half Marks
[0xFE30, 0xFE4F], // CJK Compatibility Forms
[0xFE50, 0xFE6F], // Small Form Variants
[0xFE70, 0xFEFE], // Arabic Presentation
Forms-B
[0xFEFF, 0xFEFF], // Specials
[0xFF00, 0xFFEF], // Halfwidth and Fullwidth

Forms
[0xFFF0, 0xFFFD] // Specials
];
var defaults = {
minimumChars: 8,
strengthScaleFactor: 1
};
if($.isFunction(options) && !callback) {
callback = options;
options = {};
}
options = $.extend(defaults, options);
function additionalComplexityForCharset(str,
charset) {
for (var i = str.length - 1; i >= 0; i--) {
if (charset[0] <= str.charCodeAt(i) &&
str.charCodeAt(i) <= charset[1]) {
return charset[1] - charset[0] + 1;
};
}; return 0;
};
return this.each(function () {
$(this).keyup(function () {
var password = $(this).val();
var complexity = 0, valid = false;
for (var i = CHARSETS.length - 1; i >=

0; i--) {
complexity +=
additionalComplexityForCharset(password, CHARSETS[i]);
}
// Use natural log to produce linear

scale
complexity =
Math.log(Math.pow(complexity, password.length)) *
(1/options.strengthScaleFactor);
valid = (complexity > MIN_COMPLEXITY

&& password.length >= options.minimumChars);
// Scale to percentage, so it can be

used for a progress bar
complexity = (complexity /
MAX_COMPLEXITY) * 100;
complexity = (complexity > 100) ? 100 :
complexity;
callback.call(this, valid, complexity);

});
});
}
});
})(jQuery);
http://cssdeck.com/labs/yze3ymgf
HTML
<!doctype html>
<html lang="en-US">
<head>
<title>Login</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?

family=Varela+Round">

</head>
<body>
<div id="login">
<h2><span class="fontawesome-lock"></span>Sign
In</h2>
<form action="javascript:void(0);" method="POST">
<fieldset>
<p><label for="email">E-mail
address</label></p>
<p><input type="email" id="email"
value="mail@address.com"
onBlur="if(this.value=='')this.value='mail@address.com'"
onFocus="if(this.value=='mail@address.com')this.value=''"></p>

<p><label
for="password">Password</label></p>
<p><input type="password" id="password"
value="password" onBlur="if(this.value=='')this.value='password'"
onFocus="if(this.value=='password')this.value=''"></p> 
<p><input type="submit" value="Sign

In"></p>
</fieldset>
</form>
</div> 
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */

/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* ---------- ERIC MEYER'S RESET CSS ---------- */

/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
body {
background-color: #C0C0C0;
color: #000;
font-family: "Varela Round", Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-appearance: none;
}
/* ---------- LOGIN ---------- */
#login {
margin: 50px auto;
width: 400px;
}
#login h2 {
background-color: #f95252;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
color: #fff;
font-size: 28px;
padding: 20px 26px;
}
#login h2 span[class*="fontawesome-"] {
margin-right: 14px;
}
#login fieldset {
background-color: #fff;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;

padding: 20px 26px;
}
#login fieldset p {
color: #777;
}
#login fieldset p:last-child {

margin-bottom: 0;
}
#login fieldset input {

border-radius: 3px;
}
#login fieldset input[type="email"], #login fieldset

input[type="password"] {
background-color: #eee;
color: #777;
padding: 4px 10px;
width: 328px;
}
#login fieldset input[type="submit"] {

background-color: #33cc77;
color: #fff;
display: block;
margin: 0 auto;
padding: 4px 0;
width: 100px;
}
#login fieldset input[type="submit"]:hover {

background-color: #28ad63;
}
http://cssdeck.com/labs/ryn8lp74
HTML
<form>
<h1>Employer Log in</h1>
<div class="inset">
<p>
<label for="email">EMAIL ADDRESS</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="password">PASSWORD</label>
<input type="password" name="password" id="password">
</p>
<p>
<input type="checkbox" name="remember" id="remember">

<label for="remember">Remember me for 14 days</label>
</p>
</div>
<p class="p-container">
<span>Forgot password ?</span>
<input type="submit" name="go" id="go" value="Log in">
</p>
</form>
CSS
* { box-sizing: border-box; }
body {
font-family: "HelveticaNeue-Light","Helvetica Neue
Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
color:white;
font-size:12px;
background:#333 url(/images/classy_fabric.png);
}
form {
background:#111;
width:300px;
margin:30px auto;
border-radius:0.4em;
border:1px solid #191919;
overflow:hidden;
position:relative;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
form:after {
content:"";
display:block;
position:absolute;
height:1px;
width:100px;
left:20%;
background:linear-gradient(left, #111, #444, #b6b6b8, #444,
#111);
top:0;
}
form:before {
content:"";
display:block;
position:absolute;
width:8px;
height:5px;
border-radius:50%;
left:34%;
top:-7px;
box-shadow: 0 0 6px 4px #fff;

}
.inset {
padding:20px;
border-top:1px solid #19191a;
}
form h1 {
font-size:18px;
text-shadow:0 1px 0 black;
text-align:center;
padding:15px 0;
border-bottom:1px solid rgba(0,0,0,1);
position:relative;
}
form h1:after {
content:"";
display:block;
width:250px;
height:100px;
position:absolute;
top:0;
left:50px;
pointer-events:none;
transform:rotate(70deg);
background:linear-gradient(50deg, rgba(255,255,255,0.15),
rgba(0,0,0,0));
label {
color:#666;
display:block;
padding-bottom:9px;
}
input[type=text],
input[type=password] {
width:100%;
padding:8px 5px;
background:linear-gradient(#1f2124, #27292c);
border:1px solid #222;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
margin-bottom:20px;
}
label[for=remember]{
color:white;
display:inline-block;
padding-bottom:0;
padding-top:5px;
}
input[type=checkbox] {
display:inline-block;
vertical-align:top;
}
.p-container {
padding:0 20px 20px 20px;
}
.p-container:after {
clear:both;
display:table;
content:"";
}
.p-container span {
display:block;
float:left;
color:#0d93ff;
padding-top:8px;
}
input[type=submit] {
padding:5px 20px;
border:1px solid rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);

background:#0184ff;
color:white;
float:right;
font-weight:bold;
cursor:pointer;
font-size:13px;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:#27292c;
}
http://codepen.io/anon/pen/FnsKi
HTML
<div class="loginWrapper">

<form action="index.html" id="login">
<div class="loginPic">
<a href="#" title=""><img
src="http://i.imgur.com/lZBpqmM.png" alt=""></a>
<span>Helixsoft</span>
<div class="loginActions">
<div><a href="#" title="Change user" class="logleft flip"
style="left: 0px; opacity: 1;"></a></div>
<div><a href="#" title="Forgot password?"
class="logright" style="right: 0px; opacity: 1;"></a></div>
</div>
</div>
<input type="text" name="login" placeholder="Confirm your

email" class="loginEmail">
placeholder="Password" class="loginPassword">
<div class="logControl">
<div class="memory"><div class="checker" id="uniformremember1"><span><input type="checkbox" checked="checked"
class="check" id="remember1" style="opacity:
0;"></span></div><label for="remember1">Remember
me</label></div>
<input type="submit" name="submit" value="Login"
class="buttonM bBlue">
</div>
</form>


<form action="index.html" id="recover">
<div class="loginPic">
<a href="#" title=""><img
src="http://i.imgur.com/axskkd0.png" alt=""></a>
<div class="loginActions">
<div><a href="#" title="" class="logback flip"
style="left: 0px; opacity: 1;"></a></div>
<div><a href="#" title="Forgot password?"
class="logright" style="right: 0px; opacity: 1;"></a></div>
</div>
</div>
<input type="text" name="login" placeholder="Your

username" class="loginUsername">
placeholder="Password" class="loginPassword">
<div class="logControl">
<div class="memory"><div class="checker" id="uniformremember2"><span><input type="checkbox" checked="checked"
class="check" id="remember2" style="opacity:
0;"></span></div><label for="remember2">Remember
me</label></div>
<input type="submit" name="submit" value="Login"
class="buttonM bBlue">
</div>
</form>
</div>
<script class="cssdeck"
src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></s
cript>
CSS
/*Login page
==============================================
==== */
.loginWrapper { width: 240px; position: absolute; left: 50%; top:

50%; margin: -124px 0 0 -120px; text-align: center; -mozperspective: 800px; -webkit-perspective: 800px; perspective:
800px; }
/* Login hover buttons */
.logleft, .logright, .logback { background:

url(http://i.imgur.com/lcRwahc.png) no-repeat; height: 37px; width:
37px; position: absolute; top: 36px; display: block; opacity: 0; filter:
alpha(opacity=0); }
.logleft { left: 0px; background-position: 0 0; }
.logright { right: 0px; background-position: -38px 0; }
.logback { left: 0; background-position: -76px 0; }
.logleft:hover { background-position: 0 -39px; }
.logright:hover { background-position: -38px -39px; }
.logback:hover { background-position: -76px -39px; }
#login{ z-index:100; }
#recover{ z-index:1; opacity:0; filter: alpha(opacity=0); -moztransform:rotateY(180deg); -webkit-transform:rotateY(180deg);
transform:rotateY(180deg); }
.flipped #login{ opacity:0; filter: alpha(opacity=0); -moztransform:rotateY(-180deg); -webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg); }
.loginWrapper.flipped #recover{ opacity:1; filter:
alpha(opacity=100); -moz-transform:rotateY(0deg); -webkittransform:rotateY(0deg); transform:rotateY(0deg); }
.loginWrapper 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;
/* Configure a keyframe animation for Firefox */

-moz-animation: pulse 2s infinite;
/* Configure it for Chrome and Safari */

-webkit-animation: pulse 2s infinite;
}
.loginPic { text-align: center; display: block; position: relative;

overflow: hidden; }
.loginPic span { display: block; color: #5f5f5f; font-size: 14px;
margin-top: 10px; font-weight: bold; text-shadow: 0 1px 1px #ffffff;
}
.loginWrapper form { display: block; margin: 0 auto; width:
236px; }
.loginWrapper a { display: inline-block; }
.loginWrapper input[type=text], .loginWrapper
input[type=password] { font-size: 11px; color: #858585; boxshadow: 0 0 0px 2px #ebebeb; -webkit-box-shadow: 0 0 0px 2px
#ebebeb; -moz-box-shadow: 0 0 0px 2px #ebebeb; padding: 7px
27px 7px 9px; border: 1px solid #d7d7d7; width: 198px; display:
inline-block; margin-top: 15px; }
.loginUsername { background: #fbfbfb
url(http://i.imgur.com/yeEafuK.png) no-repeat 213px 7px; }
.loginPassword { background: #fbfbfb
url(http://i.imgur.com/0sxpIbn.png) no-repeat 214px 7px; }
.loginEmail { background: #fbfbfb

url(http://i.imgur.com/zI4zRWc.png) no-repeat 213px 7px; }
.logControl { margin-top: 15px; }
.logControl:after { content: ""; display: block; clear: both; }
.logControl .memory { float: left; margin-top: 5px; }
.logControl input[type=submit] { float: right; }
/* Checkboxes */
div.checker { width: 16px; height: 16px; position: relative; display:

-moz-inline-box; display: block; vertical-align: middle; zoom: 1;
float: left; margin-top: 3px; margin-right: 8px; box-shadow: 0 1px 0
#fff; -webkit-box-shadow: 0 1px 0 #fff; -moz-box-shadow: 0 1px 0
#fff; }
div.checker input { width: 16px; height: 16px; opacity: 0; filter:
alpha(opacity:0); display: inline-block; background: none; }
div.checker span { background: url(http://i.imgur.com/gAJ5G4V.png)
no-repeat 0 0; height: 16px; width: 16px; display: -moz-inline-box;
display: inline-block; text-align: center; }
div.checker span.checked { background-position: 0 -17px; }
/* Button */
.bBlue { border: 1px solid #3e76af; box-shadow: 0 1px 2px 0

#66b2d2 inset; -webkit-box-shadow: 0 1px 2px 0 #66b2d2 inset;
-moz-box-shadow: 0 1px 2px 0 #66b2d2 inset;
color:#fff;
background: #5ba5cb;
background: -moz-linear-gradient(top, #5ba5cb 0%, #3a70ab
100%);
background: -webkit-gradient(linear, left top, left bottom, colorstop(0%,#5ba5cb), color-stop(100%,#3a70ab));
background: -webkit-linear-gradient(top, #5ba5cb 0%,#3a70ab
100%);
background: -o-linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);

background: -ms-linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
background: linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ba5
cb', endColorstr='#3a70ab',GradientType=0 );
}
.bBlue:hover { opacity: 0.95; filter: alpha(opacity=95); -webkittransition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s
ease-in-out; transition: opacity 0.2s ease-in-out; }
.bBlue:active { background: #4786b8; box-shadow: 0 0 2px
#707070 inset, 0 1px 0 #fff; -webkit-box-shadow: 0 0 2px #707070
inset, 0 1px 0 #fff; -moz-box-shadow: 0 0 2px #707070 inset, 0 1px
0 #fff; }
.buttonM [class*="tablectrl"] { font-size: 11px; color: #fff; fontweight: bold; text-shadow: 0 -1px #6f6f6f; display: inline-block;
line-height: 14px; border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; }
.buttonM span { text-shadow: 0 1px 0 #6f6f6f; margin-left: 10px; }
.buttonM { padding: 7px 15px; }
.memory label{font-size:12px; position:relative;top:-18px;left:2
JAVASCRIPT
$(function(){
// Checking for CSS 3D transformation support

$.support.css3d = supportsCSS3D();
var formContainer = $('.loginWrapper');

// Listening for clicks on the ribbon links
$('.flip').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;
}
//checkbox
$('.checker').click(function(e){
$(this).children('span').toggleClass('checked');
});
});
http://cssdeck.com/labs/elvp76rk

Diseño de Formularios Con Css

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Diseño de Formularios Con Css

Загружено:

Авторское право:

Доступные форматы

DISEO DE FORMULARIOS CON CSS

<input type="submit" value="Login"

<html lang="en" class="ie7 ielt8"> <![endif]-->

<html lang="en" class="ie8"> <![endif]-->

<html lang="en">

</form>

-ms-box-shadow: 0 0 2px #ed1c24 inset;

-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;

border-top: 1px solid #CFD5D9;

rgba(181,126,181,1) 2%, rgba(181,126,181,1) 2%,

rgba(189,82,148,1) 95%, rgba(189,82,148,1) 96%,

/* Want to see the magic ? So open a webkit browser then remove

/!\ YOU NEED TO PLACE THIS IN INPUTS /!\

<h1>Sign up, it's FREE!</h1>

<form class="" method="post" action="">

<div class="row email">

<div class="row pass">

<div class="row pass">

<p class="meterText">Password Meter</p>

<input type="submit" value="Register" />

<a class="al3xis"> a form with password meter and pass

<!-- JavaScript includes - jQuery, the complexify plugin and our

section, footer, header{

#main form .row{

#main form .row.error:after,

#main form .row.error:after{

#main form input[type=text],

#main form input[disabled]{

#main form .email input{

#main form .email input:focus{

#main form .pass input{

#main form .pass input:focus{

/*---------------------------The Submit Button

#main form input[type=submit]{

border: 1px solid #004C9B;

background-image: linear-gradient(top, #0496DA 0%,

background-image: -moz-linear-gradient(top, #0496DA 0%,

#main form input[type=submit]:hover{

background-image: linear-gradient(top, #0383d3 0%,

#main form input[type=submit]:active{

background-image: linear-gradient(top, #026fcb 0%, #004c9b

background-image: -moz-linear-gradient(top, #026fcb 0%,

#main form .arrow{

/* Defining a smooth CSS3 animation for turning the arrow */

/* Putting the arrow in its initial position */

#main form .arrowCap{

#main form .meterText{

var pass1 = $('#password1'),

// Empty the fields on load

// Handle form submissions

// Is everything entered correctly?

alert("Thank you for trying out this demo!");

// No. Prevent form submission

// Validate the email field

// Very simple validation

// Use the complexify plugin on the first password field

var calculated = (complexity/100)*268 - 134;

// Rotate the arrow

// Validate the second password field

// Make sure its value equals the first's

This code is distributed under the WTFPL v2:

var MIN_COMPLEXITY = 49; // 12 chars with Upper,