Diseño de un formulario Login

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

Autor: Alain

Especialista en desarrollo de aplicaciones web

6 opiniones en “Diseño de un formulario Login”

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

  2. 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 :)

  3. 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 un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *