elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [CSS] Simple y bonito formulario de ingreso.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [CSS] Simple y bonito formulario de ingreso.  (Leído 2,826 veces)
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
[CSS] Simple y bonito formulario de ingreso.
« 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:


HTML:

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



Saludos.


« Última modificación: 26 Marzo 2015, 03:35 am por Gus Garsaky » En línea

"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


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: [CSS] Simple y bonito formulario de ingreso.
« Respuesta #1 en: 26 Marzo 2015, 04:33 am »

Incluso podes hacerlo mas parecido



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.


« Última modificación: 26 Marzo 2015, 04:50 am por EFEX » En línea

Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
Re: [CSS] Simple y bonito formulario de ingreso.
« Respuesta #2 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 ^^
« Última modificación: 26 Marzo 2015, 13:38 pm por Gus Garsaky » En línea

"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
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Diseño Bonito « 1 2 »
Programación Visual Basic
Isirius 11 3,664 Último mensaje 16 Enero 2007, 18:56 pm
por Isirius
Error al ejecutar un simple formulario en Visual Studio 2008
Programación General
draccomalfoy 1 2,117 Último mensaje 6 Febrero 2012, 19:21 pm
por draccomalfoy
formulario ingreso inventario productos
Desarrollo Web
kakashi20 4 2,360 Último mensaje 15 Noviembre 2013, 17:24 pm
por kakashi20
ingreso limitado al formulario con jsp
Java
MarioMedina 3 1,947 Último mensaje 22 Octubre 2015, 19:25 pm
por 0roch1
Formulario Dinamico Simple (Si o No)
PHP
Conwafe 4 1,996 Último mensaje 19 Febrero 2016, 12:16 pm
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines