[CSS] Simple y bonito formulario de ingreso.

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]

Autor

Tema: [CSS] Simple y bonito formulario de ingreso. (Leído 3,050 veces)

Usuario Invitado

Desconectado

Mensajes: 625

[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

<!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

.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.


« Ú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

Mensajes: 1.171

"Dinero Facil"

Re: [CSS] Simple y bonito formulario de ingreso.

« Respuesta #1 en: 26 Marzo 2015, 04:33 am »

Incluso podes hacerlo mas parecido

Código

/* 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.


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

GITHUB

Usuario Invitado

Desconectado

Mensajes: 625

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 a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Diseño Bonito « 1 2 » Programación Visual Basic	Isirius	11	4,077	16 Enero 2007, 18:56 pm por Isirius
	Error al ejecutar un simple formulario en Visual Studio 2008 Programación General	draccomalfoy	1	2,430	6 Febrero 2012, 19:21 pm por draccomalfoy
	formulario ingreso inventario productos Desarrollo Web	kakashi20	4	2,612	15 Noviembre 2013, 17:24 pm por kakashi20
	ingreso limitado al formulario con jsp Java	MarioMedina	3	2,110	22 Octubre 2015, 19:25 pm por 0roch1
	Formulario Dinamico Simple (Si o No) PHP	Conwafe	4	2,202	19 Febrero 2016, 12:16 pm por engel lex