TECNato – TIC's Perú

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.

<div id="envoltura">
<div id="mensaje">Mensaje...</div>
<div id="contenedor" class="curva">
<div id="cabecera" class="tac"><img src="img/logo.png" alt="Via Gamarra" /></div>
<div id="cuerpo"><form id="form-login" action="" autocomplete="off" method="post">
<p><label for="usuario">Usuario:</label></p>
<p class="mb10"><input id="usuario" name="usuario" required="" type="text" autofocus="" /></p>
<p><label for="contrasenia">Contraseña:</label></p>
<p class="mb10"><input id="contrasenia" name="contrasenia" required="" type="password" /></p>
<p><input id="submit" class="boton" name="submit" type="submit" value="Ingresar" /></p>
</form></div>
<div id="pie" class="tac">Sistema de Gestión de Contenidos</div>
</div>
<!-- fin contenedor -->
<div id="nota"><a title="¿Necesitas un Sitio Web?" href="http://gruposistemas.com">GrupoSistemas</a></div>
</div>

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
}

Código fuente | Demostración