[CSS] Simple y bonito formulario de ingreso.

Iniciado por Usuario Invitado, 25 Marzo 2015, 21:28 PM

0 Miembros y 1 Visitante están viendo este tema.

Usuario Invitado

Les comparto un bonito formulario de ingreso que hice para un tuto de Java EE. Me basé en éste PSD:


HTML:

Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Identfíquese</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="assets/css/login.css"/>
</head>
<body>
<div id="flogin" class="flogin">
       <section class="left-side">
           <section class="head">
               LOGIN
           </section>
           <section class="body">
               <section class="data">
                   <section class="form-group">
                       <span>Usuario:</span>
                       <section class="input-wrapper">
                           <input type="text" id="txt-username" class="txt"/>
                           <i class="fa fa-user"></i>
                       </section>
                   </section>
                   <section class="form-group">
                       <span>Contraseña:</span>
                       <section class="input-wrapper">
                           <input type="password" id="txt-password" class="txt"/>
                           <i class="fa fa-key"></i>
                       </section>
                   </section>
               </section>
               <section class="help">
                   <a href="">¿Olvidaste tu usuario o contraseña?</a>
               </section>
           </section>
       </section>
       <section id="btn-login" class="right-side">
           <i class="fa-4x fa fa-arrow-right"></i>
           <span>IR</span>
       </section>
   </div>

</body>
</html>


CSS:

Código (css) [Seleccionar]
.flogin {
   display: flex;
   justify-content: space-between;
   width: 400px;
}
.flogin > .left-side {
   background-color: #363636;
    /*background: radial-gradient(#555, #363636, #363636);*/
    box-shadow: 0px 0px 20px 20px #2e2e2e inset;
    border: 9px solid #dedede;
    border-right: none;
    border-radius: 20px 0px 0px 20px;
    width: 80%;
}
.flogin  > .right-side {
   align-items: center;
   background-color: #34B5D5;
   border: 9px solid #dedede;
   border-left: none;
   border-radius: 0px 20px 20px 0px;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   padding: 1.3rem .2rem;
   width: calc(20% - 2*.2rem - 9px);
}
.flogin > .right-side:hover {
   cursor: pointer;
}

/*********************
     LEFT SIDE
*********************/
.left-side > .head {
   border-bottom: 2px dashed #ddd;
   color: #eee;
   font-family: "segoe ui";
   margin-bottom: 20px;
   padding: .75rem 1rem;
}
.left-side > .body {
   padding: .8rem 1.35rem;
   width: calc(100% * 2*1.35rem);
}
.body > .data {
   display: flex;
   justify-content: space-between;
}
.form-group {
   width: 45%;
}
.form-group > span {
   color: #ddd;
   display: block;
   font-family: "segoe ui";
   font-size: 10pt;
   margin-bottom: 7px;
}
.form-group > .input-wrapper {
   align-items: center;
   background-color: white;
   border-radius: 5px;
   box-shadow: 0px 2px 5px 1px rgba(0,0,0,.4) inset,
       0px -1px 2px 1px rgba(0,0,0,.25) inset;
   display: flex;
   justify-content: space-between;
}
.input-wrapper > .txt {
   width: 80%;
}
.input-wrapper > i {
   color: gold;
   width: 20%;
}
.txt {
   background-color: transparent;
   border: none;
   border-radius: 5px;
   padding: .4rem .25rem;
   width: calc(80% - 2*.35rem - 2*1px);
}
.txt:focus {
   outline: none;
}
.help {
   display: flex;
   justify-content: flex-end;
}

a {
   color: #ddd;
   display: block;
   font-family: "segoe ui";
   font-size: 10pt;
   font-style: italic;
   margin-top: 20px;
   text-align: right;
   text-decoration: none;
}

/*****************
   RIGHT SIDE
*****************/
.right-side > i {
   color: #fff;
   display: block;
}
.right-side > span {
   color: #fff;
   display: block;
   font-family: "segoe ui";
   font-size: 16pt;
}


Resultado:



Saludos.
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein

EFEX

#1
Incluso podes hacerlo mas parecido



Código (css) [Seleccionar]

/* No todos usan esa fuente, pero podes utilizar las de Google Fonts y se vera igual en los demas navegadores */
@import url(http://fonts.googleapis.com/css?family=Lato:400,400italic,700);

body{
 /* Agregamos la fuente de Google Fonts */
 font-family: 'Lato', sans-serif;
 /* Agregamos las lineas repetitivas en el body sin tener que utilizar imagenes */
 background: repeating-linear-gradient(
   -55.5deg,
   #fff,
   #fff 2px,
   #eee 2px,
   #eee 4px
 );
}
.flogin{
 /* El borde es mas correspondiente si lo agregamos en su clase padre y no en .left-side y .right-side*/
 border: 9px solid rgba(221, 221, 221, .5);
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 position: relative;
 display: inline-block;
 border-radius: 20px;
}

.flogin > .left-side {
 /* Fix para los bordes */
 border-right: none;
 border-radius: 10px 0px 0px 10px;

 /* Background para .left-side */
 background: rgb(76,76,76); /* Old browsers */
 background: -moz-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 0%, rgba(17,17,17,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(76,76,76,1)), color-stop(0%,rgba(89,89,89,1)), color-stop(100%,rgba(17,17,17,1))); /* Chrome,Safari4+ */
 background: -webkit-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 0%,rgba(17,17,17,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 0%,rgba(17,17,17,1) 100%); /* Opera 12+ */
 background: -ms-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 0%,rgba(17,17,17,1) 100%); /* IE10+ */
 background: radial-gradient(ellipse at center, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 0%,rgba(17,17,17,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#111111',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.flogin  > .right-side {
 /* Fix para los bordes */
 border-left: none;
 border-radius: 0px 10px 10px 0px;
}


http://www.google.com/fonts#QuickUsePlace:quickUse
http://www.colorzilla.com/gradient-editor/
https://css-tricks.com/stripes-css/

Incluso podes dejar los iconos igual.
GITHUB 

Usuario Invitado

#2
Gracias por el aporte. Dejarlo igual no es problema, quise hacerlo parecido, por eso hasta le puse el border bottom dashed xDD También me gustaron más los íconos que encontré en font awesome ^^. Respecto a la sombra lo hice con un box shadow interno, pero también me agrada mucho tu radial gradient ^^
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein