TECNato – TIC's Perú

Diseño de un formulario Login

domingo, 29 de julio del 2012 6 comentarios

En esta oportunidad te muestro un ejemplo de como diseñar un formulario login para un sistema Web.

La siguiente imagen primero se elaboró en Photoshop.

Seguidamente se codificó en HTML.

Mensaje...
Via Gamarra

Sistema de Gestión de Contenidos

Finalmente aplicamos estilos con algunas características de CSS3.

body{
	background:#464646;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin: 0
}

#envoltura{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-165px;
	margin-top:-150px;
	width:330px
}

#mensaje{
	background: #ececec;
	border: 1px solid #000;
	border-radius:2px;
	box-shadow: 0 0 0 2px rgba(255,255,255,.1);
	display: none;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
	left: 30px;
	position: absolute;
	right: 30px;
	text-align: center;
	top: -50px
}

#mensaje.mensaje-rojo{
	border-color: #e9322d;
	color: #e9322d
}

#mensaje.mensaje-verde{
	border-color: #46a546;
	color: #46a546
}

#contenedor{
	background-color:#356AA0;
	box-shadow: 0 0 0 5px rgba(255,255,255,.3);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px
}

#cabecera{
	border-bottom: 1px solid #666;
	color:#FFF;
	font-family:'Trebuchet MS', Helvetica, sans-serif;
	font-size:28px;
	height:50px;
	line-height:50px;
	text-shadow: 1px 1px 2px #000000;
	text-align:center
}

#cuerpo{
	background:#ececec;
	border:solid #ccc;
	border-width: 1px 0;
	padding:10px 30px
}

form,p{
	margin:0
}

p{
	padding-bottom: 5px
}

.mb10{
	margin-bottom: 10px
}

label{
	color: #666;
	font-weight: bold
}

input{
	border: 1px solid #999;
	border-radius:2px;box-shadow: 0 0 0 2px rgba(0,0,0,.1);
	font:bold 12px Arial, Helvetica, sans-serif;
	height: 24px;
	line-height: 24px;
	padding:0 2px
}

input#usuario{
	background:#fff url(../img/login-sprite.png) no-repeat 0 -23px;
	padding-left: 20px;
	width: 244px
}

input#contrasenia{
	background:#fff url(../img/login-sprite.png) no-repeat 0 -53px;
	padding-left: 20px;
	width: 244px
}

.boton{
	background: #ccc;
	background: -moz-linear-gradient(top,#eee,#ccc);
	background: -webkit-linear-gradient(top,#eee,#ccc);
	background: linear-gradient(top,#eee,#ccc);
	color: #666;
	padding:0 10px
}

.boton:active{
	position: relative;
	top: 1px
}

#pie{
	border-top: 1px solid #666;
	color: #fff;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	text-align: center
}

#nota{
	padding-top: 20px;
}

#nota a{
	background:url(../img/login-sprite.png) no-repeat;
	display: block;
	height: 18px;
	margin: 0 auto;
	opacity:.28;
	overflow: hidden;
	text-indent: 100%;
	-webkit-transition:opacity .3s linear;
	-moz-transition:opacity .3s linear;
	transition:opacity .3s linear;
	width: 125px
}

#nota a:hover{
	opacity:.5
}

Descargar fuentes | Demostración


Escrito por para TECNato

6 comentarios

  • Alain
    12 de octubre del 2012

    Aquí una colección de diseños de formularios de inicio de sesión: http://www.instantshift.com/2012/09/25/99-beautiful-free-signin-login-and-signup-psd-designs/

  • Hernán Medina
    27 de marzo del 2013

    Genial. Si tienes algún ejemplo que trate las sesiones de usuario y como se implementa. Saludos. Éxitos.

  • Javier
    20 de julio del 2013

    muy bueno gracia, pero necesito algo que va mas alla, como se puede hacer un formulario de acceso en Html sin necesidad de registrarse y que el unico campo sea el correo para luego acceder a una determinada pagina web oculta o bloqueada por el formulario, claro que no todos los correos electronicos puedan entrar, solo los correos que uno configure con permisos para que entren. si tienes algun conocimiento me gustaria que me ayudes :)

  • ale
    28 de marzo del 2014

    oyes entonces como seria la base datos en mysql??

  • Jose Angel
    7 de septiembre del 2014

    Man, muy bueno el ejemplo, Felicitaciones por compartir tus conocimientos

  • yirman
    20 de marzo del 2016

    tengo una pregunta yo copie el formulario y lo active en google
    y me salio con dominio y todo hay problemas con los derechos de autor?

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear una comunidad tecnológica, un espacio virtual para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación).

Hazte miembro

TECNato es libre y abierto a nuevos miembros que estén dispuestos a compartir sus conocimientos en TIC’s, así que no dudes en escribirnos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
CMS:
WordPress