DISEO DE FORMULARIOS CON
CSShttp://itechnode.com/20-disenos-de-formularios-con-cssHTML
Flat Login
- Login
- Register
- Reset Password
Login on webapp Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Maecenas sed diam eget risus varius bladit sit
amet non
Register You should totally sign up for our super awesome
service. It's what all the cool kids are doing nowadays.
Reset Password To reset your password enter your email and your
birthday and we'll send you a link to reset your password.
CSS@import
url(http://fonts.googleapis.com/css?family=Roboto:100);@import
url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/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; font-family:
'Roboto';}.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] { font-family: 'Roboto';}form
input[type=text],form input[type=password] { width: 100%; height:
40px; margin-bottom: 10px; 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/CSS3HTML
Paper Stack
Login FormLost your password?RegisterDownload source file
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;}h2{ font-size:26px;}h3{
font-size:18px;}h4{ font-size:16px;}h5{ font-size:14px;}h6{
font-size:12px;}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='#f8f8f8', 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: rgb(126,126,126);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;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='#f8f8f8', 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)
no-repeat;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"] {background: rgb(254,231,154);background:
-moz-linear-gradient(top, rgba(254,231,154,1) 0%,
rgba(254,193,81,1) 100%);background: -webkit-linear-gradient(top,
rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);background:
-o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1)
100%);background: -ms-linear-gradient(top, rgba(254,231,154,1)
0%,rgba(254,193,81,1) 100%);background: linear-gradient(top,
rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#fee79a', endColorstr='#fec151',GradientType=0
);-webkit-border-radius: 30px;-moz-border-radius:
30px;-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 {background: rgb(254,193,81);background:
-moz-linear-gradient(top, rgba(254,193,81,1) 0%,
rgba(254,231,154,1) 100%);background: -webkit-linear-gradient(top,
rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);background:
-o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1)
100%);background: -ms-linear-gradient(top, rgba(254,193,81,1)
0%,rgba(254,231,154,1) 100%);background: linear-gradient(top,
rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#fec151', endColorstr='#fee79a',GradientType=0
);}#content form div a {color: #004a80; float: right; font-size:
12px; margin: 30px 15px 0 0; text-decoration: underline;}.button
{background: rgb(247,249,250);background: -moz-linear-gradient(top,
rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);background:
-webkit-linear-gradient(top, rgba(247,249,250,1)
0%,rgba(240,240,240,1) 100%);background: -o-linear-gradient(top,
rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);background:
-ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1)
100%);background: linear-gradient(top, rgba(247,249,250,1)
0%,rgba(240,240,240,1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f7f9fa', 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;text-decoration: none;-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
pk
Sign in forgot?
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;}*/
http://cssdeck.com/labs/minimal-style-login-form
HTML
Al3xis
Sign up, it's FREE! Password Meter a form with password meter
and pass validation
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')
no-repeat;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')
no-repeat;}
#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')
no-repeat 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{background-position:0 -96px;}
#main form .pass input:focus{background-position:0 -144px;}
/*----------------------------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") no-repeat -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;text-decoration: none;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 submissionsform.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
submissione.preventDefault();}});// Validate the email
fieldemail.on('blur',function(){// Very simple validationif
(!/^\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
fieldpass1.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
arrowarrow.css({'-moz-transform':prop,'-webkit-transform':prop,'-o-transform':prop,'-ms-transform':prop,'transform':prop});});//
Validate the second password fieldpass2.on('keydown
input',function(){// Make sure its value equals the
first'sif(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
Numbervar MAX_COMPLEXITY = 120; // 25 chars, all charsetsvar
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] MIN_COMPLEXITY
&& password.length >= options.minimumChars);
// Scale to percentage, so it can be used for a progress
barcomplexity = (complexity / MAX_COMPLEXITY) * 100;complexity =
(complexity > 100) ? 100 : complexity;
callback.call(this, valid, complexity);});});}});
})(jQuery);
http://cssdeck.com/labs/yze3ymgf
HTML
Login
Sign In
E-mail address
Password
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;margin-bottom: 14px;}
#login fieldset p:last-child {margin-bottom: 0;}
#login fieldset input {-webkit-border-radius:
3px;-moz-border-radius: 3px;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
Employer Log in EMAIL ADDRESS PASSWORD Remember me for 14 days
Forgot password ?
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);
border-radius:0.3em; 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); border-radius:0.3em; 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
Helixsoft Remember me Remember me
CSS/*Login page
================================================== */
.loginWrapper { width: 240px; position: absolute; left: 50%;
top: 50%; margin: -124px 0 0 -120px; text-align: center;
-moz-perspective: 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);
-moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg);
transform:rotateY(180deg); }.flipped #login{ opacity:0; filter:
alpha(opacity=0); -moz-transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg); transform:rotateY(-180deg);
}.loginWrapper.flipped #recover{ opacity:1; filter:
alpha(opacity=100); -moz-transform:rotateY(0deg);
-webkit-transform: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; box-shadow: 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,
color-stop(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='#5ba5cb', endColorstr='#3a70ab',GradientType=0
);}.bBlue:hover { opacity: 0.95; filter: alpha(opacity=95);
-webkit-transition: 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;
font-weight: 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
formsformContainer.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