diseño de formularios con css

DISEO DE FORMULARIOS CON CSShttp://itechnode.com/20-disenos-de-formularios-con-cssHTML

Flat 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

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

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

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

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

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();

diseño de formularios con css

Documents