Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Usuario Invitado en 25 Marzo 2015, 21:28 pm


Título: [CSS] Simple y bonito formulario de ingreso.
Publicado por: Usuario Invitado en 25 Marzo 2015, 21:28 pm
Les comparto un bonito formulario de ingreso que hice para un tuto de Java EE. Me basé en éste PSD:

(http://i.imgur.com/RBrvMGd.png)

HTML:

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  4. 	<meta charset="UTF-8"/>
  5. 	<title>Identfíquese</title>
  6. 	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
  7. 	<link rel="stylesheet" href="assets/css/login.css"/>
  8. </head>
  10. 	<div id="flogin" class="flogin">
  11.         <section class="left-side">
  12.             <section class="head">
  13.                 LOGIN
  14.             </section>
  15.             <section class="body">
  16.                 <section class="data">
  17.                     <section class="form-group">
  18.                         <span>Usuario:</span>
  19.                         <section class="input-wrapper">
  20.                             <input type="text" id="txt-username" class="txt"/>
  21.                             <i class="fa fa-user"></i>
  22.                         </section>
  23.                     </section>
  24.                     <section class="form-group">
  25.                         <span>Contraseña:</span>
  26.                         <section class="input-wrapper">
  27.                             <input type="password" id="txt-password" class="txt"/>
  28.                             <i class="fa fa-key"></i>
  29.                         </section>
  30.                     </section>
  31.                 </section>
  32.                 <section class="help">
  33.                     <a href="">¿Olvidaste tu usuario o contraseña?</a>
  34.                 </section>
  35.             </section>
  36.         </section>
  37.         <section id="btn-login" class="right-side">
  38.             <i class="fa-4x fa fa-arrow-right"></i>
  39.             <span>IR</span>
  40.         </section>
  41.     </div>
  42.  
  43. </body>
  44. </html>

CSS:

Código
  1. .flogin {
  2.     display: flex;
  3.     justify-content: space-between;
  4.     width: 400px;
  5. }
  6. .flogin > .left-side {
  7.     background-color: #363636;
  8.     /*background: radial-gradient(#555, #363636, #363636);*/
  9.     box-shadow: 0px 0px 20px 20px #2e2e2e inset;
  10.     border: 9px solid #dedede;
  11.     border-right: none;
  12.     border-radius: 20px 0px 0px 20px;
  13.     width: 80%;
  14. }
  15. .flogin  > .right-side {
  16.     align-items: center;
  17.     background-color: #34B5D5;
  18.     border: 9px solid #dedede;
  19.     border-left: none;
  20.     border-radius: 0px 20px 20px 0px;
  21.     display: flex;
  22.     flex-flow: column nowrap;
  23.     justify-content: space-between;
  24.     padding: 1.3rem .2rem;
  25.     width: calc(20% - 2*.2rem - 9px);
  26. }
  27. .flogin > .right-side:hover {
  28.     cursor: pointer;
  29. }
  30.  
  31. /*********************
  32.       LEFT SIDE
  33. *********************/
  34. .left-side > .head {
  35.     border-bottom: 2px dashed #ddd;
  36.     color: #eee;
  37.     font-family: "segoe ui";
  38.     margin-bottom: 20px;
  39.     padding: .75rem 1rem;
  40. }
  41. .left-side > .body {
  42.     padding: .8rem 1.35rem;
  43.     width: calc(100% * 2*1.35rem);
  44. }
  45. .body > .data {
  46.     display: flex;
  47.     justify-content: space-between;
  48. }
  49. .form-group {
  50.     width: 45%;
  51. }
  52. .form-group > span {
  53.     color: #ddd;
  54.     display: block;
  55.     font-family: "segoe ui";
  56.     font-size: 10pt;
  57.     margin-bottom: 7px;
  58. }
  59. .form-group > .input-wrapper {
  60.     align-items: center;
  61.     background-color: white;
  62.     border-radius: 5px;
  63.     box-shadow: 0px 2px 5px 1px rgba(0,0,0,.4) inset,
  64.         0px -1px 2px 1px rgba(0,0,0,.25) inset;
  65.     display: flex;
  66.     justify-content: space-between;
  67. }
  68. .input-wrapper > .txt {
  69.     width: 80%;
  70. }
  71. .input-wrapper > i {
  72.     color: gold;
  73.     width: 20%;
  74. }
  75. .txt {
  76.     background-color: transparent;
  77.     border: none;
  78.     border-radius: 5px;
  79.     padding: .4rem .25rem;
  80.     width: calc(80% - 2*.35rem - 2*1px);
  81. }
  82. .txt:focus {
  83.     outline: none;
  84. }
  85. .help {
  86.     display: flex;
  87.     justify-content: flex-end;
  88. }
  89.  
  90. a {
  91.     color: #ddd;
  92.     display: block;
  93.     font-family: "segoe ui";
  94.     font-size: 10pt;
  95.     font-style: italic;
  96.     margin-top: 20px;
  97.     text-align: right;
  98.     text-decoration: none;
  99. }
  100.  
  101. /*****************
  102.     RIGHT SIDE
  103. *****************/
  104. .right-side > i {
  105.     color: #fff;
  106.     display: block;
  107. }
  108. .right-side > span {
  109.     color: #fff;
  110.     display: block;
  111.     font-family: "segoe ui";
  112.     font-size: 16pt;
  113. }

Resultado:

(http://i.imgur.com/DV831bu.png)


Saludos.

Título: Re: [CSS] Simple y bonito formulario de ingreso.
Publicado por: EFEX en 26 Marzo 2015, 04:33 am
Incluso podes hacerlo mas parecido

(https://i.imgur.com/xi1a0j1.png)

Código
  1. /* No todos usan esa fuente, pero podes utilizar las de Google Fonts y se vera igual en los demas navegadores */
  2. @import url(http://fonts.googleapis.com/css?family=Lato:400,400italic,700);
  3.  
  4. body{
  5.   /* Agregamos la fuente de Google Fonts */
  6.   font-family: 'Lato', sans-serif;
  7.   /* Agregamos las lineas repetitivas en el body sin tener que utilizar imagenes */
  8.   background: repeating-linear-gradient(
  9.     -55.5deg,
  10.     #fff,
  11.     #fff 2px,
  12.     #eee 2px,
  13.     #eee 4px
  14.   );
  15. }
  16. .flogin{
  17.   /* El borde es mas correspondiente si lo agregamos en su clase padre y no en .left-side y .right-side*/
  18.   border: 9px solid rgba(221, 221, 221, .5);
  19.   -webkit-background-clip: padding-box;
  20.   background-clip: padding-box;
  21.   position: relative;
  22.   display: inline-block;
  23.   border-radius: 20px;
  24. }
  25.  
  26. .flogin > .left-side {
  27.   /* Fix para los bordes */
  28.   border-right: none;
  29.   border-radius: 10px 0px 0px 10px;
  30.  
  31.   /* Background para .left-side */
  32.   background: rgb(76,76,76); /* Old browsers */
  33.   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+ */
  34.   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+ */
  35.   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+ */
  36.   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+ */
  37.   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+ */
  38.   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 */
  39.   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#111111',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  40. }
  41.  
  42. .flogin  > .right-side {
  43.   /* Fix para los bordes */
  44.   border-left: none;
  45.   border-radius: 0px 10px 10px 0px;
  46. }

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.

Título: Re: [CSS] Simple y bonito formulario de ingreso.
Publicado por: Usuario Invitado en 26 Marzo 2015, 12:26 pm
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 ^^


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines